首页 > 代码库 > Ajax省市区无刷新单表联动查询

Ajax省市区无刷新单表联动查询

2024-08-22 23:36:43   220人阅读

在很多时候都需要用到无刷新级联查询，本文将以省市区的级联查询作为例子。注：此为单表三级联动

环境：Vistual Studio 2015 、MSSQL

1、首先下载AjaxControlToolkit控件，附件下载地址附文章末尾。

2、创建Asp.net网站，将AjaxControlToolkit.dll和AjaxControlToolkit.pdb拷至项目的Bin文件夹下，并在项目中引用。

3、在Web.config配置文件中<system.web> 中添加如下节点

1 <pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
2             <controls>
3                 <add tagPrefix="webdiyer" namespace="Wuqi.Webdiyer" assembly="AspNetPager"/>
4                 <add tagPrefix="web" namespace="WebChart" assembly="WebChart"/>
5                 <add tagPrefix="web" namespace="EeekSoft.Web" assembly="EeekSoft.Web.PopupWin"/>
6                 <add tagPrefix="ajax" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>
7             </controls>
8  </pages>

4、配置完成后前台页面写代码（写在form标签内）

 1   <div>
 2             <asp:ScriptManager ID="ScriptManager1" runat="server">
 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>
25         </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 
20     public CityService()
21     {
22         //如果使用设计的组件，请取消注释以下行 
23         //InitializeComponent(); 
24     }
25     static string ConnStr = "Server=10.72.25.12;User ID=zzcp;Password=gwbnsh@zzcp;database=zzcp;Connection Reset=FALSE";
26     /// <summary>
27     /// 获取省份
28     /// </summary>
29     /// <param name="knownCategoryValues"></param>
30     /// <param name="category"></param>
31     /// <returns></returns>
32     [WebMethod]
33     public CascadingDropDownNameValue[] GetProvince(string knownCategoryValues, string category)
34     {
35         List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue>(); SqlConnection conn = new SqlConnection(ConnStr);
36         string sql = "SELECT * FROM tb_regions WHERE LevelType=1";
37         conn.Open();
38         SqlCommand cmd = new SqlCommand(sql, conn);
39         SqlDataReader dr = cmd.ExecuteReader();
40         while (dr.Read())
41         {
42             CascadingDropDownNameValue t = new CascadingDropDownNameValue(dr["Name"].ToString(), dr["id"].ToString());
43             list.Add(t);
44         }
45         dr.Close();
46         conn.Close();
47         return list.ToArray();
48     }
49     /// <summary>
50     /// 获取城市
51     /// </summary>
52     /// <param name="knownCategoryValues"></param>
53     /// <param name="category"></param>
54     /// <returns></returns>
55     [WebMethod]
56     public CascadingDropDownNameValue[] GetCity(string knownCategoryValues, string category)
57     {
58         SqlConnection conn = new SqlConnection(ConnStr);
59         List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue>();
60         StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
61         string sql = string.Format("SELECT * FROM tb_regions WHERE LevelType=2 AND ParentId=‘{0}‘ ", sd["ProvinceID"]);
62         conn.Open();
63         SqlCommand cmd = new SqlCommand(sql, conn);
64         SqlDataReader dr = cmd.ExecuteReader();
65         while (dr.Read())
66         {
67             CascadingDropDownNameValue t = new CascadingDropDownNameValue(dr["Name"].ToString(), dr["id"].ToString());
68             list.Add(t);
69         }
70         dr.Close();
71         conn.Close();
72         return list.ToArray();
73     }
74     /// <summary>
75     /// 获取区
76     /// </summary>
77     /// <param name="knownCategoryValues"></param>
78     /// <param name="category"></param>
79     /// <returns></returns>
80     [WebMethod]
81     public CascadingDropDownNameValue[] GetDistrict(string knownCategoryValues, string category)
82     {
83         SqlConnection conn = new SqlConnection(ConnStr);
84         List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue>();
85         StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
86         string sql = string.Format("SELECT * FROM tb_regions WHERE LevelType=3 AND ParentId=‘{0}‘ ", sd["CityID"]);
87         conn.Open();
88         SqlCommand cmd = new SqlCommand(sql, conn);
89         SqlDataReader dr = cmd.ExecuteReader();
90         while (dr.Read())
91         {
92             CascadingDropDownNameValue t = new CascadingDropDownNameValue(dr["Name"].ToString(), dr["id"].ToString());
93             list.Add(t);
94         }
95         dr.Close();
96         conn.Close();
97         return list.ToArray();
98     }
99 }

CascadingDropDown与DropDownList控件组合，下面是对其各个属性的一个简单说明：

  • TargetControlID：与之协作的DropDownList控件的ID。
  • ParentControlID：父级下拉框的ID，显然顶级下拉框ddlProvince不含有父级下拉框，因此不含有ParentControlID。
  • Category：此下拉框的“类别”，也可以称为名称，具体使用到后面再说，这里说了也不好理解。
  • PromptText：进行选择之前显示的文本。
  • LoadingText：加载时显示的文本，因为需要与服务端进行通信，所以难免会产生延迟，这里的文本便是在延迟时显示的文本。
  • ServicePath：获取数据时的Web服务。此处即为我们的WCF服务。
  • ServiceMethod：获取数据的方法。这些方法由WCF服务实现，显然我们暂时并没有实现它。

数据库SQL文件：附加下载

AjaxControlToolkit控件:附件下载

Ajax省市区无刷新单表联动查询


联系
我们