本功能特点:
下级的显示和数据的加载都是由上一级下拉框的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>
&nbsp;<asp:DropDownList ID="ddlCity" runat="server"
onselectedindexchanged="ddlCity_SelectedIndexChanged" ViewStateMode="Enabled">
</asp:DropDownList>
&nbsp;<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(, new ListItem("请选择",""));
}
//选择省份后显示市区下拉框,并加载当前省份下的市区数据
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(, new ListItem("请选择", ""));
}
//选择城市后显示地区下拉框,并加载当前城市下的地区数据
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(, new ListItem("请选择", ""));
}

完全使用ASP.NET实现的省市区级联效果的更多相关文章

  1. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  3. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  4. WPF MVVM模式下ComboBox级联效果 选择第一项

    MVVM模式下做的省市区的级联效果.通过改变ComboBox执行命令改变市,区. 解决主要问题就是默认选中第一项 1.首先要定义一个属性,继承自INotifyPropertyChanged接口.我这里 ...

  5. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  8. 用扩展方法实现DevExpress-GridControl级联效果

    首先,让我们先回顾下.Net中扩展方法的特征: 1.  必须在一个非嵌套.非泛型的静态类中: 2.  至少有一个参数(this 作前缀的参数): 3.  第一个参数必须附加this做前缀: 4.  第 ...

  9. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

随机推荐

  1. Scrum冲刺博客(总)

    一.在 Alpha 阶段认领的任务 二.明日任务安排 成员 任务 任务量/小时 陈伟泽 项目进度把控 1 李嘉廉 24点算法" Stack数据结构实现,生成不重复的算式(考虑结合律和结合律) ...

  2. Http协议——Header说明

    下图是我用IE的开发人员工具截取的一个Http Request请求的Header. 下图是我用IE的开发人员工具截取的一个Http Response的Header. header常用指令 header ...

  3. IE、Chrome、Firefox 三大浏览器对比

    1. 代理 IE 浏览器设置代理位置在: [Internet 选项]⇒ [连接]选项卡 ⇒ [局域网设置],如下: Chrome 的代理配置界面完全同 IE,只是你设置路径在: [设置]⇒ [高级]⇒ ...

  4. Java第四次作业--面向对象高级特性(继承和多态)

    一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握类的继承概念和设计 掌握构造方法的继承原则 掌握方法重写 掌握super键字和final关键字 理解多态的概念,掌握通过方法重写和方法重载机制 ...

  5. DesignPattern(二) 创建型模式

    创建型模式 创建型模式就是用来创建对象的模式,抽象了实例化的过程.所有的创建型模式都有两个共同点.第一,它们都将系统使用哪些具体类的信息封装起来:第二,它们隐藏了这些类的实例是如何被创建和组织的.创建 ...

  6. SD卡驱动学习

    https://blog.csdn.net/zqixiao_09/article/category/6163492 sd 协议解析: https://blog.csdn.net/g_salamande ...

  7. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  8. 归并排序算法-python实现

    #-*- coding: UTF-8 -*- import numpy as np def Merge(a, f, m, l): i = f j = m + 1 tmp = [] while i &l ...

  9. ASP.NET 迭代控件获得行号

    如何获取Repeater的当前行号,其实Repeater自身就带有这个获取当前行号的属性,而无需程序员绑定这个行号.到底要怎么实现呢?其实使用Repeater中的 Container.ItemInde ...

  10. C# 添加xml节点多了xmlns属性问题

    当父节点有xmlns属性时,动态创建子节点,会默认增加一个 xmlns=“” 的节点属性值. 原有 doc.CreateElement("son-node"); 改为 doc.Cr ...