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

 

 

开始工作。

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

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

?<form id="form1" runat="server">
        <: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="">
<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>