Ajax无刷新实现省市联动，并在回发后保留省市下拉框状态
功能说明：1、实现省市无刷新联动，并在回发后保留省市下拉框状态
2、使用jquery+AjaxPro实现，也可用xmlhttprequest+ashx实现，原理一样
前台代码：
<!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 src="http://www.cnblogs.com/http://www.cnblogs.com/Content/Script/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//【省份】-【城市】关系
$("#<%=ddlProvince.ClientID %>").change(function () {
var res = Views_JsAndJquery_Ajax_Common_TwoGrade.BindCity(this.value).value;
$("#<%=ddlCity.ClientID %>").empty().html(res);
$("#<%=hdCity.ClientID %>").val(res);
$("#<%=hdCitySelectedValue.ClientID %>").val('');
});
$("#<%=ddlCity.ClientID %>").change(function () { //保存城市下来选择值
$("#<%=hdCitySelectedValue.ClientID %>").val($("#<%=ddlCity.ClientID %>").val());
});
//页面加载时，恢复之前【城市】下拉框状态
if ($("#<%=hdCity.ClientID %>").val() != "") {
if ($("#<%=ddlProvince.ClientID %>").val() != '') {
$("#<%=ddlCity.ClientID %>").empty().html($("#<%=hdCity.ClientID %>").val()); //重新加载【城市】数据
$("#<%=ddlCity.ClientID %>").val($("#<%=hdCitySelectedValue.ClientID %>").val()); //恢复之前选择的值
}
else { //如果省份下拉框选择第一项则清空城市下拉框对应的隐藏值
$("#<%=hdCity.ClientID %>").val('');
$("#<%=hdCitySelectedValue.ClientID %>").val('');
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--存放省份所对应的城市信息--%>
<asp:HiddenField ID="hdCity" runat="server" />
<%--存放城市下拉框选择的值 --%>
<asp:HiddenField ID="hdCitySelectedValue" runat="server" />
<div>
<asp:DropDownList ID="ddlProvince" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/Content/Script/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//【省份】-【城市】关系
$("#<%=ddlProvince.ClientID %>").change(function () {
var res = Views_JsAndJquery_Ajax_Common_TwoGrade.BindCity(this.value).value;
$("#<%=ddlCity.ClientID %>").empty().html(res);
$("#<%=hdCity.ClientID %>").val(res);
$("#<%=hdCitySelectedValue.ClientID %>").val('');
});
$("#<%=ddlCity.ClientID %>").change(function () { //保存城市下来选择值
$("#<%=hdCitySelectedValue.ClientID %>").val($("#<%=ddlCity.ClientID %>").val());
});
//页面加载时，恢复之前【城市】下拉框状态
if ($("#<%=hdCity.ClientID %>").val() != "") {
if ($("#<%=ddlProvince.ClientID %>").val() != '') {
$("#<%=ddlCity.ClientID %>").empty().html($("#<%=hdCity.ClientID %>").val()); //重新加载【城市】数据
$("#<%=ddlCity.ClientID %>").val($("#<%=hdCitySelectedValue.ClientID %>").val()); //恢复之前选择的值
}
else { //如果省份下拉框选择第一项则清空城市下拉框对应的隐藏值
$("#<%=hdCity.ClientID %>").val('');
$("#<%=hdCitySelectedValue.ClientID %>").val('');
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--存放省份所对应的城市信息--%>
<asp:HiddenField ID="hdCity" runat="server" />
<%--存放城市下拉框选择的值 --%>
<asp:HiddenField ID="hdCitySelectedValue" runat="server" />
<div>
<asp:DropDownList ID="ddlProvince" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
后台代码：
public partial class Views_JsAndJquery_Ajax_Common_TwoGrade : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Views_JsAndJquery_Ajax_Common_TwoGrade)); //每次回发都得重新注册
if (!IsPostBack)
{
BindProvince();
this.ddlCity.Items.Add("请选择");
}
}
private void BindProvince() //绑定省份
{
this.ddlProvince.Items.Add(new ListItem("请选择", string.Empty));
this.ddlProvince.Items.Add(new ListItem("湖北", "01"));
this.ddlProvince.Items.Add(new ListItem("湖南", "02"));
}
/// <summary>
/// 绑定城市
/// </summary>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string BindCity(string parProvinID)
{
StringBuilder st = new StringBuilder();
st.Append("<option value=\"" + string.Empty + "\">" + "请选择" + "</option>\n");
if (parProvinID != string.Empty)
{
if (parProvinID == "01")
{
st.Append("<option value=\"01\">武汉</option>\n");
st.Append("<option value=\"02\">孝感</option>\n");
}
else if (parProvinID == "02")
{
st.Append("<option value=\"01\">长沙</option>\n");
st.Append("<option value=\"02\">岳阳</option>\n");
}
}
return st.ToString();
}
protected void Button1_Click(object sender, EventArgs e) //获取下拉框值
{
string str = this.ddlProvince.SelectedValue; //省份下拉框
string str2 = Request[this.ddlCity.UniqueID]; //城市下拉框的seelctedvalue
string str3 = this.hdCitySelectedValue.Value; //城市下拉框的seelctedvalue
}
}
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Views_JsAndJquery_Ajax_Common_TwoGrade)); //每次回发都得重新注册
if (!IsPostBack)
{
BindProvince();
this.ddlCity.Items.Add("请选择");
}
}
private void BindProvince() //绑定省份
{
this.ddlProvince.Items.Add(new ListItem("请选择", string.Empty));
this.ddlProvince.Items.Add(new ListItem("湖北", "01"));
this.ddlProvince.Items.Add(new ListItem("湖南", "02"));
}
/// <summary>
/// 绑定城市
/// </summary>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string BindCity(string parProvinID)
{
StringBuilder st = new StringBuilder();
st.Append("<option value=\"" + string.Empty + "\">" + "请选择" + "</option>\n");
if (parProvinID != string.Empty)
{
if (parProvinID == "01")
{
st.Append("<option value=\"01\">武汉</option>\n");
st.Append("<option value=\"02\">孝感</option>\n");
}
else if (parProvinID == "02")
{
st.Append("<option value=\"01\">长沙</option>\n");
st.Append("<option value=\"02\">岳阳</option>\n");
}
}
return st.ToString();
}
protected void Button1_Click(object sender, EventArgs e) //获取下拉框值
{
string str = this.ddlProvince.SelectedValue; //省份下拉框
string str2 = Request[this.ddlCity.UniqueID]; //城市下拉框的seelctedvalue
string str3 = this.hdCitySelectedValue.Value; //城市下拉框的seelctedvalue
}
}
会出现的异常信息（下面解决方法会影响安全，并不是最好的方法）
一、从客户端中检测到有潜在危险的 Request.Form 值
解决方法： <%@ Page ValidateRequest="false"
二、回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/>
解决方法： <%@ Page EnableEventValidation="false"
