省市区无刷新联动

最新推荐文章于 2014-10-23 15:19:37 发布

luotuocihb

最新推荐文章于 2014-10-23 15:19:37 发布

阅读量574

点赞数

分类专栏： ASP.NET 文章标签： ASP.NET AJAX 省市区无刷新联动 VS2010

ASP.NET 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文参考了CSDN上的一篇博文：

客户端代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="autoProCityCounty.aspx.cs" Inherits="Test.AJAXTest.autoProCityCounty" EnableEventValidation="false"%>

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

<script type="text/javascript">
//根据省份取出城市/
function GetCityList() {
var ddlProvince = document.getElementById("dpProvince");
var index = ddlProvince.selectedIndex;
var provinceid = ddlProvince.options[index].value;
autoProCityCounty.GetCityList(provinceid, CallbackCity); //调用后台的AjaxMethod，返回省的Datatable，交由CallbackCity处理
}

function CallbackCity(response) {
document.getElementById("dpCity").length = 1; //省变化时市显示“请选择”
document.getElementById("dpCounty").length = 1; //省变化时县(区)显示“请选择”
//document.getElementById("dpCity").options.add(new Option("--请选择--", 0));
var value, text; //定义市在dropdownlist中的value和text
var count = response.value.Rows.length; //取得市的总数量
//循环从后台返回的Datatable中取出市
for (var i = 0; i < count; i++) {
value = response.value.Rows[i]["areaid"];
text = response.value.Rows[i]["areaname"];
document.getElementById("dpCity").options.add(new Option(text, value));
}
}
//

//根据城市取出县(区)///
function GetCountyList() {
var ddlCounty = document.getElementById("dpCity");
var index = ddlCounty.selectedIndex;
var countyid = ddlCounty.options[index].value;
autoProCityCounty.GetCountyList(countyid, CallbackCounty); //调用后台的AjaxMethod,返回市的Datatable，交由CallbackCounty处理
}
function CallbackCounty(response) {
document.getElementById("dpCounty").length = 1; //市变化时县(区)显示“请选择”
//document.getElementById("dpCounty").options.add(new Option("--请选择--", 0));
var value, text; //定义县(区)在dropdownlist中的value和text
var count = response.value.Rows.length; //取得县(区)的总数量
//循环从后台返回的Datatable中取出县(区)
for (var i = 0; i < count; i++) {
value = response.value.Rows[i]["areaid"];
text = response.value.Rows[i]["areaname"];
document.getElementById("dpCounty").options.add(new Option(text, value));
}
}
///
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
省份：<asp:DropDownList ID="dpProvince" runat="server" Width="80px" οnchange="GetCityList()"></asp:DropDownList>
城市：<asp:DropDownList ID="dpCity" runat="server" Width="100px" οnchange="GetCountyList()"></asp:DropDownList>
县(区)：<asp:DropDownList ID="dpCounty" runat="server" Width="120px"></asp:DropDownList>
<asp:Button ID="btn" runat="server" οnclick="btn_Click" Text="提交"/>
</div>
</form>
</body>
</html>

服务端代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ajax;
using System.Data;
using Microsoft.Practices.EnterpriseLibrary.Data;
using Microsoft.Practices.EnterpriseLibrary.Common;
using System.Data.SqlClient;

namespace Test.AJAXTest
{

public partial class autoProCityCounty : System.Web.UI.Page
{
Database db = DatabaseFactory.CreateDatabase();

protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(autoProCityCounty));
if (!IsPostBack)
{
DataBindProvince(); //绑定省
}
DataTable dt = null;
#region Form提交后，服务器会response一次，为了保留用户所选省、市、县(区)，页面Page_Load时绑定市、县(区)
//dt = db.ExecuteDataSet(CommandType.Text, "select id,city from city where provinceid='" + ProvinceID + "'").Tables[0];
dt = db.ExecuteDataSet(CommandType.Text, "select areaid,areaname from T_area where areafatherid='" + ProvinceID + "'").Tables[0];
dpCity.DataSource = dt;
dpCity.DataTextField = "areaname";
dpCity.DataValueField = "areaid";
dpCity.DataBind();
dpCity.Items.Insert(0, new ListItem("----请选择----", "1"));
dpCity.SelectedValue = CityID;

dt = db.ExecuteDataSet(CommandType.Text, "select areaid,areaname from T_area where areafatherid='" + CityID + "'").Tables[0];
dpCounty.DataSource = dt;
dpCounty.DataTextField = "areaname";
dpCounty.DataValueField = "areaid";
dpCounty.DataBind();
dpCounty.Items.Insert(0, new ListItem("------请选择------", "1"));
dpCounty.SelectedValue = CountyID;
#endregion
}
#region 定义窗体数据
public string ProvinceID
{
get {
return Request.Params[dpProvince.UniqueID] == null ? "1" : Request.Params[dpProvince.UniqueID] as string;
//return Request.Params[dpProvince.UniqueID] as string;
}
}
public string CityID
{
get
{
return Request.Params[dpCity.UniqueID] == null ? "1" : Request.Params[dpCity.UniqueID] as string;
//return Request.Params[dpCity.UniqueID] as string;
}
}
public string CountyID
{
get {
return Request.Params[dpCounty.UniqueID] as string;
}
}
#endregion

#region 省份绑定
public void DataBindProvince()
{
DataTable dtProvince = db.ExecuteDataSet(CommandType.Text,"select areaid,areaname from T_area where areafatherid=0").Tables[0];
if (dtProvince.Rows.Count > 0)
{

dpProvince.DataSource = dtProvince;
dpProvince.DataTextField = "areaname";
dpProvince.DataValueField = "areaid";
dpProvince.DataBind();
dpProvince.Items.Insert(0,new ListItem("--请选择--", "1"));
dpProvince.SelectedValue = ProvinceID;

}
}
#endregion

#region 获取市列表
[Ajax.AjaxMethod]
public DataTable GetCityList(string provinceID)
{
DataTable dtCity = db.ExecuteDataSet(CommandType.Text, "select areaid,areaname from T_area where areafatherid='" + provinceID + "'").Tables[0];
return dtCity;
}
#endregion

#region 获取县(区)列表
[Ajax.AjaxMethod]
public DataTable GetCountyList(string cityID)
{
DataTable dtCounty = db.ExecuteDataSet(CommandType.Text, "select areaid,areaname from T_area where areafatherid='" + cityID + "'").Tables[0];
return dtCounty;

}
#endregion

protected void btn_Click(object sender, EventArgs e)
{
string province = dpProvince.SelectedItem.Text;
string city = dpCity.SelectedItem.Text;
string county = dpCounty.SelectedItem.Text;
}

}
}