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

 

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

< httpHandlers >
    < add verb = " * "  path = " *.ashx "  type = " AjaxPro.AjaxHandlerFactory,AjaxPro "   />
   </ httpHandlers >

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

< add key = " ConnectionString "  value = " Provider=Microsoft.Jet.OLEDB.4.0;Data Source=d:/Test/AjaxTest/DB/db.mdb;User ID='admin'; "   />

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 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {    
            this.Button1.Click += new System.EventHandler(this.Button1_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion

        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#region GetPovinceList
        public static DataSet GetPovinceList()
        {
            string sql="select * from province";
            return GetDataSet(sql);
        }
        #endregion

        GetCityList#region GetCityList
        [AjaxPro.AjaxMethod]
        public DataSet GetCityList(int povinceid)
        {
            string sql="select * from city where father='"+povinceid+"'";
            return GetDataSet(sql);            
        }
        #endregion

        GetAreaList#region GetAreaList
        [AjaxPro.AjaxMethod]
        public DataSet GetAreaList( int cityid )
        {
            string sql="select * from area where father='"+cityid+"'";
            return GetDataSet(sql);            
        }
        #endregion
    
        GetDataSet#region GetDataSet
        public static DataSet GetDataSet( string sql )
        {
            string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
            OleDbDataAdapter sda = new OleDbDataAdapter( sql,ConnectionString );
            DataSet ds = new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

    }//end class
}

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

Feedback

以上内容来自AJAX实例站： http://www.ajaxsamples.cn/html/10903.html