Ajax省市区无刷新联动查询
在很多时候都需要用到无刷新级联查询，本文将以省市区的级联查询作为例子。
环境：Vistual Studio 2010 、MSSQL
1、首先下载AjaxControlToolkit控件
下载地址请百度或者至扣群20010300群共享中下载。
2、创建Asp.net网站
将AjaxControlToolkit.dll和AjaxControlToolkit.pdb拷至项目的Bin文件夹下，并在项目中引用。
3、在Web.config配置文件中<system.web> 中添加如下节点
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"> <controls> <add tagPrefix="webdiyer" namespace="Wuqi.Webdiyer" assembly="AspNetPager"/> <add tagPrefix="web" namespace="WebChart" assembly="WebChart"/> <add tagPrefix="web" namespace="EeekSoft.Web" assembly="EeekSoft.Web.PopupWin"/> <add tagPrefix="ajax" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/> </controls> </pages>
4、配置完成后前台页面写代码（写在form标签内）
1 <asp:ScriptManager ID="ScriptManager1" runat="server"> 2 3 </asp:ScriptManager> 4 <div> 5 <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 6 <ContentTemplate> 7 <asp:DropDownList ID="ddlProvince" runat="server"> 8 </asp:DropDownList> 9 <asp:DropDownList ID="ddlCity" runat="server" > 10 </asp:DropDownList> 11 <asp:DropDownList ID="ddlDistrict" runat="server" > 12 </asp:DropDownList> 13 <ajax:CascadingDropDown ID="CascadingDropDown1_Province" runat="server" TargetControlID="ddlProvince" 14 ServicePath="CityService.asmx" ServiceMethod="GetProvince" Category="ProvinceID" 15 PromptText="请选择省份" LoadingText="省份加载中..." ></ajax:CascadingDropDown> 16 <ajax:CascadingDropDown ID="CascadingDropDown1_City" runat="server" ServicePath="CityService.asmx" 17 ServiceMethod="GetCity" TargetControlID="ddlCity" ParentControlID="ddlProvince" PromptText="请选择城市" LoadingText="城市加载中..." 18 Category="CityID" ></ajax:CascadingDropDown> 19 <ajax:CascadingDropDown ID="CascadingDropDown1_District" runat="server" ServicePath="CityService.asmx" 20 ServiceMethod="GetDistrict" TargetControlID="ddlDistrict" ParentControlID="ddlCity" Category="DistrictID" 21 PromptText="请选择区" LoadingText="区加载中..." ></ajax:CascadingDropDown> 22 </ContentTemplate> 23 </asp:UpdatePanel> 24 </div>
5、在项目中新建一个Web服务（本例命名为：CityService.asmx）
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Services; 6 using System.Data.SqlClient; //引用 7 using System.Data; 8 using AjaxControlToolkit; //引用AjaxContrlToolkit控件 9 using System.Collections.Specialized;//引用 10 /// <summary> 11 ///CityService 的摘要说明 12 /// </summary> 13 [WebService(Namespace = "http://tempuri.org/")] 14 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 15 //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 16 [System.Web.Script.Services.ScriptService] //需要把些标记加上，不然调不到方法 17 public class CityService : System.Web.Services.WebService { 18 19 public CityService () { 20 //如果使用设计的组件，请取消注释以下行 21 //InitializeComponent(); 22 }
//数据库请至扣群20010300群共享下载 或留下邮箱 23 static string ConnStr = @"Data Source=服务器;Initial Catalog=City;Integrated Security=True ;uid=sa; pwd=123456"; 24 /// <summary> 25 /// 获取省份 26 /// </summary> 27 /// <param name="knownCategoryValues"></param> 28 /// <param name="category"></param> 29 /// <returns></returns> 30 [WebMethod] 31 public CascadingDropDownNameValue[ ] GetProvince ( string knownCategoryValues, string category ) { 32 List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue> ( ); SqlConnection conn = new SqlConnection ( ConnStr ); 33 string sql = "SELECT * FROM S_PROVINCE"; 34 conn.Open ( ); 35 SqlCommand cmd = new SqlCommand ( sql, conn ); 36 SqlDataReader dr = cmd.ExecuteReader ( ); 37 while ( dr.Read() ) { 38 CascadingDropDownNameValue t = new CascadingDropDownNameValue ( dr["ProvinceName"].ToString(),dr["ProvinceID"].ToString () ); 39 list.Add ( t ); 40 } 41 dr.Close ( ); 42 conn.Close(); 43 return list.ToArray(); 44 } 45 /// <summary> 46 /// 获取城市 47 /// </summary> 48 /// <param name="knownCategoryValues"></param> 49 /// <param name="category"></param> 50 /// <returns></returns> 51 [WebMethod] 52 public CascadingDropDownNameValue[ ] GetCity ( string knownCategoryValues, string category ) { 53 SqlConnection conn = new SqlConnection ( ConnStr ); 54 List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue> ( ); 55 StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString ( knownCategoryValues ); 56 string sql =string .Format( "SELECT * FROM S_CITY WHERE PROVINCEID='{0}' ", sd["PROVINCEID"]); 57 conn.Open ( ); 58 SqlCommand cmd = new SqlCommand ( sql, conn ); 59 SqlDataReader dr = cmd.ExecuteReader ( ); 60 while ( dr.Read ( ) ) { 61 CascadingDropDownNameValue t = new CascadingDropDownNameValue ( dr["CityName"].ToString ( ), dr["CityID"].ToString ( ) ); 62 list.Add ( t ); 63 } 64 dr.Close ( ); 65 conn.Close ( ); 66 return list.ToArray ( ); 67 } 68 /// <summary> 69 /// 获取区 70 /// </summary> 71 /// <param name="knownCategoryValues"></param> 72 /// <param name="category"></param> 73 /// <returns></returns> 74 [WebMethod] 75 public CascadingDropDownNameValue[ ] GetDistrict ( string knownCategoryValues, string category ) { 76 SqlConnection conn = new SqlConnection ( ConnStr ); 77 List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue> ( ); 78 StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString ( knownCategoryValues ); 79 string sql = string.Format ( "SELECT * FROM S_DISTRICT WHERE CITYID='{0}' ", sd["CITYID"] ); 80 conn.Open ( ); 81 SqlCommand cmd = new SqlCommand ( sql, conn ); 82 SqlDataReader dr = cmd.ExecuteReader ( ); 83 while ( dr.Read ( ) ) { 84 CascadingDropDownNameValue t = new CascadingDropDownNameValue ( dr["DISTRICTName"].ToString ( ), dr["DISTRICTID"].ToString ( ) ); 85 list.Add ( t ); 86 } 87 dr.Close ( ); 88 conn.Close ( ); 89 return list.ToArray ( ); 90 } 91 }
6、OK，可以运行起来看看。如果有什么问题的话请留言
附：
CascadingDropDown与DropDownList控件组合，下面是对其各个属性的一个简单说明：
- TargetControlID：与之协作的DropDownList控件的ID。
- ParentControlID：父级下拉框的ID，显然顶级下拉框ddlProvince不含有父级下拉框，因此不含有ParentControlID。
- Category：此下拉框的“类别”，也可以称为名称，具体使用到后面再说，这里说了也不好理解。
- PromptText：进行选择之前显示的文本。
- LoadingText：加载时显示的文本，因为需要与服务端进行通信，所以难免会产生延迟，这里的文本便是在延迟时显示的文本。
- ServicePath：获取数据时的Web服务。此处即为我们的WCF服务。
- ServiceMethod：获取数据的方法。这些方法由WCF服务实现，显然我们暂时并没有实现它。
