How to: Customize an ASP.NET Template 操作：自定义ASP.NET模板

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.

默认情况下，ASP.NET应用程序的模板内容由嵌入到 DevExpress.ExpressApp.Web 中的用户控件提供，因此无法修改。但是，您可以将模板内容源文件包含在应用程序项目中，修改此内容并切换到它。此示例演示如何修改默认垂直模板内容新模板内容。

 

Tip 提示
A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4359
完整的示例项目可在 DevExpress 代码示例数据库中找到，http://www.devexpress.com/example=E4359

.

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

打开现有的 XAF 解决方案或创建新的解决方案。调用ASP.NET应用程序项目的模板库，选择 XAF ASP.NET模板 |默认垂直模板内容项目项并指定名称（例如，"我的默认垂直模板内容"）。

TemplateGalery_Web

Note 注意
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.)
如果使用经典 Web UI，请选择"已弃用模板" |默认垂直模板内容项，而不是 XAF ASP.NET模板 |默认垂直模板内容。

 

Important 重要
Always add a custom template to a root folder of an ASP.NET application project. Otherwise, image URLs may be generated incorrectly.
始终将自定义模板添加到ASP.NET应用程序项目的根文件夹中。否则，图像 URL 可能会生成不正确。

 

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

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

将添加以下实现用户控件的文件。

  • 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".

打开 ASCX 文件。在这里，您可以修改内容标记。例如，您可以更改"更新面板"样式 - 将其"4a4a4a"颜色替换为"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.

要使用修改后的内容而不是默认内容，请打开Global.asax.cs （Global.asax.vb） 文件并修改Session_Start事件处理程序。指定自定义用户控件的路径，如下所示。

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.
如果要重写默认模板脚本，请处理 WebWindow.CustomRegister 模板依赖脚本事件。

 

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.

显示导航历史记录（痕迹）的导航历史记录操作容器在新 Web UI 中不可用。但是，您可以使用以下标记轻松地将其添加到自定义ASP.NET模板。

    ASPX

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

操作容器应放置在 XafUpdatePanel 控件中。结果如下。

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.

您可以使用相同的方法将任何其他内置或自定义操作容器添加到模板中的所需位置。请注意，自定义操作容器实例应添加到模板的 IFrameTemplate.GetContainers 方法返回的列表。

posted @ 2020-01-08 16:02  code first life  阅读(460)  评论(0)  编辑  收藏  举报