完全使用ASP.NET实现的省市区级联效果

本功能特点:
下级的显示和数据的加载都是由上一级下拉框的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(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 [email protected]";
        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 [email protected]";
        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"));
    }
时间: 2024-09-28 23:37:01

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

JS 省市区级联 修改地址操作时的默认选中方法

省市区级联JS控件 下载地址http://files.cnblogs.com/bin-pureLife/%E5%B0%8F%E5%9B%BE%E6%A0%87.zip function update(province,city,county){ $("#s_province option").each(function(){ if($(this).val()==province){ $(this).attr('selected',true) change(1); } }); $(&qu

省市区级联选择

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市区级联选择</title> <script type="text/javascript" src="

JavaScript - 省市级联效果实例

标题 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

下拉框的级联效果的制作。

$("#province").append(function () { //append() 方法在被选元素的结尾(仍然在内部)插入指定内容 var html = ""; //添加子节点的另一种新颖的用法. for (var i in cityList) { //循环的方法. html += "<option value=" + i + ">" + i + "</option>";

elementUi省市区级联

项目中有用到级联样式,但是是三个接口出来的数据,在此记录一下: HTML: <el-cascader v-model="ruleForm.address" :props="props" style="width:220px;" placeholder="省市区" /> JS: props: { lazy: true, lazyLoad(node, resolve) { if (node.level === 0) {

夜深了,写了个JQuery的省市区三级级联效果

刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的数据,是不是应该生成静态的文件,直接加载整个数据文件,访问文件比较好?还是这样动态的访问比较好? 一般的数据文件,小的会在50k,大的会在3M 这个可以讨论下 1 /** 2 省市区县级联 3 */ 4 (function($){ 5 6 /* 7 * 8 *获取ele的相对元素 9 * 10 **

基于Element UI Cascader 级联选择器的中国省市区级联数据

安装 npm install element-china-area-data -save 在线演示:https://plortinus.github.io/element-china-area-data/index.html github:https://github.com/airyland/china-area-data 引入 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, 

vue + mint-ui 省市区级联选择

<mt-popup v-model="showSelectArea" :modal="true" position="bottom" style="width:100vw;" > <!-- <p>省份 - 城市 - 区县</p> --> <div class="showToolbar"> <div @click="controlSe

省市区级联jquery

query代码 //加载省份列表信息 $.ajax({ url: "../Area.xml", dataType: "xml", success: function (xml) { $(xml).find("province").each(function () { //找到(province)省份节点; $("<option></option>").html($(this).attr("na