ASP.NET DEMOⅠ:联动下来框(DropDownList)
2007-05-29 03:17 晓风残月 阅读(2014) 评论(1) 编辑 收藏 举报
开篇废话~
也算序
下了个大胆的决定:整理出一系列 ASP.NET 实践相关的示例,来源大部分都是网络收集,然而都是自己实践总结。
约定:
1.环境:ASP.NET 2.0。尽量提供 1.x 的相关信息
2.编码方式:内联代码。优势是,简洁,方便测试,只需要一张 .aspx 页面
3.+
那就开始吧~
DEMOⅠ:联动下来框(DropDownList)
提示:服务端版本,虽然当前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 helpers35:
36: void LoadProvinceData()37: {
38: DataTable dtProvince = new DataTable();// null;39:
40: // In this demo, we just provider provinces for Chinese41: if (drpCountry.SelectedValue.ToLower() == "cn") {42: // In your case, maybe you like to populate the Province data43: // 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 database54: // 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 items68: 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:
</script>
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>
源码:dowload