提示：服務端版本，雖然當前AJAX盛行，然而，凡事都需要一個過程，對于ASP.NET初學者，有助于加深對DropDownList（下文縮寫為DRP）的理解。如果，您需要無刷新版本，不想浪費您寶貴時間，請跳過:-> 目的：實現四聯動，分別展示三種如何給DRP添加數據源的方法，外加說明為什么你的DRP就是不會保持選擇狀態（應該在 IsPostBack 內綁定數據）： 1. 頁面聲名式: drpCountry 2. 代碼綁定式: drpProvince, drpCity 3. 代碼添加式: drpDistrict
技巧：
1.一般頁面初始化過程的綁定數據，最好放在 IsPostBack 內，這樣頁面回發（PostBack）的時候就不會再執行一次
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" ，然后實現SelectedIndexChanged 事件的處理程序
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 新增一個屬性 AppendDataBoundItems，該屬性接受一個bool值，指示是否在綁定前清楚已有的Items。默認值為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;
padd
分享到：
發表評論
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
評論