携帯サイトをASP.NETを作る為のリンク

携帯サイトをASP.NETを作る（特に、動的にリスト形式で項目を増やしていく方法

消えないように転載させていただきました。後日、自己ソース、




書式：
AutoGenerateFields=”{False|True}”
CommandStyle=”String”
DataMember=”String”
DataSource=”Object”
DefaultCommand=”Eventhandler”
ItemCount=”Int32”
LabelField=”String”
LabelStyle=”String”
OnItemDataBind=”Eventhandler”
OnItemCommand=”Eventhandler”
OnLoadItems=”Eventhandler”
OnShowItemCommands=”Eventhandler”
TableFields=”String”>
Titile=”String”
DataField=”String”
FormatString=”String”
Visible=”{False|True}” />




● ObjectListにDataSetの複数のフィールドを表示するサンプル


図 ObjectListにDataSetの複数のフィールドを表示するサンプル

このサンプルは、ObjectListに商品テーブルをバインドして、アイテム別の明細を表示します。図4-2-3-1の左画面には、商品テーブルの商品名が表示されます。画面最下位の「戻る」「次へ」のボタンでページを移動することができます。商品テーブルの一覧からアイテムを選択すると、右画面のように商品ID、商品名、単位、単価、在庫が明細行に表示されます。商品名は、ヘッダに表示されます。

サンプルの行33-42では、ObjectListを定義しています。行35では、AutoGenerateFieldsプロパティにFalseを設定してフィールドが自動生成されないようにしています。行36では、LabelFieldに商品テーブルの商品名を設定しています。LabelFieldに設定したフィールドが、アイテムの一覧画面にハイパーリンクとして表示されます。

行37-41では、タグで商品テーブルの商品ID、商品名、単位、単価、在庫のフィールドを選択しています。タグで選択したフィールドが明細画面の明細行に表示されます。明細画面のヘッダには、LabelFieldに設定したフィールドが表示されます。だたし、商品名のタグではVisibleプロパティにFalseを設定していますので明細行に表示されません。（商品名は、明細画面のヘッダに表示されますので明細行に表示する必要ありません。）

32:
33: 34: StyleReference="List"
35: AutoGenerateFields="False"
36: LabelField="ProductName">
37:
38:
39:
40:
41:
42:
43:

Page_Loadイベントの行11-13では、ページが最初にロードされたときSub BindObjectList()を呼び出して、ObjectListに商品テーブルをバインドします。

10: Sub Page_Load()
11: If Not IsPostBack Then
12: BindObjectList()
13: End If
14: End Sub

Sub BindObejctList()の行17では、商品テーブルからレコードを抽出するSQLを生成しています。行18-19では、Web.configからデータベースに接続するConnectionStringを取得しています。行24では、OleDbDataAdapterのFill()メソッドでDataSetに商品テーブルを取り込んでいます。行25-28のWith…End Withでは、ObjectListのDataSourceプロパティにDataSetを設定してDataBind()メソッドでバインドしています。

16: Sub BindObjectList()
17: Dim strSQL As String = "Select * From Products"
18: Dim strCon As String = _
19: ConfigurationSettings.AppSettings("conStringNw")
20: Dim con As New OleDbConnection(strCon)
21: Dim da As New OleDbDataAdapter(strSQL, con)
22: Dim ds As New DataSet()
23:
24: da.Fill(ds, "Products")
25: With olstProducts
26: .DataSource = ds
27: .DataBind()
28: End With
29: End Sub



● ObjectListのTableFieldsプロパティに複数のフィールドを設定して表示するサンプル


図 ObjectListのTableFieldsプロパティに複数のフィールドを設定して表示するサンプル

このサンプルは、ObjectListのアイテムリストに複数のフィールドを表示しています。アイテムリストに複数のフィールドを表示するには、ObjectListのTableFieldsプロパティにデータベースのフィールドをセミコロン(;)区切りで指定します。

サンプルの行33-46では、ObjectListを定義しています。行36では、LabelFieldプロパティに商品名のフィールドを設定しています。行37では、TableFieldプロパティに商品名と単価のフィールドを設定しています。TableFieldで指定したフィールドは、図4-2-3-2の左画面のアイテムリストに表示されます。LabelFieldに指定したフィールドがハイパーリンクとして表示されます。

行38-45では、タグで商品テーブルの商品ID、商品名、単位、単価、在庫のフィールドを選択しています。タグで選択したフィールドは、右画面の明細行に表示されます。ただし、商品名のようにVisibleプロパティにFalseを設定すると明細行に表示されません。

32:
33: 34: StyleReference="List"
35: AutoGenerateFields="False"
36: LabelField="ProductName"
37: TableFields="ProductName;UnitPrice">
38:
39: 40: Visible="False" />
41:
42: 43: DataFormatString="{0:N0}" />
44: 45: DataFormatString="{0:N0}" />
46:
47:

Page_Loadイベントの行11-13では、ページが最初にロードされたときSub BindObjectList()を呼び出して、ObjectListに商品テーブルをバインドします。

10: Sub Page_Load()
11: If Not IsPostBack Then
12: BindObjectList()
13: End If
14: End Sub


● ObjectListのアイテムに複数のコマンドを表示するサンプル


図 ObjectListのアイテムに複数のコマンドを表示するサンプル

このサンプルは、アイテムの明細画面に「注文」「取消」「戻る」のコマンドボタンを表示します。明細画面にコマンドボタンを表示するには、タグを追加します。

サンプルの行44-57では、ObjectListを定義しています。行47では、OnItemCommandイベントを登録しています。このイベントは、コマンドボタンを選択したときに発生します。行55-56では、タグで「注文」と「取消」のコマンドボタンを定義しています。ここで定義したコマンドボタンは、明細画面に表示されます。

43:
44: 45: StyleReference="List"
46: AutoGenerateFields="False"
47: OnItemCommand="olstProducts_ItemCommand"
48: LabelField="ProductName"
49: TableFields="ProductName;UnitPrice">
50:
51:
52:
53:
54:
55:
56:
57:
58:

Page_Loadイベントでは、ページが最初にロードされたときにSub BindObjectList()を呼び出して、ObjectListに商品テーブルをバインドしています。

10: Sub Page_Load()
11: If Not IsPostBack Then
12: BindObjectList()
13: End If
14: End Sub

商品テーブルのアイテム一覧画面からアイテムを選択すると、明細画面にアイテムの明細行とコマンドボタンが表示されます。「注文」「取消」のボタンを選択すると、フォームがポストバックされてOnItemCommandイベントに制御が渡ります。このイベントでは、CommandNameプロパティを参照してどのコマンドボタンが選択されたか調べています。

「注文」のボタンが選択されたときは、「XXXの注文受け付けました」のメッセージを表示します。「取消」のボタンが選択されたときは、「XXXの注文取り消しました」のメッセージを表示します。

30: Sub olstProducts_ItemCommand(s As Object, e As ObjectListCommandEventArgs)
31: If e.CommandName = "Order" Then
32: ActiveForm = frmOrder
33: txtvOrder.Text = String.Format("{0}
の注文受け付けました.", _
34: e.ListItem("ProductName") )
35: ElseIf e.CommandName = "Cancel" Then
36: ActiveForm = frmCancel
37: txtvCancel.Text = String.Format("{0}
の注文取り消しました.", _
38: e.ListItem("ProductName") )
39: End If
40: End Sub


● ObjectListのアイテム別に異なるコマンドを表示するサンプル


図 ObjectListのアイテム別に異なるコマンドを表示するサンプル

このサンプルは、アイテム別に異なるコマンドボタンを表示します。アイテム別に異なるコマンドを表示するには、ObjectListにOnShowItemCommandsイベントを登録します。このサンプルでは、商品名を選択するとき商品区分テーブルから商品名を絞り込んで検索できるように改善しています。

サンプルの行78-81では、Listコントロールを定義しています。Listには、商品区分テーブルをバインドして表示します。行81では、OnItemCommandイベントを登録しています。このイベントには、アイテムを選択したときに制御が渡ります。

77:
78: 79: StyleReference="List"
80: Decoration="None"
81: OnItemCommand="lstCategories_ItemCommand" />
82:

行85-99では、ObjectListコントロールを定義しています。行89では、OnShowItemCommandsイベントを登録しています。このイベントは、ObjectListのアイテム明細画面にコマンドボタンを表示するときに制御が渡ります。

84:
85: 86: StyleReference="List"
87: AutoGenerateFields="False"
88: OnItemCommand="olstProducts_ItemCommand"
89: OnShowItemCommands="olstProducts_ShowItemCommands"
90: LabelField="ProductName"
91: TableFields="ProductName;UnitPrice">
92:
93:
94:
95:
96:
97:
98:
99:
104:

Page_Loadイベントでは、ページが最初にロードされたときにSub BindList()を呼び出しています。

10: Sub Page_Load()
11: If Not IsPostBack Then
12: BindList()
13: End If
14: End Sub

Sub BindList()では、商品区分テーブルをListコントロールにバインドしています。行24では、ListのDataSourceプロパティに商品区分テーブルのOleDbDataReaderを設定しています。行25-26では、DataTextField、DataValueFieldプロパティに商品区分テーブルの商品区分名、商品区分IDのフィールドを設定しています。行27では、DataBind()メソッドで商品区分テーブルをバインドしています。

16: Sub BindList()
17: Dim strSQL As String = "Select * From Categories"
18: Dim strCon As String = ConfigurationSettings.AppSettings("conStringNw")
19: Dim con As New OleDbConnection(strCon)
20: Dim cmd As New OleDbCommand(strSQL, con)
21:
22: con.Open()
23: With lstCategories
24: .DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
25: .DataTextField="CategoryName"
26: .DataValueField="CategoryID"
27: .DataBind()
28: End With
30: End Sub

Listコントロールから商品区分名を選択すると、フォームがポストバックされてListのOnItemCommandイベントに制御が渡ります。このイベントの行33では、ListItem.Valueプロパティから、選択したアイテムの商品区分IDを取得しています。行35では、Sub BindObjectList()を呼び出してObjectListに商品テーブルをバインドします。

32: Sub lstCategories_ItemCommand(s As Object, e As ListCommandEventArgs)
33: Dim intCategoryID As Integer = Int32.Parse(e.ListItem.Value)
34: ActiveForm = frmObjectList
35: BindObjectList(intCategoryID)
36: End Sub

Sub BindObjectList()では、商品テーブルから引数で指定された商品区分に属する商品のみ抽出して、ObjectListにバインドします。

38: Sub BindObjectList(intCategoryID As Integer)
39: Dim strSQL As String = "Select * From Products " & _
40: "Where CategoryID = ? " & _
41: "Order by ProductKana"
42: Dim strCon As String = ConfigurationSettings.AppSettings("conStringNw")
43: Dim con As New OleDbConnection(strCon)
44: Dim cmd As New OleDbCommand(strSQL, con)
45:
46: cmd.Parameters.Add("@CategoryID", OleDbType.Integer)
47: cmd.Parameters("@CategoryID").Value = intCategoryID
48:
49: con.Open()
50: With olstProducts
51: .DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
52: .DataBind()
53: End With
55: End Sub

ObjectListのアイテム一覧画面からアイテムを選択すると、フォームがポストバックされて明細画面にコマンドボタンが表示される直前にOnShowItemCommandsイベントに制御が渡ります。このイベントの行58-61では、選択したアイテムの在庫数を調べています。在庫数が0なら、「注文」と「取消」のコマンドボタンを除去して表示しないようにしています。在庫数が0以外のときは、「注文」と「取消」のコマンドボタンが表示されます。

57: Sub olstProducts_ShowItemCommands(s As Object, e As ObjectListShowCommandsEventArgs)
58: If e.ListItem("UnitsInStock") = 0 Then
59: e.Commands.Remove("Order")
60: e.Commands.Remove("Cancel")
61: End If
62: End Sub
ASP.NET Mobileでモバイルサイトを構築するための技術情報を公開中

との事。。。
ありがたやーーー。