zhangyu028

导航

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>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
                <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" cellSpacing="1"
                    cellPadding="1" width="300" border="1">
                    <TR>
                        <TD><FONT face="宋体">省份</FONT></TD>
                        <TD>
                            <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList></TD>
                    </TR>
                    <TR>
                        <TD><FONT face="宋体">市</FONT></TD>
                        <TD>
                            <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList></TD>
                    </TR>
                    <TR>
                        <TD><FONT face="宋体">县</FONT></TD>
                        <TD>
                            <asp:DropDownList id="DropDownList3" runat="server"></asp:DropDownList></TD>
                    </TR>
                </TABLE>
                <script language="javascript">
                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  张 宇  阅读(4486)  评论(2)  编辑  收藏  举报