장치별 템플릿 사용

아티클
08/20/2008

업데이트: 2007년 11월

장치별 태그와 ASP.NET 모바일 컨트롤을 혼합하는 경우에는 모바일 컨트롤에서 렌더링하는 대상에 따라 일관성을 유지해야 합니다. 장치별 태그와 장치 독립적 태그가 혼합된 경우에는 자동 검색 및 적용 기능이 지원되지 않습니다.

잘못된 혼합 예제

다음과 같이 잘못된 예제에서는 필터가 장치 기능과 일치할 경우 <ContentTemplate> 요소의 내용이 장치에 전달됩니다. 첫 번째 Panel 컨트롤과 Label 컨트롤의 alignment 속성을 살펴보면, Label 컨트롤이 WML <td> 요소 안에 있기 때문에 Label 컨트롤에 대해 생성된 <p> 요소는 브라우저에서 제대로 렌더링되지 않습니다. 이는 해당 요소가 <td> 태그 안에 있기 때문입니다.

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

alignment에 기본값이 아닌 값을 설정한 후에는 생성된 각 컨트롤에 대해 <p> 요소가 렌더링되고 다음 오류가 생성됩니다.

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'

이 경우 Label 컨트롤은 첫 번째 Panel 컨트롤에서 맞춤이 상속되지 않으므로 맞춤에 대해 <p> 요소를 생성합니다. 그러나 이런 경우에는 <p> 요소를 추가할 수 없습니다. 일반적인 상황은 아니지만 WML 기반 장치를 대상으로 렌더링하는 경우가 아니면 Label 컨트롤을 볼 수 있도록 표시하고 Label 컨트롤의 텍스트를 템플릿 안에 지정하면 문제를 해결할 수 있습니다. WML 렌더링을 수행하려면 Panel 컨트롤에 <table align="left"> 태그를 사용합니다.

참고:
테이블의 전체 맞춤은 제어할 수 있지만 개별 셀의 맞춤은 제어할 수 없습니다.

오류가 수정된 예제

다음 예제에서는 이전의 오류를 수정하고 페이지 지시문과 폼 컨트롤 같은 추가 내용이 포함되어 있습니다.

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