ajax实现的无刷新三级联动

看了一些ajax的文章，也看到啊pan's blog实现的三级现动,就有了动手自已做一下的冲动。试着做了一下，实现如下：

1、新建一项目取名ajaxApp;
2、添加一引用Ajax.dll;(在本文最后有下载)
3、在web.config的<system.web>结点下添加
<httpHandlers>
      <add verb="POST,GET" path="ajax/*.ashx"
          type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers>
上面的代码告诉ASP.NET，和指定路径（ajax/*.ashx）匹配的任何请求都由Ajax.PageHandlerFactory而不是默认处理程序工厂来处理。我理解的：这与java应用struts的配置很相似（都是当某个请求符合一定特征就转由某个类来处理）。
4、添加一个类，取名AjaxFunctions.cs;

using System;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

namespace ajaxApp

{

/// <summary>

/// AjaxFunctions 的摘要说明。

/// </summary>

public class AjaxFunctions

{

public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];

public AjaxFunctions()

{

// TODO: 在此处添加构造函数逻辑

}

GetDataSet

省级绑定

市级绑定

县级绑定

}

5、把WebForm1.aspx删除，新增一web窗体取名叫AreaSelect；
AreaSelect.aspx代码

<%@ Page language="c#" Codebehind="AreaSelect.aspx.cs" AutoEventWireup="false" Inherits="ajaxApp.AreaSelect" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>AreaSelect</title>

</HEAD>

<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" cellSpacing="1"

cellPadding="1" width="300" border="1">

<TR>

<TD>

<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList></TD>

</TR>

<TR>

<TD>

<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList></TD>

</TR>

<TR>

<TD>

<asp:DropDownList id="DropDownList3" runat="server"></asp:DropDownList></TD>

</TR>

</TABLE>

function ddl_getcith(obj)

{

var list=document.getElementById("DropDownList1");

var index = list.selectedIndex;

var pValue = list.options[index].value;

AjaxFunctions.GetCity(pValue, GetCity_CallBack);

}

//城市回调函数

function GetCity_CallBack(response){

var ds = response.value;

if(ds != null && typeof(ds) == "object" && ds.Tables != null){

var list=document.getElementById("DropDownList2");

for (var i=list.options.length-1;i>=0;i--)

{

list.options.remove(i);

}

for(var i=0; i<ds.Tables[0].Rows.length; i++)

{

list.options.add(new Option(ds.Tables[0].Rows[i].city.toString(),ds.Tables[0].Rows[i].cityID.toString()))

}

else {

alert("Error:" + response.request.responseText);

}

function ddl_getarea(obj)

{

var list=document.getElementById("DropDownList2");

var index = list.selectedIndex;

var pValue = list.options[index].value;

//alert(pValue);

AjaxFunctions.GetArea(pValue, GetArea_CallBack);

}

//县的回调函数

function GetArea_CallBack(response){

var ds = response.value;

if(ds != null && typeof(ds) == "object" && ds.Tables != null){

var list=document.getElementById("DropDownList3");

for (var i=list.options.length-1;i>=0;i--)

{

list.options.remove(i);

}

for(var i=0; i<ds.Tables[0].Rows.length; i++)

{

list.options.add(new Option(ds.Tables[0].Rows[i].area.toString(),ds.Tables[0].Rows[i].areaID.toString()))

}

else {

alert("Error:" + response.request.responseText);

}

</script>

</form>

</body>

</HTML>

AreaSelect.aspx.cs代码

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

namespace ajaxApp

{

/// <summary>

/// AreaSelect 的摘要说明。

/// </summary>

public class AreaSelect : System.Web.UI.Page

{

protected System.Web.UI.WebControls.DropDownList DropDownList3;

protected System.Web.UI.WebControls.DropDownList DropDownList2;

protected System.Web.UI.WebControls.DropDownList DropDownList1;

private void Page_Load(object sender, System.EventArgs e)

{

Ajax.Utility.RegisterTypeForAjax(typeof(AjaxFunctions));

if (! IsPostBack)

{

this.DropDownList1.Attributes.Add("onchange","ddl_getcith(this)");

this.DropDownList2.Attributes.Add("onchange","ddl_getarea(this)");

AjaxFunctions af=new AjaxFunctions();

af.provincebind(this.DropDownList1);

}

Web 窗体设计器生成的代码

}

数据库下载：area.rar
AJAX依靠代理:Ajax.rar
原代码下载：ajaxApp.rar

posted on 2006-01-04 10:23 张宇阅读(4490) 评论(2) 编辑收藏举报

刷新页面返回顶部

zhangyu028

导航

公告

ajax实现的无刷新三级联动