Vorlagensätze und Steuerelemente mit Vorlagen

Artikel
09/02/2008

Aktualisiert: November 2007

ASP.NET stellt Steuerelemente mit Vorlagen bereit, die eine Reihe von Vorlageneigenschaften verfügbar machen, die Inhalt und Layout des Steuerelements definieren. Die Vorlagen werden beim Anzeigen des Steuerelements an den entsprechenden Stellen eingefügt. Es gibt zum Beispiel Vorlagen für das List-Steuerelement, wie Header- und Footervorlagen. Mit diesem Feature können Sie eine weitreichende geräteabhängige Anpassung der Darstellung von Steuerelementen zur Laufzeit vornehmen.

ASP.NET Mobile-Steuerelemente erweitern dieses Modell und führen das Konzept der Vorlagensätze ein. Bei einem Vorlagensatz handelt es sich um eine Auflistung von Vorlagen. Ein einzelnes Steuerelement mit Vorlagen kann jedoch auf mehrere Vorlagensätze zurückgreifen, wobei die einzelnen Vorlagensätze jeweils unterschiedliche gerätespezifische Kriterien aufweisen.

Wiedergabekriterien für Vorlagensätze

Jeder Vorlagensatz eines Steuerelements mit Vorlagen ist in einem <Choice>-Element enthalten, das sich wiederum in einem gemeinsam verwendeten <DeviceSpecific>-Element befindet. Zur Laufzeit werden die Choice-Elemente im <DeviceSpecific>-Element nacheinander ausgewertet. Das erste übereinstimmende <Choice>-Element wird für gerätespezifischen Inhalt verwendet. Wenn das ausgewählte <Choice>-Element Vorlagen enthält, werden diese vom Steuerelement verwendet. Wenn keine Vorlagen vorhanden sind oder keines der angegebenen Choice-Elemente geeignet ist, gibt das Steuerelement das Standardmarkup wieder.

Geräteunabhängige Vorlagen

Jedes Steuerelement mit Vorlagen kann über eine geräteunabhängige Vorlage verfügen. Verwenden Sie zum Angeben geräteunabhängiger Vorlagen ein <Choice>-Element ohne explizites Filter-Attribut. Wenn ein geräteunabhängiges <Choice>-Element angegeben wird, muss dieses immer als letztes <Choice>-Elementen deklariert werden, sodass es ausgewählt wird, wenn kein anderes <Choice>-Element auf das Zielgerät anwendbar ist.

Steuerelementspezifische Wiedergabe

Das Wiedergabeverhalten von Steuerelementen im Vorlagenmodus hängt vom jeweiligen Steuerelement ab. Einige Steuerelemente, zum Beispiel List und ObjectList, können möglicherweise alle Inhalte aus den bereitgestellten Vorlagen wiedergeben. Bei anderen Vorlagen wird möglicherweise der Inhalt bestimmter Vorlagen dem Standardinhalt hinzugefügt. Wenn zum Beispiel für das Form-Steuerelement eine Header- oder Footervorlage ausgewählt wurde, wird das Markup in der Vorlage dem Formularinhalt als Header bzw. Footer hinzugefügt.

Festlegen von Eigenschaften für ein Steuerelement mit Vorlagen

Um Eigenschaften eines Steuerelements in einer Vorlage programmgesteuert festzulegen, müssen Sie einen Verweis auf den Namenscontainer abrufen und mithilfe der FindControl-Methode das Steuerelement suchen. Anschließend können Sie die Eigenschaften festlegen. Das folgende Beispiel veranschaulicht diese Technik:

Hinweis:
Da Stylesheetinformationen geladen werden, bevor Sie die StyleReference-Eigenschaft programmgesteuert ändern können, hat eine Änderung per Code keine Auswirkung.

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";
            }
        }
    }
}

Vorlagensätze und Stile

Stile in einem StyleSheet-Steuerelement können auch Vorlagensätze enthalten. Steuerelemente mit mehreren Vorlagen können daher auf den gleichen Stil verweisen, die gleichen Vorlagensätze verwenden und die gleichen Vorteile der Kapselung bieten wie ein Stil. Ein Beispiel zu Vorlagensätzen finden Sie unter Schnellstart zu ASP.NET Mobile-Steuerelementen.

Formatvorlagen und Stileigenschaften

Sie können einen Stil von einem übergeordneten Element erben, die StyleReference-Eigenschaft explizit festlegen, oder Sie können den Stil durch Aggregation erben. Bei Vorlagen hingegen gibt es keine Überlappung. Eine Vorlage kann nur von einer übergeordneten Stilvorlage abgerufen werden, wenn Sie eine Vorlage in einem Stylesheet verwenden. Weitere Informationen finden Sie unter Formate.

Dynamisch hinzugefügte Vorlagen

Bei einigen komplexen Szenarien empfiehlt es sich, Vorlagen dynamisch zu instanziieren und hinzuzufügen. Im folgenden Codebeispiel werden Vorlagen in einem Init-Ereignishandler hinzugefügt.

<%@ 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>

Besonderheiten bei der Verwendung gerätespezifischer Vorlagen

Wenn Sie gerätespezifische Markupsprachen in Verbindung mit mobilen Steuerelementen verwenden, müssen Sie unter Beachtung des von den mobilen Steuerelementen wiedergegebenen Inhalts Konsistenz sicherstellen. Die intelligente Erkennung und Anpassung von kombiniertem gerätespezifischem und geräteunabhängigem Markup wird nicht unterstützt.

Beachten Sie beispielsweise die alignment-Einstellung für das erste Panel-Steuerelement und das Label-Steuerelement im folgenden Codebeispiel:

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

<p>-WML-Elemente werden für die Wiedergabe einer von der Standardeinstellung abweichenden Ausrichtung verwendet. Im vorherigen Beispiel befindet sich das zweite Label-Steuerelement innerhalb eines <td>-WML-Elements, und das <p>-Element, das für das zweite Label-Steuerelement generiert wurde, wird vom Browser falsch wiedergegeben, da es sich innerhalb des <td>-Elements befindet.

Das Label-Steuerelement erbt in diesem Fall nicht die Ausrichtung vom ersten Panel-Steuerelement und generiert daher ein <p>-Tag für seine Ausrichtung. In dieser Situation kann jedoch kein <p>-Tag hinzugefügt werden. Dieser Fall tritt zwar selten ein, doch Sie können das Problem umgehen, indem Sie das Label-Steuerelement als sichtbar markieren, wenn das Zielgerät kein WML-basiertes Gerät ist, und den Text des Label-Steuerelements in der Vorlage angeben.

Beliebiges gerätespezifisches Markup

In manchen Fällen empfiehlt es sich, beliebiges Markup für ein bestimmtes Gerät oder einen bestimmten Gerätetyp einzufügen. Dazu stellen ASP.NET Mobile-Webseiten eine Inhaltsvorlage für das Panel-Steuerelement bereit. Wenn ein ausgewähltes Choice-Element eine Inhaltsvorlage enthält, erfolgt die Wiedergabe durch das Steuerelement unter Verwendung der Vorlage anstelle des üblichen Inhalts.