当前位置:编程学习 > asp >>

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);
   &nbs

补充:Web开发 , ASP.Net ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,