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”).
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.
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”.
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.
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.
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.