Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Customize an ASP.NET Web Forms Template

  • 3 minutes to read

By default, the template content of ASP.NET Web Forms applications is provided by User Controls embedded into the DevExpress.ExpressApp.Web, and thus cannot be modified. However, you can include template content source files into your application project, modify this content and switch to it instead. This example demonstrates how to modify the DefaultVerticalTemplateContentNew template content.

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e4359/xaf-how-to-add-a-navigation-history-element-to-a-custom-asp-net-template.

#Add an Editable Template

Open the existing XAF solution or create a new one. Invoke the Template Gallery for the ASP.NET Web Forms application project, choose the XAF ASP.NET Web Forms Templates | Default Vertical Template Content project item and specify a name (e.g., “MyDefaultVerticalTemplateContent”).

TemplateGalery_Web

Note

If you use Classic Web UI, select the Deprecated Templates | Default Vertical Template Content item instead of XAF ASP.NET Web Forms Templates | Default Vertical Template Content.)

Important

Always add a custom template to a root folder of an ASP.NET Web Forms application project. Otherwise, image URLs may be generated incorrectly.

The following files that implement the User Control will be added.

  • MyDefaultVerticalTemplateContent.ascx
  • MyDefaultVerticalTemplateContent.ascx.cs
  • MyDefaultVerticalTemplateContent.ascx.designer.cs

These files are selected in the image below, which was taken from the Solution Explorer window.

Templates_CustomizeWebTemplates_UserControlFiles

Open the ASCX file. Here, you can modify the content markup. For instance, you can change the Update Panel style - replace its “4a4a4a” color with “2c86d3”.

Templates_CustomizeWebTemplates

#Use the Modified Template Instead of Default

To use the modified content instead of default content, open the Global.asax.cs (Global.asax.vb) file and modify the Session_Start event handler. Specify a path to your custom User Control as shown below.

protected void Session_Start(Object sender, EventArgs e) {
    // ...
    WebApplication.Instance.Settings.DefaultVerticalTemplateContentPath =
        "MyDefaultVerticalTemplateContent.ascx";
    WebApplication.Instance.SwitchToNewStyle();
    WebApplication.Instance.Setup();
    WebApplication.Instance.Start();
}

The image below illustrates the modified View caption style in the running application.

Templates_CustomizeWebTemplates_Result

Note

If you want to override the default template scripts, handle the WebWindow.CustomRegisterTemplateDependentScripts event.

#Add an Action Container to the Template

The NavigationHistoryActionContainer, which displays the navigation history (breadcrumbs), is not available in the new web UI. However, you can easily add it to your custom ASP.NET Web Forms template using the following markup.

<xaf:XafUpdatePanel ID="XafUpdatePanel3" runat="server">
    <xaf:NavigationHistoryActionContainer runat="server" 
        ContainerId="ViewsHistoryNavigation" 
        id ="NavigationHistoryActionContainer" 
        Delimiter=" / " />
</xaf:XafUpdatePanel>

The Action Container should be placed within the XafUpdatePanel control. The result is demonstrated below.

Templates_CustomizeWebTemplates_BreadCrumbs

You can use the same approach to add any other built-in or custom Action Container to a desired location within a Template. Note that your custom Action Container instance should be added to the list returned by the Template’s IFrameTemplate.GetContainers method.

See Also