PRB: Header and Footer Templates Are Rendered Differently in Web User Controls (310301)


The information in this article applies to:

  • Microsoft Mobile Internet Toolkit (MMIT)
This article was previously published under Q310301

SYMPTOMS

When you are using a Web user control that contains a DeviceSpecific control with a header and a footer template, the header and footer template is not rendered in the correct place when you browse the page. Instead, the templates are rendered in the location where you place the user control in a mobile Web Forms page instead of in the header and footer locations of the Web Form.

RESOLUTION

To resolve this behavior, instead of a DeviceSpecific control, use an external style sheet that contains a header and a footer template.

The following code sample is an example of a Web user control that contains a mobile style sheet: 
   <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
   <mobile:StyleSheet id="StyleSheet1" runat="server">
      <Style Name="myHeaderStyle">
         <DeviceSpecific> 
            <Choice Filter="isWML11"> 
               <HeaderTemplate> 
                  <mobile:Label id=Label1 runat="server">WML Header Template</mobile:Label> 
               </HeaderTemplate> 
               <FooterTemplate> 
                  <mobile:Label id="Label2" runat="server">WML Footer Template</mobile:Label> 
               </FooterTemplate>
	    </Choice> 
            <Choice Filter="isHTML32"> 
               <HeaderTemplate> 
                  <mobile:Label id=Label1 runat="server">HTML Header Template</mobile:Label> 
               </HeaderTemplate> 
               <FooterTemplate> 
                  <mobile:Label id="Label2" runat="server">HTML Footer Template</mobile:Label> 
               </FooterTemplate>
            </Choice> 
	</DeviceSpecific>
      </Style>
   </mobile:StyleSheet>
The following code sample is an example of a mobile Web Form that uses an external style sheet: 
   <%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage" %>
   <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
   <mobile:Form id="Form1" runat="server" StyleReference="myHeaderStyle">
      <mobile:Label id="Label3" runat="server">Some Content</mobile:Label>
   </mobile:Form>
   <mobile:StyleSheet id="StyleSheet1" runat="server" ReferencePath="myStyles.ascx">
   </mobile:StyleSheet>

STATUS

This behavior is by design.

MORE INFORMATION

Steps to Reproduce the Behavior

  1. Add the following code to a Web User control (which is named ucTemplates.ascx) on your Web server: 
       <%@ Control Inherits="System.Web.UI.UserControl" Language="C#" %>
   <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
   <mobile:DeviceSpecific id="DeviceSpecific1">
      <Choice Filter="isWML11">
	 <HeaderTemplate>
	    <mobile:Label id="Label1" runat="server">WML Header Template</mobile:Label>
	 </HeaderTemplate>
	 <FooterTemplate>
	    <mobile:Label id="Label2" runat="server">WML Footer Template</mobile:Label>
	 </FooterTemplate>
      </Choice>
      <Choice Filter="isHTML32">
         <HeaderTemplate runat="server">
	    <mobile:Label id="Label3" runat="server">HTML Header Template</mobile:Label>
         </HeaderTemplate>
	 <FooterTemplate>
	    <mobile:Label id="Label4" runat="server">HTML Footer Template</mobile:Label>
         </FooterTemplate>
      </Choice>
   </mobile:DeviceSpecific>
  2. Add the following code to a mobile Web Form (an .ascx file) on your Web server: 
       <%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage" %>
   <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
   <%@ Register TagPrefix="myControl" TagName="Templates" SRC="ucTemplates.ascx" %>
   <mobile:Form id="Form1" runat="server" >
      <mobile:Label id="Label3" runat="server">Some Content</mobile:Label>
      <myControl:Templates runat="server"></myControl:Templates>
   </mobile:Form>
  3. Use the following code to create a Web.config file at the root of your Web application: 
       <?xml version="1.0" encoding="utf-8" ?>
      <configuration>
         <system.web>
            <deviceFilters>
	       <!-- Markup Languages -->
	       <filter name="isHTML32" compare="preferredRenderingType" argument="html32" />
	       <filter name="isWML11" compare="preferredRenderingType" argument="wml11" />
            </deviceFilters>
         </system.web>
      </configuration>
    When you browse the .aspx page, you see that both the WML and HTML headers and footers are generated and placed incorrectly in the .aspx page.
Modification Type:MajorLast Reviewed:6/14/2002
Keywords:kbDeviceSpecific kbDSupport kbprb kbServerControls kbtemplate KB310301
©2002 Microsoft Corporation. All rights reserved.