Ajax无刷新技术实现省市县三级联动下拉菜单Asp.Net
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>
标签: Asp.Net , 无刷新技术 , 三级联动
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于Ajax无刷新技术实现省市县三级联动下拉菜单Asp.Net的详细内容...