連載
.NETでモバイル・サイト開発を始めよう

第3回 モバイル・コントロール利用時の心得

シグマコンサルティング　菅原 英治
2007/05/29
Page1 Page2 Page3 Page4

○4.1.4. ListコントロールのItemCommandイベントの制御

　Listコントロールに対し、ItemCommandイベントを発生させる方法には、次の2つの方法がある。

【ItemCommandイベントを発生させる方法】

（1）Listコントロールの標準の方法（DataTextFieldプロパティとDataValueFieldプロパティを設定する）
（2）テンプレートにCommandコントロールを配置する方法

　下の表は、この2つの方法についてまとめたものである。

方法 外観 テンプレートの利用 複数コマンドの利用
標準の方法 リンク 不可能 不可能
Commandコントロールを配置する方法 ボタン *1 可能 可能
Listコントロールに対しItemCommandイベントを発生させる方法
*1 CommandコントロールのFormatプロパティによって、コントロールの外観をリンクにすることが可能である。しかし、Formatプロパティは、JavaScriptをサポートするデバイスのみ利用できる。現状、携帯端末のほとんどが、JavaScriptをサポートしていない。そのため、Commandコントロールの外観をFormatプロパティでリンクにすることは実質的に難しい。詳細は、以下のMSDNを参考にしてほしい。
　・Command.Format プロパティ

　それではここで、この2つの方法を利用するサンプルを作成したい。サンプルの作成は、4.1.3を拡張して行う。その仕様は以下のとおりだ。

【ItemCommandイベントのサンプルの仕様】

  • 3つ目のListコントロールに対し、（2）の方法を利用するために［予約］ボタンと［購入］ボタンを追加する
  • 4つ目のListコントロールを追加し、（1）の標準の方法を利用する
  • Labelコントロールを追加し、コマンドのクリック結果を表示させる

　まずモバイルWebフォーム（m005.aspx）に対し、4つ目のListコントロールを追加する。続いて、Labelコントロールを最下部に追加する。

モバイルWebフォーム（m005.aspx）にListコントロールとLabelコントロールを追加
モバイルWebフォームに対し、4つ目のListコントロールとLabelコントロールを追加したところ。
　 4つ目のListコントロール（名前は「List4」）を追加する。
　 Labelコントロール（名前は「Label1」）を追加する。

　続いて、モバイルWebフォーム（m005.aspx）に下記の（太字）のコードを追加する。

……省略……
<body>
  <mobile:Form id="Form1" runat="server">
    ……省略……
    <mobile:List ID="List3" Runat="server" OnItemCommand="List3_ItemCommand">
      <DeviceSpecific>
        <Choice>
          ……省略……
          <ItemTemplate>
            <%# DataBinder.Eval(((MobileListItem)Container).DataItem, "product_id")%>:
            <%# DataBinder.Eval(((MobileListItem)Container).DataItem, "product_name")%>
            <br />
            <!- （2）の方法：Commandコントロールの配置 -->
            <mobile:Command ID="buy" CommandName="buy" Runat="server"
            CommandArgument='<%# DataBinder.Eval(((MobileListItem)Container).DataItem, "product_name")%>'>
            購入
            </mobile:Command>
            <mobile:Command ID="reserve" CommandName="reserve"  Runat="server"
            CommandArgument='<%# DataBinder.Eval(((MobileListItem)Container).DataItem, "product_name")%>'>
            予約
            </mobile:Command>
          </ItemTemplate>
          ……省略……
        </Choice>
      </DeviceSpecific>
    </mobile:List>

    <mobile:List ID="List4" Runat="server"
        OnItemCommand="List4_ItemCommand"></mobile:List>

    <mobile:Label ID="Label1" Runat="server"></mobile:Label>

  </mobile:Form>
</body>
……省略……
モバイルWebフォーム（m005.aspx）に追加するコード
3つ目のListコントロール（List3）に対し、「予約」と「購入」のコマンドを追加している。またコマンドの引数として、製品名を設定している。
4つ目のListコントロール（List4）とLabelコントロール（Label1）を追加している。
クリック時のイベント・ハンドラを、3つ目、4つ目のListコントロールに設定している。
　
……省略……
public partial class m005 : System.Web.UI.MobileControls.MobilePage

  ……省略……

  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      ……省略……

      // List4へデータバインド
      List4.DataValueField = "product_id";   // （1）の方法
      List4.DataTextField = "product_name";  // （1）の方法
      List4.DataSource = this.Product;
      List4.DataBind();
    }
  }

  // List3クリック時
  protected void List3_ItemCommand(object sender, ListCommandEventArgs e)
  {
    this.Label1.Text = string.Format("{0}を{1}しました。",
      e.CommandArgument,
      e.CommandName == "buy" ? "購入" : "予約");
  }

  // List4クリック時
  protected void List4_ItemCommand(object sender, ListCommandEventArgs e)
  {
    this.Label1.Text = string.Format("{0}を選択しました。",
      e.ListItem.Text);
  }
}
モバイルWebフォームのコードビハインド（m005.aspx.cs）のコード

　Page_Loadメソッドでは、4つ目のListコントロールに対し、DataValueFieldとDataTextFieldプロパティの設定を行っている。この設定を行うことが、Listコントロールに対してItemCommandイベントを発生させる標準の方法である。

　3つ目のListコントロール（List3）のItemCommandイベント・ハンドラ（＝List3_ItemCommandメソッド）では、イベント引数(ListCommandEventArgs型)よりコマンド引数とコマンド名を取得し、結果をラベルに設定している。

　また4つ目のListコントロール（List4）のItemCommandイベント・ハンドラ（＝List4_ItemCommandメソッド）では、イベント引数(ListCommandEventArgs型)のListItemプロパティを利用し、結果をラベルに設定している。

　それでは、作成したこのページを実行し、動作を確認する。

（2）の方法：「みかん」の［購入］ボタンをクリック
（1）の方法：「すいか」リンクをクリック
モバイルWebフォーム（m005.aspx）の実行画面
　 3つ目のListコントロール（List3）には、各行に「購入」と「予約」コマンドが表示されている。
　 4つ目のListコントロール（List4）には、製品名がリンクとして表示されている。
　 3つ目のListコントロール（List3）の「みかん」の「購入」コマンドをクリックした結果が表示される。
　 4つ目のListコントロール（List4）の「すいか」リンクをクリックした結果が表示される。

　この実行結果から、ListコントロールのItemCommandイベントの制御が理解できるだろう。ItemCommandイベントを制御する（1）標準の方法では、バインドされたデータをシンプルなリンクの一覧として表示する。そして、そのリンクがクリックされるとItemCommandイベントを発生させる。また、この方法では、1行に対し1つのコマンドしか設定できない。従ってコマンドが複数あるような多機能なリストを作成することはできない。

　テンプレートを利用しCommandコントロールを配置する（2）の方法では、複数のコマンドを実現できる。しかし、Commandコントロールを利用するため、リンクではなくボタンとなってしまう。デザインの問題などから、どうしてもリンクにしたい場合があるかもしれない。そのような場合は、Linkコントロールとクエリ文字列を利用するなどの、ItemCommandイベントを利用しない方法を実装する必要があるだろう。

■

　今回はここまでである。次回も引き続きモバイル・コントロールの利用について解説し、特にラジオボタン、チェックボックスに関して取り上げる。また、モバイル・サイト開発時におけるセッションとViewStateについて、注意点を含め解説する。セッションやViewStateに関する知識は、ASP.NETによるWebサイトを構築するうえで欠かせないものだ。End of Article


　INDEX
　 ［連載］.NETでモバイル・サイト開発を始めよう
　 第3回 モバイル・コントロール利用時の心得
　   1．一覧表示コントロールについて
　   2．ObjectListコントロールの利用
　   3．Listコントロールの利用
  4．ListコントロールのItemCommandイベントの制御
　
インデックス・ページヘ 　「.NETでモバイル・サイト開発を始めよう」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT