連動した下り枠(DropDownList)
ヒント:サービスエンドバージョンは、現在AJAXが盛んですが、ASP.NET初心者にとっては、DropDownList(以下、DRPと略称します)の理解を深めるためのプロセスが必要です。更新しないバージョンが必要であれば、貴重な時間を無駄にしたくないです。スキップしてください。
目的:4連動を実現して、DRPにデータソースを追加する方法をそれぞれ示しています。加えて、なぜあなたのDRPは選択状態を維持しないのですか?
1.ページ名声式:drpCountry
2.コードバインディング式:drpProvince、drpCity
3.コード追加式:drpDisctrict
テクニック:
1.一般ページ初期化過程のバインディングデータは、IsPostBack内に置いたほうがいいです。このようにページを返送する時は、もう一回は実行しません。
目的:4連動を実現して、DRPにデータソースを追加する方法をそれぞれ示しています。加えて、なぜあなたのDRPは選択状態を維持しないのですか?
1.ページ名声式:drpCountry
2.コードバインディング式:drpProvince、drpCity
3.コード追加式:drpDisctrict
テクニック:
1.一般ページ初期化過程のバインディングデータは、IsPostBack内に置いたほうがいいです。このようにページを返送する時は、もう一回は実行しません。
1: void Page_Load(object sender, EventArgs e)
2: {
3: if (!IsPostBack) {
4: // Load default Provinces and Cities.
5: LoadProvinceData();
6: LoadCityData();
7: LoadDistrictData();
8: }
9: }
2.自動連動を実現する鍵はDRP選択項目を変更する時、自動的にページを返送し、AutoPostBack=「true」を設定して、SelectedIndexChendイベントの処理手順を実現することです。 1: City:<asp:DropDownList ID="drpCity" DataTextField="CityName" DataValueField="CityId" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">
2: </asp:DropDownList>
3.ASP.NET 2.0に対して、DRPは、バインディング前に既存のItemsが明らかにされているかどうかを示すブール値を受け入れるプロパティApendData BoundItemsを追加します。デフォルトの値はfalseで、先にクリアします。 1: Province:<asp:DropDownList ID="drpProvince" AppendDataBoundItems="true" DataTextField="ProvinceName" DataValueField="ProvinceId" AutoPostBack="true" OnSelectedIndexChanged="drpProvince_SelectedIndexChanged" runat="server">
2: </asp:DropDownList>
1: <%@ Page Language="C#" %>
2: <%@ Import Namespace="System.Data" %>
3:
4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5:
6: <script runat="server">
1:
2: void Page_Load(object sender, EventArgs e)
3: {
4: if (!IsPostBack) {
5: // Load default Provinces and Cities.
6: LoadProvinceData();
7: LoadCityData();
8: LoadDistrictData();
9: }
10: }
11:
12: #region event handler(s)
13:
14: void drpCountry_SelectedIndexChanged(object sender, EventArgs e)
15: {
16: LoadProvinceData();
17: LoadCityData();
18: LoadDistrictData();
19: }
20:
21: void drpProvince_SelectedIndexChanged(object sender, EventArgs e)
22: {
23: LoadCityData();
24: LoadDistrictData();
25: }
26:
27: void drpCity_SelectedIndexChanged(object sender, EventArgs e)
28: {
29: LoadDistrictData();
30: }
31:
32: #endregion
33:
34: #region private helpers
35:
36: void LoadProvinceData()
37: {
38: DataTable dtProvince = new DataTable();// null;
39:
40: // In this demo, we just provider provinces for Chinese
41: if (drpCountry.SelectedValue.ToLower() == "cn") {
42: // In your case, maybe you like to populate the Province data
43: // from the back-end datastore such as database.
44: dtProvince = CreateProvinceTable();
45: }
46:
47: drpProvince.DataSource = dtProvince;
48: drpProvince.DataBind();
49: }
50:
51: void LoadCityData()
52: {
53: // In your case, maybe you perform the search in your database
54: // by ADO.NET with inner-sql or stored procedure.
55: DataTable dtCity = CreateCityTable();
56: DataView dvCity = dtCity.DefaultView;
57: // Providers a dummy ProvincId when there are none of provinces to select.
58: string selectedProvinceId = (drpProvince.SelectedValue.Length != 0) ? drpProvince.SelectedValue : "-1";
59: dvCity.RowFilter = "ProvinceID=" + selectedProvinceId;
60:
61: drpCity.DataSource = dvCity;
62: drpCity.DataBind();
63: }
64:
65: void LoadDistrictData()
66: {
67: // Clears the items
68: drpDistrict.Items.Clear();
69:
70: // In this demo, we just only provider districts for Chongqing city.
71: if (drpCity.SelectedValue != "5") return;
72:
73: //
74: ListItem item = null;
75:
76: //
77: item = new ListItem("Shapingba", "1");
78: drpDistrict.Items.Add(item);
79: //
80: item = new ListItem();
81: item.Text = "Yuzhongqu";
82: item.Value = "2";
83: item.Selected = true;
84: drpDistrict.Items.Add(item);
85: //
86: drpDistrict.Items.Add(new ListItem("Jiangbei", "3"));
87: }
88:
89: #endregion
90:
91: #region Creates Sample Data below.
92:
93: DataTable CreateProvinceTable()
94: {
95: DataTable dt = new DataTable();
96: dt.Columns.Add("ProvinceID", typeof(int));
97: dt.Columns.Add("ProvinceName", typeof(string));
98:
99: DataRow row = dt.NewRow();
100: row.ItemArray = new object[] {1, "Jiangsu"};
101: dt.Rows.Add(row);
102:
103: row = dt.NewRow();
104: row["ProvinceID"] = 2;
105: row["ProvinceName"] = "Fujian";
106: dt.Rows.Add(row);
107:
108: row = dt.NewRow();
109: row[0] = 3;
110: row[1] = "Chongqing";
111: dt.Rows.Add(row);
112:
113: return dt;
114: }
115:
116: DataTable CreateCityTable()
117: {
118: DataTable dt = new DataTable();
119: dt.Columns.Add("CityID", typeof(int));
120: dt.Columns.Add("CityName", typeof(string));
121: dt.Columns.Add("ProvinceID", typeof(int));
122:
123: DataRow row = dt.NewRow();
124: row.ItemArray = new object[]{1, "Nanjiang", 1};
125: dt.Rows.Add(row);
126:
127: row = dt.NewRow();
128: row.ItemArray = new object[]{2, "Nanchong", 1};
129: dt.Rows.Add(row);
130:
131: row = dt.NewRow();
132: row.ItemArray = new object[] { 3, "Fuzhou", 2 };
133: dt.Rows.Add(row);
134:
135: row = dt.NewRow();
136: row.ItemArray = new object[] { 4, "Quanzhou", 2 };
137: dt.Rows.Add(row);
138:
139: row = dt.NewRow();
140: row.ItemArray = new object[] { 5, "Chongqing", 3};
141: dt.Rows.Add(row);
142:
143: return dt;
144: }
145:
146: #endregion
147:
7:
8: <html xmlns="http://www.w3.org/1999/xhtml" >
9: <head runat="server">
10: <title>ASP.NET Demo 1:DropDownList</title>
11: </head>
12: <body>
13: <form id="form1" runat="server">
14: <div>
15: Country:<asp:DropDownList ID="drpCountry" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCountry_SelectedIndexChanged">
16: <asp:ListItem Value="cn">Chinese</asp:ListItem>
17: <asp:ListItem Value="uk">U.K</asp:ListItem>
18: <asp:ListItem Value="us">U.S.A</asp:ListItem>
19: </asp:DropDownList>
20: Province:<asp:DropDownList ID="drpProvince" DataTextField="ProvinceName" DataValueField="ProvinceId" AutoPostBack="true" OnSelectedIndexChanged="drpProvince_SelectedIndexChanged" runat="server">
21: </asp:DropDownList>
22: City:<asp:DropDownList ID="drpCity" DataTextField="CityName" DataValueField="CityId" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">
23: </asp:DropDownList>
24: District:<asp:DropDownList ID="drpDistrict" runat="server"></asp:DropDownList>
25: </div>
26: </form>
27: </body>
28: </html>