PRB: SelectionList Control Does Not Post Back to Server (308975)

MORE INFORMATION

How to Create a Device Filter

Device filters are created when you add a deviceFilters element to the System.web section of the Web.config file. The following sample code creates a filter that can be used to identify devices that support JavaScript. This type of filter is helpful because the ASP.NET DropDownList control sends client-side JavaScript to a browser.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>
    <deviceFilters>
      <filter name="supportsJavaScript" compare="Javascript" argument="true"/>
    </deviceFilters>
  </system.web>
</configuration>
				

How to Use the DeviceSpecific Class

By using the DeviceSpecific class, you can use templates to send a customized rendering to devices that support JavaScript. This is done by using a mobile Panel control. Within the mobile Panel control, a DeviceSpecific tag can be defined that contains a choice tag. The choice tag uses the device filter created in the preceding section of this article by setting the Filter attribute to the name of the device filter. Within the choice tag, a ContentTemplate tag is defined that contains the control (or controls) that you want to render. In the case of a device that supports JavaScript, you will use an ASP.NET DropDownList control with the AutoPostBack property set to True. For other devices, you can define a default choice tag by not setting the filter attribute. The default choice contains a ContentTemplate tag, which, in turn, contains the SelectionList and Command mobile controls.

<mobile:Panel id="Panel1" runat="server">
  <mobile:DeviceSpecific id="DeviceSpecific1" runat="server">
    <Choice Filter="supportsJavaScript">
      <ContentTemplate>
        <asp:DropDownList id="SelectionList1" runat="server" OnSelectedIndexChanged="SelectionList1_SelectedIndexChanged" AutoPostBack="True">
          <asp:ListItem Value="a">1</asp:ListItem>
          <asp:ListItem Value="b">2</asp:ListItem>
          <asp:ListItem Value="c">3</asp:ListItem>
        </asp:DropDownList>
      </ContentTemplate>
    </Choice>
    <Choice>
      <ContentTemplate>
        <mobile:SelectionList id="SelectionList1" runat="server" OnSelectedIndexChanged="SelectionList1_SelectedIndexChanged">
          <Item Value="a" Text="1"/>
          <Item Value="a" Text="2"/>
          <Item Value="a" Text="3"/>
        </mobile:SelectionList>
        <mobile:Command runat="server" text="Submit"/>
      </ContentTemplate>
    </Choice>
  </mobile:DeviceSpecific>
</mobile:Panel>
				

NOTE: In the preceding sample code, both the mobile SelectionList and ASP.NET DropDownList server controls have a OnSelectedIndexChanged event defined to the same function. Both of the controls also use the same ID, which is possible because templates are being used. This allows the developer to process information on postback to the server with one function instead of two, and also eliminates the need to write code for both of the controls.