[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]List Editors
  [Expand]Property Editors
    How to: Access the Bar Manager
    How to: Access the Document Manager
    How to: Access the Ribbon Control
    How to: Create a Custom WinForms Ribbon Template
    How to: Create a Custom WinForms Standard Template
    How to: Customize an ASP.NET Template
    How to: Distribute Custom Templates with Modules
  [Expand]Scheduler and Notifications
  [Expand]Maps Module
  [Expand]Miscellaneous UI Customizations
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Customize an ASP.NET Template

By default, the template content of ASP.NET 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.


A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4359.

Expanded Add an Editable Template

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


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


Always add a custom template to a root folder of an ASP.NET 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".

Expanded 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.

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


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

Expanded 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 template using the following markup.

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.

Expanded See Also

Is this topic helpful?​​​​​​​