联动下来框(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: #endregion33: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: #endregion90: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
分享到：
评论