Verwenden gerätespezifischer Vorlagen

Artikel
09/02/2008

Aktualisiert: November 2007

Wenn Sie gerätespezifisches Markup mit ASP.NET Mobile-Steuerelementen kombinieren, müssen Sie unter Beachtung des von den mobilen Steuerelementen wiedergegebenen Inhalts die Konsistenz sicherstellen. Die intelligente Erkennung und Anpassung von kombiniertem gerätespezifischem und geräteunabhängigem Markup wird nicht unterstützt.

Beispiel für falsches Kombinieren

Im folgenden fehlerhaften Beispiel werden die Inhalte der <ContentTemplate>-Elemente an das Gerät gesendet, wenn der Filter mit der Gerätefunktion übereinstimmt. Beachten Sie die alignment-Eigenschaft für das erste Panel-Steuerelement und für das Label-Steuerelement. Da das Label-Steuerelement sich innerhalb eines <td>-WML-Elements befindet, wird das <p>-Element, das für das Label-Steuerelement generiert wurde, vom Browser falsch wiedergegeben, da es sich innerhalb des <td>-Tags befindet.

<mobile:panel  alignment="right">
  <DeviceSpecific>
    <Choice Filter="isWML11">
      <ContentTemplate>
        <table columns="2" align="LR">
        <tr>
          <td>
            </ContentTemplate>
           </Choice>
           </Devicespecific>
           </mobile:panel>
    <mobile:label id="label1"  text="HELLO HOW ARE YOU" alignment="left" />
    <mobile:panel >
         <DeviceSpecific>
           <Choice Filter="isWML11">
            <ContentTemplate>
              </td>
          <td>
         </ContentTemplate>
        </Choice>
  </Devicespecific>
</mobile:panel>

Nachdem Sie eine nicht standardmäßige Einstellung für alignment festgelegt haben, wird ein <p>-Element für jedes erstellte Steuerelement wiedergegeben. Es wird der folgende Fehler generiert:

Digest Compile failed.
WML_1.1.DTD(9) : error: Close tag 'p' does not match start tag 'td'
WML_1.1.DTD(9) : error: Invalid element 'p' in content of 'tr'. 
    Expected td
WML_1.1.DTD(9) : error: Invalid element 'p' in content of 'tr'.   
    Expected td
WML_1.1.DTD(10) : error: Close tag 'td' does not match start tag 'p'

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

Hinweis:
Sie können die Ausrichtung einer ganzen Tabelle steuern, nicht jedoch die Ausrichtung einzelner Zellen.

Korrigiertes Beispiel

Im folgenden Beispiel sind die Fehler des vorherigen Beispiels korrigiert sowie weitere Elemente, z. B. Seitendirektiven und Form-Steuerelemente, hinzugefügt.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language ="c#" %>
<Mobile:Form runat=server ID="OrderForm" Title="Submit your Order For pizza">
    <Mobile:link runat=server ID="LinkWN1" Text="What's On" Alignment="center">
</Mobile:link>
   <mobile:Panel runat=server>
      <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">
   </Mobile:Label>
   <mobile:Panel runat=server>
      <DeviceSpecific>
         <Choice Filter="isWML11">
            <ContentTemplate>
</td><td>
            </ContentTemplate>
         </Choice>
     </Devicespecific>
   </mobile:panel>
   <mobile:Panel runat=server>
      <DeviceSpecific>
         <Choice Filter="isWML11">
            <ContentTemplate>
</td></tr>
              </table>
            </ContentTemplate>
         </Choice>
      </Devicespecific>
</mobile:panel>
</Mobile:Form>

<Mobile:Form runat=server ID="WhatisOn" Title="Contains">
<Mobile:Label StyleReference="Title" ID="LblWO2" runat=server Text="Toppings"></Mobile:Label>
</Mobile:Form>