Working with templates in View

Introduction

As web applications grow, maintaining repeated HTML structures across multiple pages can become a challenge. Page headers, product cards, information panels, and other common elements often share the same markup.

Copying these structures into every view increases duplication and makes future changes more difficult.

CodeBehind addresses this through its Template system. It allows developers to define reusable sections of a page and insert them into other parts of the view.

Templates can be defined directly inside a page or stored in external files. Both Razor Syntax and Standard Syntax are supported.

Creating Your First Template

Consider an online store where several pages display product information using the same HTML structure.

Instead of repeating the markup for every product, we can define a template named ProductCard.

Here is an example using Razor Syntax:

@#ProductCard{ <div class="product-card"> <img src="@model.ProductImage" alt="@model.ProductName" /> <div class="product-info"> <h3>@model.ProductName</h3> <p>@model.ProductDescription</p> <span class="price">@model.ProductPrice</span> </div> </div> }

The template can then be referenced wherever its content is needed:

<section class="products"> @#ProductCard </section>

When CodeBehind processes the page, the template reference is replaced with the content defined in ProductCard.

This allows developers to maintain a single definition of a reusable HTML structure rather than duplicating it throughout the application.

The Same Example in Standard Syntax

CodeBehind provides the same capability through Standard Syntax.

The ProductCard template can be defined as follows:

<#ProductCard <div class="product-card"> <img src="<%=model.ProductImage%>" alt="<%=model.ProductName%>" /> <div class="product-info"> <h3><%=model.ProductName%></h3> <p><%=model.ProductDescription%></p> <span class="price"><%=model.ProductPrice%></span> </div> </div> #>

To insert the template, use:

<section class="products"> <#ProductCard#> </section>

Both examples demonstrate the same concept using their respective syntax conventions.

Organizing Templates in External Files

For larger applications, keeping all template definitions inside individual pages may not be the best approach.

CodeBehind supports external template files through the .astx extension. This makes it possible to organize reusable structures separately from the main page.

For example, create the following file:

/templates/product_card.astx

The file contains the template definition:

@#ProductCard{ <div class="product-card"> <img src="@model.ProductImage" alt="@model.ProductName" /> <h3>@model.ProductName</h3> <p>@model.ProductDescription</p> <span>@model.ProductPrice</span> </div> }

You can reference this external template from a page using Razor Syntax:

@page @template "/templates/product_card.astx"

The equivalent Standard Syntax declaration is:

<%@ Page Template="/templates/product_card.astx" %>

The .astx extension is optional when specifying the template path. Therefore, the following path is also valid:

/templates/product_card

This approach allows multiple pages to use the same external template without maintaining separate copies of its HTML structure.

Keeping Views Consistent Across an Application

External templates are particularly useful when several sections of an application follow the same design conventions.

For example, an online store might use shared templates for:

Product cards
Category panels
Customer information sections
Order summaries
Notification messages

If the design of a product card changes, developers only need to update its template instead of searching through multiple views.

This also makes collaboration easier because developers can work on individual page structures while shared HTML components remain centrally organized.

Conclusion

The Template system in CodeBehind provides a practical way to organize and reuse HTML structures.

By supporting inline definitions, external .astx files, Razor Syntax, and Standard Syntax, it gives developers different options for managing their view structures.

Rather than duplicating the same markup across an application, developers can define a template once and reuse it wherever necessary.

Template feature is an important part of CodeBehind's approach to maintaining clean, organized, and reusable views.