SelectionList コントロールとポストバック

更新 : 2007 年 11 月

SelectionList ASP.NET モバイル コントロールにある項目を選択しても、サーバーで応答は生成されません。SelectionList コントロールがレンダリングされるフォームを、サーバーにポストバックする必要があります。これを実現するには、通常 Command コントロールを使用します。Command コントロールがフォームをサーバーにポストバックすると、SelectionList コントロールが SelectedIndexChanged イベントを発生させます。アプリケーションは、このイベントを処理するメソッドを提供できます。

選択に応答するもう 1 つの方法は、クライアントの JavaScript (たとえば HTML ブラウザ) を処理できるデバイスのサポートを追加することです。これらのデバイスには、以下の手順を使用します。

1. Form コントロールに Panel コントロールを追加します。

2. "supportsJavaScript" に設定された <Choice> フィルタを持つ <DeviceSpecific> 要素を追加します。

3. ASP.NET DropDownList コントロールを含む選択項目の内部に、コンテンツ テンプレートを作成します。これは非モバイル ASP.NET サーバー コントロールになります。

4. DropDownList コントロールの AutoPostBack プロパティを true に設定します。

JavaScript をサポートしないで SelectionList コントロールを使用するその他のすべてのデバイス用のコンテンツ テンプレートを持つ、<DeviceSpecific> フィルタを作成する必要があります。

この手法のコード例を次に示します。

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

この例では、Web.config ファイルを次のように設定する必要があります。

<configuration>
  <system.web>
    <deviceFilters>
      <filter name="supportsJavaScript"
              compare="javascript"
              argument="true"/>
    </deviceFilters>
  </system.web>
</configuration>

ページ間にまたがってポストする際の、さまざまな要求の処理方法

SelectionList コントロールは、ページ間にまたがるポストという特別な場合に、追加処理を要求できます。たとえば、Source.aspx と Destination.aspx という 2 つのページがあり、Source.aspx が SelectionList コントロールを含み、Destination.aspx にポストする場合を考えます。

Source.aspx ページのマークアップの例を次に示します。

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

Destination.aspx ページのマークアップおよびコードの例を次に示します。

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

ユーザーが Source.aspx を参照し、リスト ボックスの最初と 3 番目の項目を選択して、ページを Destination.aspx にポストするコマンド ボタンをクリックするとします。Destination.aspx の Label1 に表示されるテキストは、マークアップ言語とデバイスに応じて異なります。これらの違いは、HTML と WML の仕様、およびブラウザ実装の違いが原因です。次のような結果が表示される可能性があります。

ポスト先のページで Request["MultiSelectList1"] 変数の値を簡単に使用できるようにするには、次の例に示すように、選択一覧からポストされたデータを前処理します。この方法を使用すると、ざまざまなケースにおいて、HTML ブラウザで使用される形式に合致するよう標準化できます。

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(";", ", ");
} 

メモ :
この特別な処理は、SelectionList コントロールが含まれている同一のページへポストバックする通常の場合は必要ありません。

cHTML デバイスによっては、各チェック ボックスに一意の名前を必要とする場合があります。この場合、チェック ボックスに対して生成された名前は、各チェック ボックスのフォーム identifier*item number の名前になります。ページ間にまたがってコーディングするときは、以下の例のようなコードを使用できます。この例では、MyPage1.aspx に次のモバイル Web フォームと SelectionList コントロールが含まれています。

<mobile:form runat=server action=MyPage2.aspx>
  <mobile:selectionList runat="server" id="mySList ...>
    ...
</mobile:form>

MyPage2.aspx には次のコードが含まれています。

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

参照

概念

リスト コントロールによるデータへのアクセス