SelectionList Controls and Postbacks
Selecting items in a SelectionList ASP.NET mobile control does not generate a response from the server. The form on which the SelectionList control appears must be posted back to the server. This is usually accomplished with a Command control. When the Command control posts the form back to the server, the SelectionList control raises a SelectedIndexChanged event. Your application can provide a method to handle this event.
Another way to respond to a selection is to add support for devices that can handle client JavaScript (for example, HTML browsers). For these devices, use the following procedure:
Add a <DeviceSpecific> element with a <Choice> filter set to "supportsJavaScript".
Create a content template inside the choice that contains the ASP.NET DropDownList control. This is the non–mobile ASP.NET server control.
Set the DropDownList control's AutoPostBackproperty to true.
You must create a <DeviceSpecific> filter with a content template for all other devices that do not support JavaScript and that use the SelectionList control.
The following code example demonstrates this technique:
<mobile:Panel id="Panel1" runat="server">
<mobile:DeviceSpecific id="DeviceSpecific1" runat="server">
<Choice Filter="supportsJavaScript">
<ContentTemplate>
<asp:DropDownList id="DropDownList1" runat="server"
OnSelectedIndexChanged="DropDownList1_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="DropDownList1_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>
This example requires the following settings in the Web.config file:
<configuration>
<system.web>
<deviceFilters>
<filter name="supportsJavaScript"
compare="javascript"
argument="true"/>
</deviceFilters>
</system.web>
</configuration>
Handling Request Variations When Posting Across Pages
SelectionList controls can require additional handling in the special case of a cross-page post. For example, consider two pages, Source.aspx and Destination.aspx, where Source.aspx contains a SelectionList control and posts to Destination.aspx.
The following example shows the markup for the Source.aspx page:
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="C#" %>
<mobile:Form runat="server" method="post" action="destination.aspx">
<mobile:SelectionList runat="server"
selectType="MultiSelectListBox" id="MultiSelectList1">
<item text="I" value="1" />
<item text="ii" value="2" />
<item text="iii" value="3" />
</mobile:SelectionList>
<mobile:command runat=server text="Post" />
</mobile:Form>
The following example shows the markup and code for the Destination.aspx page:
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="C#" %>
<%@ Register TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat=server language=cs>
public void Page_Load()
{
Label1.Text = Request["MultiSelectList1"];
}
</script>
<mobile:form runat=server>
<mobile:label id="Label1" runat="server" />
</mobile:form>
Suppose that the user browses to Source.aspx, selects the first and third items in the list box, and clicks the command button, which causes the page to be posted to Destination.aspx. The text displayed for Label1 in Destination.aspx varies by markup language and device. These differences are due to the HTML and WML specifications and differences in browser implementations. You might see the following results:
Target |
Result |
Description |
|---|---|---|
HTML browser |
"1, 3" |
Delimited by commas and spaces with no trailing delimiter. |
WML device 1 |
"1;3" |
Delimited by semicolons with no trailing delimiter. |
WML device 2 |
"1;3;" |
Delimited by semicolons with a trailing delimiter. |
To more easily use the value of the Request["MultiSelectList1"] variable in the destination page, you can preprocess the data posted from the selection list as shown in the following example. This standardizes the various possibilities to agree with the format used by the HTML browser.
public void Page_Load()
{
String selections = Request["MultiSelectList1"];
if (selections.Length > 0 &&
selections [selections.Length - 1] == ';')
{
selections = selections.Substring(0, selections.Length - 1);
}
Label1.Text = selections.Replace(";", ", ");
}
Note
This special handling is unnecessary in the common case of posting back to the same page that contains the SelectionList control.
Some cHTML devices require unique names for every check box. In this case, the name generated for the check box is of the form identifier*item number for each check box. You can use code similar to the following example when coding cross-page scenarios. In the example, MyPage1.aspx contains the following mobile Web Form and a SelectionList control.
<mobile:form runat=server action=MyPage2.aspx>
<mobile:selectionList runat="server" id="mySList ...>
...
</mobile:form>
MyPage2.aspx has the following code:
<script runat="server">
// Create a Form just for the list selections
System.Collections.Specialized.NameValueCollection _myForm =
new NameValueCollection();
public void Page_Init()
{
// Process the Form
foreach(String key in Request.Form.Keys)
{
// Look for an asterisk in the key
int pos = key.LastIndexOf('*');
if (pos > -1)
{
// Add the modified key to the Form
_myForm.Add(key.Substring(0, pos), Request.Form[key])
}
Else
{
// Or add the unmodified key to the Form
_myForm.Add(key, Request.Form[key]);
}
}
}
// Use _myForm in place of Request.Form
public void Page_Load()
{
// Get the processed list of selected items
String selectedValues = _myForm["mySList"];
// etc.
}
</script>