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 >

 

后台代码：

 

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

 

会出现的异常信息（下面解决方法会影响安全，并不是最好的方法）

一、从客户端中检测到有潜在危险的 Request.Form 值
 解决方法： <%@ Page  ValidateRequest="false"

二、回发或回调参数无效。在配置中使用 <pages  enableEventValidation="true"/>

解决方法： <%@ Page  EnableEventValidation="false"