AJAX实现无刷新三联动下拉框

博客园 - wander

代码编写规范说明书（c#.net与asp.net）转常用正则表达式 b/s开发常用javaScript技术分类在c#中如何在WINDOWS FORM 中访问超级链接? - wander 收藏 Meta标签详解在ASP.NET中上传图片并生成带版权信息的缩略图 ASP.NET 数据绑定常用代码 (转) Ajax无刷新实现图片切换特效在.NET下多层架构企业管理系统的开发浏览器滚动条的参数总结在ASP.NET中实现AJAX 初识AJAX 基于动态页面的静态页面实现 Visual C#实现Windows信使服务 c#.net常用的小函数和方法集 DataGrid使用心得 ASP.NET之精通弹出窗口利用OWC生成统计图表(代码+注释)

AJAX实现无刷新三联动下拉框

wander · 2006-08-14 · via 博客园 - wander

1、webconfig设置
(1)在system.web区添加:

(2)在configuration区添加数据库连接字符串:

2、html代码：

<%@ Page language="c#" Codebehind="DropDownList.aspx.cs" AutoEventWireup="false" Inherits="AjaxTest.DropDownList" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>DropDownList</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <script language="javascript" type="text/javascript">
            function cityResult()//城市
            {
                var city = document.getElementById( "DropDownList1" );
                AjaxTest.AjaxMethod.GetCityList( city.value,callback_GetCityList )
            }
            function callback_GetCityList( response )//回调
            {
                if( response.value != null )
                {
                    document.all( "DropDownList2" ).length = 0;
                    var ds = response.value;
                    if( ds != null && typeof( ds ) == "object" && ds.Tables != null )
                    {
                        for( var i = 0; i< ds.Tables[0].Rows.length; i ++ )
                        {
                            var name = ds.Tables[0].Rows[i].city;
　　　　　　                var id = ds.Tables[0].Rows[i].cityID;
　　　　　　                document.all("DropDownList2").options.add( new Option( name,id ) );
                        }
                    }
                }
                return areaResult();
            }
            function areaResult()//县，区
            {
                var area = document.getElementById( "DropDownList2" );
                AjaxTest.AjaxMethod.GetAreaList( area.value,callback_GetAreaList );
            }
            function callback_GetAreaList( response )
            {
                if( response.value != null )
                {
                    document.all( "DropDownList3" ).length = 0;
                    var ds = response.value;
                    if( ds != null && typeof( ds ) == "object" && ds.Tables != null )
                    {
                        for( var i = 0; i< ds.Tables[0].Rows.length; i ++ )
                        {
                            var name = ds.Tables[0].Rows[i].area;
　　　　　　                var id = ds.Tables[0].Rows[i].areaID;
　　　　　　                document.all("DropDownList3").options.add( new Option( name,id ) );
                        }
                    }
                }

            }
            function GetData()
            {
                var provnice = document.getElementById( "DropDownList1" );
                var pindex = provnice.selectedIndex;
                var pvalue = provnice.options[pindex].value;
                var ptext = provnice.options[pindex].text;

                var city = document.getElementById( "DropDownList2" );
                var cindex = city.selectedIndex;
                var cvalue = city.options[cindex].value;
                var ctext = city.options[cindex].text;

                var area = document.getElementById( "DropDownList3" );
                var aindex = area.selectedIndex;
                var avalue = area.options[aindex].value;
                var atext = area.options[aindex].text;

                document.getElementById( "TextBox1" ).innerText = "省：" + ptext + "||  市：" + ctext + "||  县，区： " + atext;

            }
        </script>
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <P><asp:dropdownlist id="DropDownList1" runat="server" Width="150px"></asp:dropdownlist><br>
                <asp:dropdownlist id="DropDownList2" runat="server" Width="150px"></asp:dropdownlist><br>
                <asp:dropdownlist id="DropDownList3" runat="server" Width="150px"></asp:dropdownlist><br>
                <br>
                <INPUT type="button" value="显示所选数据" onclick="GetData();">
                <asp:TextBox id="TextBox1" runat="server" Width="688px"></asp:TextBox></P>
            <P>
                <asp:Button id="Button1" runat="server" Text="Button"></asp:Button></P>
        </form>
    </body>
</HTML>

３、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 AjaxTest
{
    /// <summary>
    /// DropDownList 的摘要说明。
    /// </summary>
    public class DropDownList : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DropDownList DropDownList1;
        protected System.Web.UI.WebControls.DropDownList DropDownList2;
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.Button Button1;
        protected System.Web.UI.WebControls.DropDownList DropDownList3;

        private void Page_Load(object sender, System.EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax( typeof( AjaxMethod ) );
            // 在此处放置用户代码以初始化页面
            if( !IsPostBack )
            {
                this.DropDownList1.DataSource = AjaxMethod.GetPovinceList();
                this.DropDownList1.DataTextField = "province";
                this.DropDownList1.DataValueField = "provinceID";
                this.DropDownList1.DataBind();

                this.DropDownList1.Attributes.Add( "onchange","cityResult();" );
                this.DropDownList2.Attributes.Add( "onchange","areaResult();" );
            }
        }

        Web 窗体设计器生成的代码

        private void Button1_Click(object sender, System.EventArgs e)
        {
            string aa = Request.Form["DropDownList1"]+ Request.Form["DropDownList2"] + Request.Form["DropDownList3"];
        }
    }
}

4、AjaxMethod方法类库:

using System;
using System.Data;
using System.Data.OleDb;

namespace AjaxTest
{
    /// <summary>
    /// AjaxMethod 的摘要说明。
    /// </summary>
    public class AjaxMethod
    {
        public AjaxMethod()
        {
            //
            // TODO: 在此处添加构造函数逻辑
            //
        }
        GetPovinceList

        GetCityList

        GetAreaList

        GetDataSet

    }//end class
}

5、数据库文件:
/Files/wander/db.rar

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - wander