樣板集和樣板化控制項

發行項
08/21/2008

更新：2007 年 11 月

ASP.NET 提供樣板化的控制項，這些控制項公開 (Expose) 許多樣板屬性以定義控制項的內容和配置。在呈現控制項期間，這些樣板會插入適當的位置中。例如，List 控制項的一些樣板，例如頁首 (Header) 和頁尾 (Footer) 樣板。此功能可讓您在執行階段時，自由地根據裝置來自訂控制項的外觀。

ASP.NET Mobile 控制項會擴充此模型，並引入樣板集的概念。樣板集是樣板的集合。然而，單一樣板化控制項可能參考至多個樣板集，而每個樣板集有不同的裝置特定準則。

樣板集的呈現準則

樣板化控制項的每個樣板集都包含於共用 <DeviceSpecific> 項目內的 <Choice> 項目中。在執行階段時，<DeviceSpecific> 項目中的 Choice 會按順序評估。裝置特定內容會使用第一個符合的 <Choice> 項目。如果選取的選擇包含樣板，則控制項會使用它們。如果沒有找到樣板，或是如果沒有適當的指定選擇，則控制項會呈現其預設的標記。

與裝置無關的樣板

任何樣板化控制項都可以擁有與裝置無關 (Device-Independent) 的樣板。若要指定與裝置無關 (Device-Independent) 的樣板，請使用沒有明確 Filter 屬性的 <Choice> 項目。要指定與裝置無關的選擇時，必須永遠是最後一個宣告的選擇，才能在沒有其他選擇套用至目標裝置時選擇它。

控制項特定呈現

樣板化模式中的控制項呈現行為對控制項而言是特定的。有些控制項可以從提供的樣板呈現其所有的內容，例如 List 和 ObjectList。其他控制項可以將特定樣板的內容加入至其預設內容中。例如，如果為 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 控制項中的樣式也會包含樣板集。因此，您可以擁有多個參考相同樣式的範例化控制項、使用相同樣板集，並供給樣式所提供封裝 (Encapsulation) 的相同益處。如需樣板集的說明範例，請參閱 ASP.NET Mobile 控制項快速入門。

樣式樣板與樣式屬性的比較

您可以從父代 (Parent) 繼承樣式、明確設定 StyleReference 屬性，或是透過彙總 (Aggregation) 繼承樣式。然而，樣板沒有階層式的效用。除非您在樣式表中使用樣板，否則不能自父樣式樣板中擷取樣板。如需詳細資訊，請參閱樣式。

動態地加入樣板

在某些進階案例中，動態地具現化和加入樣板是相當有用的。下列程式碼範例在 Init 事件處理常式中加入樣板。

<%@ Page Language="C#" 
    Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script >
    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"  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> 標記 (Tag)。然而，這時卻無法加入 <p> 標記。這並非常見情況，但是藉由將 Label 控制項標記成為可見 (如果目標裝置不是 WML 架構)，並在樣板內指定 Label 控制項的文字，便可解決這個問題。