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>