欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-03 19:49:58
    开始工作。 第一步:准备好数据,中国省市县行政区域编码做好三张表,分别是province表,sity表,area表,上截图:,这三张表,主要有code,和name两个字...

 

 

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>