Ajax无刷新技术实现省市县三级联动下拉菜单Asp.Net

Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net

不废话，先上效果图。

开始工作。

第一步：准备好数据，中国省市县行政区域编码做好三张表，分别是province表，sity表，area表，上截图:,这三张表，主要有code，和name两个字段，code用来存储区域编码，name用来存储行政区域名字，当然了还有个Id主键，自增长，我们利用code来判断依赖关系。

第二步：数据库和表做好之后呢，就可以写代码了，先拖一个ScriptManager控件和一个UpdatePanel控件，这两个控件是用来实现无刷新技术的，非常方便。接着拖3个DropDownList控件，一定要注意，要放在UpdatePanel控件的ContentTemplate里面，看看代码：

?

<form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:DropDownList ID="ddl_Province" runat="server" AutoPostBack="True" onselectedindexchanged="ddl_Province_SelectedIndexChanged">

                </asp:DropDownList>

                <asp:DropDownList ID="ddl_City" runat="server" AutoPostBack="True" onselectedindexchanged="ddl_City_SelectedIndexChanged">

                </asp:DropDownList>

                <asp:DropDownList ID="ddl_Area" runat="server">

                </asp:DropDownList>

            </ContentTemplate>

        </asp:UpdatePanel>

    </form>

 写到这儿，就写有关数据库相关的代码就好了，非常简单的。

第三步：后台代码：

在后台代码里，我写了三个方法，BindProvince(),BindCity(),BindArea(),这三个方法如其名所说是用来绑定省市县的三个下拉菜单的，方法很简单，看代码：

        private void BindProvince()
        {
            string sql = "select code,name from province";
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(sql,conn);
            DataSet ds = new DataSet();
            conn.Open();
            adapter.Fill(ds);
            conn.Close();
            ddl_Province.DataSource = ds.Tables[0];
            ddl_Province.DataValueField = "code";
            ddl_Province.DataTextField = "name";
            ddl_Province.DataBind();
        }
        private void BindCity(string code)
        {
            string provinceCode = code.Substring(0, 2);
            string sql = "select code,name from city where left(code,2)='"+ provinceCode +"'";
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
            DataSet ds = new DataSet();
            conn.Open();
            adapter.Fill(ds);
            conn.Close();
            ddl_City.DataSource = ds.Tables[0];
            ddl_City.DataValueField = "code";
            ddl_City.DataTextField = "name";
            ddl_City.DataBind();
        }

        private void BindArea(string code)
        {
            string cityCode = code.Substring(0, 4);
            string sql = "select code,name from area where left(code,4)='" + cityCode + "'";
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
            DataSet ds = new DataSet();
            conn.Open();
            adapter.Fill(ds);
            conn.Close();
            ddl_Area.DataSource = ds.Tables[0];
            ddl_Area.DataValueField = "code";
            ddl_Area.DataTextField = "name";
            ddl_Area.DataBind();
        }

接着就是在下拉菜单的SelectedIndexChanged事件处理方法上写上这几个方法了，代码如下：

protected void ddl_City_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindArea(ddl_City.SelectedItem.Value);
        }

        protected void ddl_Province_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindCity(ddl_Province.SelectedItem.Value);
            BindArea(ddl_City.SelectedItem.Value);
        }

最后就是在页面的Load事件里写：

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindProvince();
                BindCity(ddl_Province.SelectedItem.Value);
                BindArea(ddl_City.SelectedItem.Value);
            }
        }

最后莫要忘了把省份下拉菜单和市级别的下拉菜单设置为AutoPostBack=True;OK....整个后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace ChinaArea
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindProvince();
                BindCity(ddl_Province.SelectedItem.Value);
                BindArea(ddl_City.SelectedItem.Value);
            }
        }

        private void BindProvince()
        {
            string sql = "select code,name from province";
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(sql,conn);
            DataSet ds = new DataSet();
            conn.Open();
            adapter.Fill(ds);
            conn.Close();
            ddl_Province.DataSource = ds.Tables[0];
            ddl_Province.DataValueField = "code";
            ddl_Province.DataTextField = "name";
            ddl_Province.DataBind();
        }
        private void BindCity(string code)
        {
            string provinceCode = code.Substring(0, 2);
            string sql = "select code,name from city where left(code,2)='"+ provinceCode +"'";
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
            DataSet ds = new DataSet();
            conn.Open();
            adapter.Fill(ds);
            conn.Close();
            ddl_City.DataSource = ds.Tables[0];
            ddl_City.DataValueField = "code";
            ddl_City.DataTextField = "name";
            ddl_City.DataBind();
        }

        private void BindArea(string code)
        {
            string cityCode = code.Substring(0, 4);
            string sql = "select code,name from area where left(code,4)='" + cityCode + "'";
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
            DataSet ds = new DataSet();
            conn.Open();
            adapter.Fill(ds);
            conn.Close();
            ddl_Area.DataSource = ds.Tables[0];
            ddl_Area.DataValueField = "code";
            ddl_Area.DataTextField = "name";
            ddl_Area.DataBind();
        }

        protected void ddl_City_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindArea(ddl_City.SelectedItem.Value);
        }

        protected void ddl_Province_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindCity(ddl_Province.SelectedItem.Value);
            BindArea(ddl_City.SelectedItem.Value);
        }
    }
}

设计代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ChinaArea.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="ddl_Province" runat="server" AutoPostBack="True" onselectedindexchanged="ddl_Province_SelectedIndexChanged">
                </asp:DropDownList>
                <asp:DropDownList ID="ddl_City" runat="server" AutoPostBack="True" onselectedindexchanged="ddl_City_SelectedIndexChanged">
                </asp:DropDownList>
                <asp:DropDownList ID="ddl_Area" runat="server">
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

 

 

 

标签: Asp.Net, 无刷新技术, 三级联动