完全使用ASP.NET实现的省市区级联效果
2014-09-18 14:42
661 查看
本功能特点:
下级的显示和数据的加载都是由上一级下拉框的SelectedIndexChanged触发的,在上级下拉框没有选择之前,下级不会出现,用户体验比较好。
无刷新方面,采用AJAX技术,在数据选择的时候,不会造成页面刷新,不会回传整个页面,不影响其他控件。
由于省市区三级数据较大,采用数据库保存数据,代码中需要用到DBHelper来操作数据库。
注意事项:
本代码完全用Asp.net实现,没有使用javascript,可以把功能单独嵌套到ASP页面中,也可以做成用户控件。
由于采用了AJAX无刷新技术,如果嵌入到的页面中包含有ScriptManager控件,需要把本代码中的改为ScriptManagerProxy.
页面代码:
<style type="text/css"> #pro_city_area select{width:78px;} #ddlPro{display:inline;} #ddlCity{display:none;} #ddlArea{display:none;} </style> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div id="pro_city_area"> <asp:DropDownList ID="ddlPro" runat="server" onselectedindexchanged="ddlPro_SelectedIndexChanged"> </asp:DropDownList> <asp:DropDownList ID="ddlCity" runat="server" onselectedindexchanged="ddlCity_SelectedIndexChanged" ViewStateMode="Enabled"> </asp:DropDownList> <asp:DropDownList ID="ddlArea" runat="server"> </asp:DropDownList> </div> </ContentTemplate> </asp:UpdatePanel> </form>
后置代码:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //加载省份数据 BindProData(); } } DBHelper db = new DBHelper(); //绑定省份数据 private void BindProData() { string sql = "SELECT [id],[provinceID],[province] FROM [Public].[dbo].[Province]"; DataTable dt = db.GetDataTable(sql, null); this.ddlPro.DataSource = dt; this.ddlPro.DataTextField = "province"; this.ddlPro.DataValueField = "provinceID"; this.ddlPro.DataBind(); this.ddlPro.Items.Insert(0, new ListItem("请选择","0")); } //选择省份后显示市区下拉框,并加载当前省份下的市区数据 protected void ddlPro_SelectedIndexChanged(object sender, EventArgs e) { ddlCity.Attributes.CssStyle.Add("display", "inline"); int proId = int.Parse(ddlPro.SelectedValue.ToString()); ViewState["proId"] = proId; BindCity(proId); } //绑定市区数据 private void BindCity(int proId) { string sql = @"SELECT [id] ,[cityID] ,[city] ,[father] FROM [Public].[dbo].[City] where father=@proId"; SqlParameter[] paras ={ new SqlParameter("@proId",proId) }; DataTable dt = db.GetDataTable(sql, paras); this.ddlCity.DataSource = dt; this.ddlCity.DataTextField = "city"; this.ddlCity.DataValueField = "cityID"; this.ddlCity.DataBind(); this.ddlCity.Items.Insert(0, new ListItem("请选择", "0")); } //选择城市后显示地区下拉框,并加载当前城市下的地区数据 protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e) { ddlArea.Attributes.CssStyle.Add("display", "inline"); int cityId = int.Parse(ddlCity.SelectedValue.ToString()); BindArea(cityId); } //绑定地区数据 private void BindArea(int cityId) { string sql = @"SELECT [id] ,[areaID] ,[area] ,[father] FROM [Public].[dbo].[Area] where father=@cityId"; SqlParameter[] paras ={ new SqlParameter("@cityId",cityId) }; DataTable dt = db.GetDataTable(sql, paras); this.ddlArea.DataSource = dt; this.ddlArea.DataTextField = "area"; this.ddlArea.DataValueField = "areaID"; this.ddlArea.DataBind(); this.ddlArea.Items.Insert(0, new ListItem("请选择", "0")); }
相关文章推荐
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
- Asp.net 使用GDI+实现alpha透明效果
- 不使用梅花雨日历控件而使用ASP.NET日历控件实现同样效果
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果
- 在asp.net中使用jQuery实现类似QQ网站的图片切割效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
- ASP.NET中使用jQuery插件实现图片幻灯效果
- ASP.NET实现级联下拉框效果实例讲解
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果(上)
- JavaScript提高:002:ASP.NET使用easy UI实现tab效果
- 【转】 使用ASP.NET AJAX实现幻灯片效果
- [翻译]使用ASP.NET AJAX实现幻灯片效果
- JQuery和ASP.NET分别实现级联下拉框效果
- [翻译]使用ASP.NET AJAX实现幻灯片效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- Asp.net使用JQuery实现放大图片效果
- asp.net实现省市区级联下拉列表并保存状态
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果(下)
- JSP中使用SIteMesh实现类似asp.net母版效果