Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Collapse]Templates
    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]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Expand]Miscellaneous UI Customizations
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

Show Me

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 New UI Templates | Default Vertical Template Content project item and specify a name (e.g., "MyDefaultVerticalTemplateContent").

Note

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

Important

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.

Note

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

How would you rate this topic?​​​​​​​