联动下来框(DropDownList)

原创 2007年09月28日 14:48:00
提示:服务端版本,虽然当前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" ="true" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">        
   2: </asp:DropDownList>

3. 对于 ASP.NET 2.0,DRP 新增一个属性 AppendDataBoundItems,该属性接受一个bool值,指示是否在绑定前清楚已有的Items。默认值为false,即先清除。

   1: Province:<asp:DropDownList ID="drpProvince" ="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:     
</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>
 

dropdownlist三级联动数据库

  • 2015年12月08日 16:14
  • 19KB
  • 下载

yii 下拉列表多级联动 dropDownList 实现

看到http://blog.csdn.net/ysdaniel/ysdaniel的文章上手去试了下,非常简洁  感谢ysdaniel。   在也不用那么麻烦的js了。 废话不多说,上代码 vie...
  • hxl5u
  • hxl5u
  • 2014年12月18日 00:32
  • 661

DropDownList下拉框多选

  • 2012年05月03日 15:44
  • 135KB
  • 下载

DropDownList控件实现省市联动(AJAX实现)

http://blog.csdn.net/bdstjk 在网站注册的页面上经常要选择注册地点,如果改变省的名称就能出现对应的市级的名称,将为用户带来很大的方便,虽然用.NET的服务端时间实现很容易,...
  • bdstjk
  • bdstjk
  • 2012年04月27日 11:49
  • 10366

dropdownlist 三级联动

  • 2009年12月10日 16:30
  • 2KB
  • 下载

无刷新实现DropDownList联动

  • 2010年01月08日 15:03
  • 4KB
  • 下载

Asp.net—DropDownList与listbox的联动

在实际的项目中,会有这样的需求,比如在dropdownlist绑定了数据库以后,选择相应的内容,在listbox中就会显示对应内容下的具体条目。比如:在dropdownlist中绑定数据库中所有的省,...

dropdownlist做的二级联动

  • 2010年08月04日 23:02
  • 80KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:联动下来框(DropDownList)
举报原因:
原因补充:

(最多只允许输入30个字)