AjaxPro实现无刷新省、市、区三级下拉框
相应的配置在我的另一篇文章《AjaxPro的应用》也有所讲解。现在再简略讲解的一下,首先下载AjaxPro 组件,然后将AjaxPro.dll引用到网站(或项目)。其次修改Web.config。在 <system.web> 元素中添加以下代码
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
以上操作完毕后即可编写前台代码(如下):
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="dropdownlist_ajaxpro_Default" %>
<!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 type="text/javascript">
function BindToCity(parent_id,objDropDownList){
//下面即调用服务器端的dropdownlist_ajaxpro_Default.BindCity方法。
var DataSet_City = dropdownlist_ajaxpro_Default.BindCity(parent_id).value;
var DDL_City = document.getElementById(objDropDownList);
DDL_City.length = 0;
var Length = DataSet_City.Tables[0].Rows.length;
if(Length!="0"){
//DDL_City.options.add(new Option("===请选择===",0));
for(var i=0;i<Length;i++){
var Text = DataSet_City.Tables[0].Rows[i].Text;//必须和DataSet的列名一致
var Value = DataSet_City.Tables[0].Rows[i].Value;
DDL_City.options.add(new Option(Text,Value));
}
}
else{
}
}
function BindToArea(child_id,objDropDownList){
var DataSet_Area = dropdownlist_ajaxpro_Default.BindArea(child_id).value;
var DDL_Area = document.getElementById(objDropDownList);
DDL_Area.length = 0;
var Length = DataSet_Area.Tables[0].Rows.length;
if(Length!="0"){
//DDL_Area.options.add(new Option("===请选择===",0));
for(var i=0;i<Length;i++){
var Text = DataSet_Area.Tables[0].Rows[i].Text;//必须和DataSet的列名一致
var Value = DataSet_Area.Tables[0].Rows[i].Value;
DDL_Area.options.add(new Option(Text,Value));
}
}
else{
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" >
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server" >
</asp:DropDownList>
</div>
</form>
</body>
</html>
后台代码:
Codeusing System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
using System.Data.SqlClient;
public partial class dropdownlist_ajaxpro_Default : System.Web.UI.Page
{
//对AjaxPro在页Page_Load事件中进行运行时注册
protected void Page_Load(object sender, EventArgs e)
{
//这里的dropdownlist_ajaxpro_Default是指页面类的类名。
//如是放在命名空间，则需要写上完整的命名空间（如：namespaces.dropdownlist_ajaxpro_Default）
AjaxPro.Utility.RegisterTypeForAjax(typeof(dropdownlist_ajaxpro_Default));
BindDropDownList();
}
/// <summary>
/// 根据查询语句返回结果集
/// </summary>
/// <param name="sqlString">参数:查询语句</param>
/// <returns>省级结果集</returns>
protected DataSet GetDS(string sqlString)
{
string conStr = ConfigurationSettings.AppSettings["connectinString"].ToString();
SqlConnection conn = new SqlConnection(conStr);
DataSet ds = new DataSet();
SqlDataAdapter dat = new SqlDataAdapter(sqlString, conStr);
dat.Fill(ds, "table");
return ds;
}
/// <summary>
/// 初始化绑定省级下拉框
/// </summary>
protected void BindDropDownList()
{
string sqlstring = @"select * from province";
DropDownList1.DataSource = GetDS(sqlstring);
DropDownList1.DataTextField = "province";
DropDownList1.DataValueField = "provinceID";
DropDownList1.DataBind();
//DropDownList1.Items.Insert(0, "===请选择===");
//给下拉框绑定客户端事件
DropDownList1.Attributes.Add("onchange", "BindToCity(this.options[selectedIndex].value,'DropDownList2')");
DropDownList2.Attributes.Add("onchange", "BindToArea(this.options[selectedIndex].value,'DropDownList3')");
}
//创建服务器端方法。只要给一个方法加上[AjaxPro.AjaxMethod]标记,该方法就变成一个AjaxPro可进行映射调用的方法
[AjaxPro.AjaxMethod]
//该方法我们将实现从客户端传入一个参数，在服务器端进行查询后返回到客户端。
public DataSet BindCity(string parent_id)
{
string sqlstring = @"select cityID as Value ,city as Text from city where father =" + parent_id;
return GetDS(sqlstring);
}
[AjaxPro.AjaxMethod]
public DataSet BindArea(string child_id)
{
string sqlstring = @"select areaID as Value ,area as Text from area where father =" + child_id;
return GetDS(sqlstring);
}
}
这里附上数据库结构,不知道Excel怎么上传，所以需要数据的可以给我留言
Code//province
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[province]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[province]
GO
CREATE TABLE [dbo].[province] (
[id] [int] IDENTITY (1, 1) NOT NULL ,
[provinceID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
[province] [nvarchar] (40) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
//city
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[city]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[city]
GO
CREATE TABLE [dbo].[city] (
[id] [int] IDENTITY (1, 1) NOT NULL ,
[cityID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
[city] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
//area
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[area]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[area]
GO
CREATE TABLE [dbo].[area] (
[id] [int] IDENTITY (1, 1) NOT NULL ,
[areaID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[area] [nvarchar] (60) COLLATE Chinese_PRC_CI_AS NULL ,
[father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
