Using Device-Specific Templates

  • Article

When mixing device-specific markup with ASP.NET mobile controls, you must ensure consistency based on what the mobile controls are rendering. Intelligent detection and adaptation for mixed device-specific and device-independent markup is not supported.

Example of Incorrect Mixing

In the following incorrect example, the contents of the <ContentTemplate> elements are sent to the device if the filter matches the device capability. Note the alignment property on the first Panel control and on the Label control. Since the Label control is within a WML <td> element, the <p> element generated for the Label control is incorrectly rendered by the browser because it is within the <td> tag.

<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:panel runat="server">
         <DeviceSpecific>
           <Choice Filter="isWML11">
            <ContentTemplate>
              </td>
          <td>
         </ContentTemplate>
        </Choice>
  </Devicespecific>
</mobile:panel>

After you set a non-default setting for alignment, a <p> element is rendered for each control created. The following error is generated:

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'

In this case, the Label control does not inherit the alignment from the first Panel control, so it generates a <p> element for its alignment. However, a <p> element cannot be added in this situation. This is not a common situation, but you can work around the problem by marking the Label control as visible only if it is not rendering against a WML-based device, and by having the text of the Label control specified within the template. Use the <table align="left"> tag in the Panel control for WML rendering.

Note

You can control the overall alignment of a table, but not the alignment of individual cells.

Corrected Example

The following example corrects the previous errors and includes additions such as page directives and form controls.

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

See Also

Concepts

Custom Attributes for Mobile Controls

Device Filtering Recommendations

Device Evaluation Methods

Extended Browser Capabilities

Reference

HasCapability

MobileControl