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

第4回 モバイルWebサイトにおけるセッションとビューステート

シグマコンサルティング 菅原 英治
2007/06/25
Page1 Page2

 前回、モバイル・コントロールの利用について、特に一覧の表示に関するものについて取り上げ解説した。今回も引き続きモバイル・コントロールの利用について、特にラジオボタン、チェックボックスに関して取り上げる。また、ASP.NETによるWebサイトを構築するうえで欠かせない、モバイル・サイト開発時におけるセッションとビューステート(ViewState)について、注意点を含め解説する。

 なお、本稿の説明では前回までに作成したサンプル・プログラムを拡張していく。今回分のサンプル・プログラムは、前回ダウンロード可能にしたものに含まれている。

●4.2. RadioButtonコントロール、CheckBoxコントロールは存在しない

○4.2.1. SelectionListコントロールについて

 モバイル・コントロールには、Webサーバ・コントロール(以下、Webコントロール)に存在するRadioButtonコントロールやCheckBoxコントロールそのものに該当するコントロールが存在しない。その代替として、SelectionListコントロールが存在する。

 MSDNの「Web コントロールとモバイル コントロールの比較」を見ると、SelectionListコントロールに相当するWebコントロールが分かる。以下に示した。

【SelectionListコントロールに相当するWebコントロール】
  • CheckBoxコントロール
  • CheckBoxListコントロール
  • DropDownListコントロール
  • ListBoxコントロール
  • RadioButtonコントロール
  • RadioButtonListコントロール

 このように、CheckBoxコントロール、RadioButtonコントロールなどのWebコントロールの代替として、SelectionListコントロールが用意されている。

○4.2.2. SelectionListコントロールの利用

 それでは、SelectionListコントロールを利用したサンプル・プログラムを作成してみよう。その仕様を以下に示す。

【SelectionListコントロール用サンプルの仕様】

  • 2つのSelectionListコントロールを表示する
  • 1つ目のSelectionListコントロールはチェックボックスとして利用する
  • 2つ目のSelectionListコントロールはラジオボタンとして利用する
  • Commandコントロール(ボタン)・クリック時に、それぞれSelectionListコントロールで選択していた結果を取得し、Labelコントロールにその結果を表示する

 まずモバイルWebフォーム(m006.aspx)を、Webサイト・プロジェクト「D:\mobile\」内に追加作成する。続いて、ツールボックスから、SelectionListコントロールをフォームにドラッグ&ドロップして2つ追加する。さらにCommandコントロールとLabelコントロールを追加する。

新規モバイルWebフォーム(m006.aspx)の作成とSelectionListコントロールの追加
モバイルWebフォームを新規に追加し、それにSelectionListコントロールを3つ、Commandコントロール、Labelコントロールを1つずつ追加したところ。
  モバイルWebフォームを追加し、名前を「m006.aspx」とした。
  1つ目のSelectionListコントロール(名前は「SelectionList1」)が追加されている。
  2つ目のSelectionListコントロール(名前は「SelectionList2」)が追加されている。
  Commandコントロール(名前は「Command1」)が追加されている。
  Labelコントロール(名前は「Label1」)が追加されている。

 続いて、モバイルWebフォーム(m006.aspx)内の各コントロールのタグを下記の太字のコードに修正する。

……省略……
<body>
  <mobile:Form id="Form1" runat="server">
    <mobile:SelectionList ID="SelectionList1" Runat="server" SelectType="CheckBox">
      <Item Text="1" Value="1" />
      <Item Text="2" Value="2" />
      <Item Text="3" Value="3" />
    </mobile:SelectionList>
    <mobile:SelectionList ID="SelectionList2" Runat="server" SelectType="Radio">
      <Item Text="A" Value="A" Selected="True" />
      <Item Text="B" Value="B" />
      <Item Text="C" Value="C" />
    </mobile:SelectionList>
    <mobile:Command ID="Command1" Runat="server" OnClick="Command1_Click">Command</mobile:Command>
    <mobile:Label ID="Label1" Runat="server"></mobile:Label>
  </mobile:Form>
</body>
……省略……
モバイルWebフォーム(m006.aspx)を修正するコード
1つ目のSelectionListコントロール(SelectionList1)は、SelectTypeプロパティに「CheckBox」を設定している。
2つ目のSelectionListコントロール(SelectionList2)は、SelectTypeプロパティに「Radio」を設定している。
クリックイベントを発生させるためのCommandコントロール(Command1)と結果を表示するためのLabelコントロール(Label1)を追加している。

 モバイルWebフォームの編集が終わったら、続いてモバイルWebフォームのコードビハインド・ファイル(m006.aspx.cs)に下記の太字のコードを追加する。

……省略……
public partial class m006 : System.Web.UI.MobileControls.MobilePage

  ……省略……

  protected void Command1_Click(object sender, EventArgs e)
  {
    // チェックボックスの選択判定
    string checkBoxSelectedValues = "";
    foreach (MobileListItem item in SelectionList1.Items)
    {
      if (item.Selected)
        checkBoxSelectedValues +=
          (checkBoxSelectedValues == "" ? "" : ",") + item.Text;
    }

    // ラベルに結果を設定
    this.Label1.Text = string.Format(
      "チェックボックスは、{0}を選択しました。",
      checkBoxSelectedValues);
    this.Label1.Text += string.Format(
      "ラジオボタンは、{0}を選択しました。",
      SelectionList2.Selection.Text);
  }
}
モバイルWebフォームのコードビハインド・ファイル(m006.aspx.cs)のコード

 このコードでは、Commandコントロールのクリック時(=Command1_Clickイベント・ハンドラ)において、2つのSelectionListコントロールの選択値を取得し、結果をラベルに設定している。

 1つ目のSelectionListコントロール(SelectionList1)はチェックボックスとして利用している。そのため、複数の値が選択される可能性がある。ここでは複数の選択値を取得するためにItemsプロパティを1ずつ取り出し、選択しているかどうかを判定している。これらの値は「,」で連結して表示する。

 2つ目のSelectionListコントロール(SelectionList2)はラジオボタンとして利用している。ラジオボタンは1つの選択値しか持たない。このような場合は、Selectionプロパティから選択値を取得すればよい。

 それでは、作成したこのページを実行し、動作を確認してみよう。

モバイルWebフォーム(m006.aspx)の実行画面
SelectionListコントロールを利用したサンプル・プログラムを実行して、動作を確認しているところ。
  1つ目のListコントロール(SelectionList1)はチェックボックスとして表示されている。
  2つ目のListコントロール(SelectionList2)はラジオボタンとして表示されている。
  Commandコントロール(Command1)クリック時の選択値が、Labelコントロール(Label)に表示されている。

 このように、SelectionListコントロールは、チェックボックスとしてもラジオボタンとしても利用でき、実際にどのように振る舞うかはSelectTypeプロパティによって選択可能だ。このプロパティに設定できる値を以下にまとめておこう。

【SelectTypeプロパティに設定できる値】

  • CheckBox
  • DropDown
  • ListBox
  • MultiSelectListBox
  • Radio

 DropDown、ListBox、MultiSelectListBoxの解説は本稿では割愛するが、RadioとCheckBoxの利用方法が理解できれば問題なく利用できるだろう。

 続いては、ASP.NETを活用したWebサイトを構築するうえで欠かせない、モバイル・サイト開発時におけるセッションとビューステートについて解説する。


 INDEX
  [連載].NETでモバイル・サイト開発を始めよう
  第4回 モバイルWebサイトにおけるセッションとビューステート
  1.SelectionListコントロールの利用
    2.セッションとビューステートについて
 
インデックス・ページヘ  「.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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH