提示：服务端版本，虽然当前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
分享到：
发表评论
评论