方法一:

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

环境:Vistual Studio 2015 、MSSQL

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

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

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

 <pages controlRenderingCompatibilityVersion="4.0" 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标签内)

   <div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlProvince" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlDistrict" runat="server">
</asp:DropDownList>
<ajax:cascadingdropdown id="CascadingDropDown1_Province" runat="server" targetcontrolid="ddlProvince"
servicepath="CityService.asmx" servicemethod="GetProvince" category="ProvinceID"
prompttext="请选择省份" loadingtext="省份加载中..."></ajax:cascadingdropdown>
<ajax:cascadingdropdown id="CascadingDropDown1_City" runat="server" servicepath="CityService.asmx"
servicemethod="GetCity" targetcontrolid="ddlCity" parentcontrolid="ddlProvince" prompttext="请选择城市" loadingtext="城市加载中..."
category="CityID"></ajax:cascadingdropdown>
<ajax:cascadingdropdown id="CascadingDropDown1_District" runat="server" servicepath="CityService.asmx"
servicemethod="GetDistrict" targetcontrolid="ddlDistrict" parentcontrolid="ddlCity" category="DistrictID"
prompttext="请选择区" loadingtext="区加载中..."></ajax:cascadingdropdown>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>

5、在项目中新建一个Web服务(本例命名为:CityService.asmx)

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient; //引用
using System.Data;
using AjaxControlToolkit; //引用AjaxContrlToolkit控件
using System.Collections.Specialized;//引用
/// <summary>
///CityService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService] //需要把些标记加上,不然调不到方法
public class CityService : System.Web.Services.WebService
{ public CityService()
{
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
static string ConnStr = "Server=10.72.25.12;User ID=zzcp;Password=gwbnsh@zzcp;database=zzcp;Connection Reset=FALSE";
/// <summary>
/// 获取省份
/// </summary>
/// <param name="knownCategoryValues"></param>
/// <param name="category"></param>
/// <returns></returns>
[WebMethod]
public CascadingDropDownNameValue[] GetProvince(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue>(); SqlConnection conn = new SqlConnection(ConnStr);
string sql = "SELECT * FROM tb_regions WHERE LevelType=1";
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
CascadingDropDownNameValue t = new CascadingDropDownNameValue(dr["Name"].ToString(), dr["id"].ToString());
list.Add(t);
}
dr.Close();
conn.Close();
return list.ToArray();
}
/// <summary>
/// 获取城市
/// </summary>
/// <param name="knownCategoryValues"></param>
/// <param name="category"></param>
/// <returns></returns>
[WebMethod]
public CascadingDropDownNameValue[] GetCity(string knownCategoryValues, string category)
{
SqlConnection conn = new SqlConnection(ConnStr);
List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue>();
StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
string sql = string.Format("SELECT * FROM tb_regions WHERE LevelType=2 AND ParentId='{0}' ", sd["ProvinceID"]);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
CascadingDropDownNameValue t = new CascadingDropDownNameValue(dr["Name"].ToString(), dr["id"].ToString());
list.Add(t);
}
dr.Close();
conn.Close();
return list.ToArray();
}
/// <summary>
/// 获取区
/// </summary>
/// <param name="knownCategoryValues"></param>
/// <param name="category"></param>
/// <returns></returns>
[WebMethod]
public CascadingDropDownNameValue[] GetDistrict(string knownCategoryValues, string category)
{
SqlConnection conn = new SqlConnection(ConnStr);
List<CascadingDropDownNameValue> list = new List<CascadingDropDownNameValue>();
StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
string sql = string.Format("SELECT * FROM tb_regions WHERE LevelType=3 AND ParentId='{0}' ", sd["CityID"]);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
CascadingDropDownNameValue t = new CascadingDropDownNameValue(dr["Name"].ToString(), dr["id"].ToString());
list.Add(t);
}
dr.Close();
conn.Close();
return list.ToArray();
}
}

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

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

方法二:

前台代码:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Douyu.Default" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
15 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddlProvice" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
OnSelectedIndexChanged="ddlProvice_SelectedIndexChanged">
<asp:ListItem Text="-请选择省份-" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlCity_SelectedIndexChanged">
<asp:ListItem Text="-请选择城市-" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlArea" runat="server">
<asp:ListItem Text="-请选择县区-" Value=""></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

后台代码:

 using GwbnshHD;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace Douyu
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindProvince();
BindCity();
BindDistrict();
}
}
//加载城市
protected void ddlProvice_SelectedIndexChanged(object sender, EventArgs e)
{
BindCity();
BindDistrict();
}
//加载县区
protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
{
BindDistrict();
}
//加载省份
protected void BindProvince()
{
DataTable dt = DbHelperSQL.Query("SELECT * FROM tb_regions WHERE LevelType=1").Tables[];
ddlProvice.DataTextField = "Name";
ddlProvice.DataValueField = "id";
ddlProvice.DataSource = dt;
ddlProvice.DataBind();
}
/// <summary>
/// 绑定市区
/// </summary>
/// <param name="code"></param>
public void BindCity()
{
string SelectPro = ddlProvice.SelectedValue;
if (!string.IsNullOrEmpty(SelectPro))
{
ddlCity.Items.Clear();
ddlCity.AppendDataBoundItems = true;
ddlCity.Items.Insert(, new ListItem("-请选择城市-", ""));
DataTable dt1 = DbHelperSQL.Query("SELECT * FROM tb_regions WHERE LevelType=2 AND ParentId=" + SelectPro + "").Tables[];
ddlCity.DataTextField = "Name";
ddlCity.DataValueField = "id";
ddlCity.DataSource = dt1;
ddlCity.DataBind();
}
else
{
ddlCity.Items.Clear();
ddlCity.AppendDataBoundItems = true;
ddlCity.Items.Insert(, new ListItem("-请选择城市-", ""));
}
}
/// <summary>
/// 绑定县区
/// </summary>
/// <param name="code"></param>
public void BindDistrict()
{
string SelectCity = ddlCity.SelectedValue;
if (!string.IsNullOrEmpty(SelectCity))
{
ddlArea.Items.Clear();
ddlArea.AppendDataBoundItems = true;
ddlArea.Items.Insert(, new ListItem("-请选择县区-", ""));
DataTable dt2 = DbHelperSQL.Query("SELECT * FROM tb_regions WHERE LevelType=3 AND ParentId=" + SelectCity + "").Tables[];
ddlArea.DataTextField = "Name";
ddlArea.DataValueField = "id";
ddlArea.DataSource = dt2;
ddlArea.DataBind();
}
else
{
ddlArea.Items.Clear();
ddlArea.AppendDataBoundItems = true;
ddlArea.Items.Insert(, new ListItem("-请选择县区-", ""));
}
}
}
}

数据库SQL文件:附加下载

AjaxControlToolkit控件:附件下载

Ajax省市区无刷新单表联动查询的更多相关文章

  1. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  2. Jquery Ajax自定义无刷新提交表单Form

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  3. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  4. HTML无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DO ...

  5. iframe实现面页无刷新提交表单

    一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...

  6. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  7. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  8. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  9. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

随机推荐

  1. python sqlite 插入的数据含有变量,结果不一致

    def insert(): conn = sqlite3.connect("sqlite.db") print "open database passed" t ...

  2. iOS 服务器回空数据的处理

    后端返回一个数组类型的数据,但是数据里面包含"<null>","(null)"等,本地缓存写入数据失败,write to File: 方法限制, 可 ...

  3. MySQL设置字符集为UTF8(Windows版)

    Windows版MySQL设置字符集全部为utf8的方式 MySQL安装目录下的my.ini文件 [client]节点 default-character-set=utf8    (增加) [mysq ...

  4. SQLServer将表数据导出为Insert语句

    从网上找到的方法,不过很不错,记录下来,也算是分享下~~ 有一个表,city,有列:cityID,cityName;将此表中所有数据,变为insert语句 select 'insert into ta ...

  5. TIOBE 2015年7月编程语言排行榜:C++的复兴

    TIOBE 2015年7月编程语言排行榜:C++的复兴 发表于2015-07-13 17:03| 16086次阅读| 来源CSDN| 128 条评论| 作者钱曙光 编程语言排行榜TIOBEC++ 摘要 ...

  6. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  7. Html中代码换行造成空格间距的问题

    Html中代码换行造成空格间距的问题解析 解决方法: 一.简单粗爆不换行 写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 ...

  8. windows 下面安装npm

    npm(简称:Node Packaged Modules)是nodejs官方未nodejs定制的一个工具,是Node.js的包管理器,通过npm可以下载安装nodejs的模块包,nodejs有很多优秀 ...

  9. js中的类数组对象---NodeList

    动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...

  10. and 与 && or 与 || 的差异之处

    其实就是比较他们的优先级 // --------------------// "||" 比 "or" 的优先级高 // 表达式 (false || true)  ...