模板集和模板化控件

更新:2007 年 11 月

ASP.NET 提供模板化控件,这些控件公开定义控件内容和布局的许多模板属性。这些模板在控件呈现期间插入到适当的位置。例如,有用于 List 控件的模板,如页眉和页脚模板。此功能允许您根据设备在运行时对控件的外观进行大量自定义。

ASP.NET 移动控件扩展了此模型,并引入了模板集的概念。模板集是由模板组成的集合。但是,单个模板化控件可能引用多个模板集,而每个模板集都具有不同的特定于设备的条件。

模板集的呈现条件

模板化控件的每个模板集都包含在共享的 <DeviceSpecific> 元素内的 <Choice> 元素中。运行时,按顺序计算 <DeviceSpecific> 元素中的选项。第一个匹配的 <Choice> 元素用于特定于设备的内容。如果选中的选项包含模板,控件将使用这些模板。如果没有找到模板,或者指定的选项都不适用,则控件呈现其默认标记。

与设备无关的模板

任何模板化控件都可以有与设备无关的模板。要指定与设备无关的模板,请使用不带显式 Filter 属性的 <Choice> 元素。指定与设备无关的选项时,它必须始终是最后声明的选项,以便在没有任何其他选项适用于目标设备时选择它。

特定于控件的呈现

模板模式中的控件呈现行为是特定于控件的。某些控件(例如 ListObjectList)可能从提供的模板呈现它们的全部内容。有些控件则可能将特定模板的内容添加到它们的默认内容中。例如,如果为 Form 控件选择了页眉或页脚模板,则该模板中包含的标记将被添加到窗体内容中,分别作为页眉或页脚。

设置模板化控件的属性

若要以编程方式设置模板中控件的属性,则必须获得命名容器的引用,并使用 FindControl 方法来查找控件。然后才可以设置其属性。下面的示例演示该技术。

说明:

因为样式表信息是在您能够以编程方式更改 StyleReference 属性之前加载的,所以在代码中更改它没有任何影响。

void Page_Load(Object sender, EventArgs e)
{
    // Iterate through the controls in the form.
    foreach(Control c in Form1.Controls)
    {
        if(c.GetType()) == typeof(TemplateContainer)
        {
            // Get the link control.
            Link ctrl = (Link)c.FindControl("myLink");
            if (ctrl != null)
            {
                // Set the text and url properties.
                ctrl.Text = "Home Page";
                ctrl.NavigateURL = "https://www.microsoft.com";
            }
        }
    }
}

模板集和样式

StyleSheet 控件中的样式可能还包含模板集。因此可以有多个模板化控件,它们引用同一样式,使用相同的模板集,而且提供与样式所提供的封装相同的优点。有关演示模板集的示例,请参见 ASP.NET 移动控件快速入门

样式模板与样式属性的比较

您可以从父级继承样式,可以显式地设置 StyleReference 属性,或者可以通过聚合来继承样式。但是,使用模板时不存在层叠效果。除非使用样式表中的模板,否则无法从父级样式模板中获得一个模板。有关更多信息,请参见样式

动态添加的模板

在一些高级方案中,动态实例化和添加模板很有用。下面的代码示例在 Init 事件处理程序中添加模板。

<%@ Page Language="C#" 
    Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script runat="server">
    private void Form_Init(object sender, System.EventArgs e)
    {
        DeviceSpecific devSpecific = new DeviceSpecific();

        // Create the choice tag.
        DeviceSpecificChoice devChoice = 
            new DeviceSpecificChoice();
        devChoice.Filter = "isHTML32";

        // Create the template.
        ITemplate myTemplate = 
            new CustomTemplate("HeaderTemplate");

        // Create the templateContainer.
        TemplateContainer container = new TemplateContainer();
        myTemplate.InstantiateIn(container);

        // Create the tree.
        devChoice.Templates.Add("HeaderTemplate", myTemplate);
        ((IParserAccessor)devSpecific).AddParsedSubObject(devChoice);
        ((IParserAccessor)form1).AddParsedSubObject(devSpecific);
    }
    public class CustomTemplate : ITemplate
    {
        String strWhichTemplate;

        public CustomTemplate(String strTemplate)
        {
            strWhichTemplate = strTemplate;
        }

        public void InstantiateIn(Control container)
        {
            if (strWhichTemplate == "HeaderTemplate")
            {
                System.Web.UI.MobileControls.Label lb =
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "Header Template";

                System.Web.UI.MobileControls.Command cmd = 
                    new System.Web.UI.MobileControls.Command();
                cmd.Text = "heLLo";

                container.Controls.Add(lb);
                container.Controls.Add(cmd);
            }
            else if (strWhichTemplate == "FooterTemplate")
            {
                System.Web.UI.MobileControls.Label lb = 
                    new System.Web.UI.MobileControls.Label();
                lb.Text = "FooterTemplate";
                container.Controls.Add(lb);
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <mobile:form id="form1" runat="server" OnInit="Form_Init">
  </mobile:form>
</body>
</html>

使用特定于设备的模板时的特殊注意事项

混合使用特定于设备的标记语言与移动控件时,必须基于移动控件呈现的内容来确保一致性。混合使用特定于设备的标记和与设备无关的标记时,不支持智能检测和匹配。

例如,在下面的代码示例中,请注意第一个 Panel 控件和 Label 控件的 alignment 设置:

<mobile:Panel runat=server alignment="right">
<DeviceSpecific>
  <Choice Filter="isWML11">
    <ContentTemplate>
      <table columns="2" align="LR">
        <tr><td>
    </ContentTemplate>
  </Choice></Devicespecific>
</mobile:panel>

<Mobile:Label id="label1" runat=server Text="HELLO, HOW ARE YOU?" 
    alignment="left">
</Mobile:Label>
<mobile:Panel runat=server>
<DeviceSpecific>
  <Choice Filter="isWML11">
    <ContentTemplate></td><td>
    </ContentTemplate>
  </Choice>
</DeviceSpecific> 
</mobile:panel>

WML <p> 元素用于呈现非默认的对齐方式。在前面的示例中,第二个 Label 控件位于 WML <td> 元素内,而且浏览器错误地呈现为第二个 Label 控件生成的 <p> 元素,因为它位于 <td> 元素内。

这种情况下,由于 Label 控件不从第一个 Panel 控件继承对齐方式,因此它为自己的对齐方式生成一个 <p> 标记。但是,此情况下不能添加 <p> 标记。这种情况并不常见,通过以下方式可以解决此问题:将 Label 控件标记为仅当目标设备不是基于 WML 的设备时可见,并在模板中指定 Label 控件的文本。

任意特定于设备的标记

有些情况下,可能需要插入用于特定设备或特定设备类型的任意标记。为启用此功能,ASP.NET 移动网页为 Panel 控件提供了内容模板。如果选中的选项包含内容模板,则控件呈现时使用该模板而不是通常的内容。

请参见

概念

样式

设备模板支持

其他资源

应用程序开发人员指南

开发 ASP.NET 移动网页

ASP.NET 移动控件的设计和呈现概念