当前位置: 移动技术网 > IT编程>开发语言>.net > Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net

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

2018年09月19日  | 移动技术网IT编程  | 我要评论

exok成员,郭德纲于谦相声2012,2444小游戏

 

 

\

开始工作。

第一步:准备好数据,中国省市县行政区域编码做好三张表,分别是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" "">

<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>

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网