完全使用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 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"));
    }
复制代码

 

posted on   逍遥云天  阅读(2731)  评论(0编辑  收藏  举报

编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示