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

 Ajax使用初步，实现步骤
1.把Ajax.dll copy到应用系统bin目录下，然后在工程引用中引用Ajax.dll，如果没有的话可以下载Ajax.dll
2.配置web.config，添加如下信息

< httpHandlers >
   < add verb = " POST,GET "  path = " ajax/*.ashx "  type = " Ajax.PageHandlerFactory, Ajax "   />
</ httpHandlers >

3.假设应用系统叫Document，目录格式为Pages\AjaxTest

// [Ajax.AjaxMethod]
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public   static   string  GetNIVNumber( string  str)
{
 return str;
}

4.在Pages\AjaxTest下建立页面WebForm1.aspx
5.html代码

< HTML >
     < HEAD >
         < title > Ajax实现无刷新三联动下拉框 </ 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 " >             
             // 城市------------------------------
            function cityResult() 
             { 
                var city=document.getElementById("DropDownList1");
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
            }
            
            function get_city_Result_CallBack(response)
             {
                if (response.value != null)
                {                    
                    //debugger;
                    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
            }
             // 市区----------------------------------------
            function areaResult() 
             { 
                var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }
            function get_area_Result_CallBack(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));
　　　　                }                
                    }
                }
                return
            }
            function getData()
             {
                var province=document.getElementById("DropDownList1");
                var pindex = province.selectedIndex;
                var pValue = province.options[pindex].value;
                var pText  = province.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;
                
                var txt=document.getElementById("TextBox1");                                

                document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
            }
         </ SCRIPT >
     </ HEAD >
     < body ms_positioning = " GridLayout " >
         < form id = " Form1 "  method = " post "  runat = " server " >
             < TABLE id = " Table1 "  style = " Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px "  cellSpacing = " 1 "
                cellPadding = " 1 "  width = " 300 "  border = " 1 "  bgColor = " #ccff66 " >
                 < TR >
                     < TD > 省市 </ TD >
                     < TD >< asp:dropdownlist id = " DropDownList1 "  runat = " server " ></ asp:dropdownlist ></ TD >
                 </ TR >
                 < TR >
                     < TD > 城市 </ TD >
                     < TD >< asp:dropdownlist id = " DropDownList2 "  runat = " server " ></ asp:dropdownlist ></ TD >
                 </ TR >
                 < TR >
                     < TD > 市区 </ TD >
                     < TD >< asp:dropdownlist id = " DropDownList3 "  runat = " server " ></ asp:dropdownlist ></ TD >
                 </ TR >
             </ TABLE >
             < asp:TextBox id = " TextBox1 "  style = " Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px "  runat = " server "
                Width = " 424px " ></ asp:TextBox >< INPUT style = " Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px "
                type = " button "  value = " test "  onclick = " getData(); " >
         </ form >
     </ body >
</ HTML >

6. cs代码

public   class  WebForm1 : 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.DropDownList DropDownList3;
    
        private void Page_Load(object sender, System.EventArgs e)
        {  //注册,AjaxMethod.cs方法所在的命名空间
            Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
            if(!Page.IsPostBack)
            {
                this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
                this.DropDownList1.DataTextField="province";
                this.DropDownList1.DataValueField="provinceID";
                this.DropDownList1.DataBind();
                
                this.DropDownList1.Attributes.Add("onclick","cityResult();");
                this.DropDownList2.Attributes.Add("onclick","areaResult();");
            }
        }

        Web Form Designer generated codeWeb Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//**//**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion        
    }

7.在Pages\AjaxTest下建立cs文件AjaxMethod.cs(业务逻辑类)，添加如下方法

using  System;
using  System.Data;
using  System.Data.SqlClient;
namespace  AjaxTest
{
    /**//**//**//// <summary>
    /// Summary description for AjaxMethod.
    /// </summary>
    public class AjaxMethod
    {
        GetPovinceListGetPovinceList#region GetPovinceList
        public static DataSet GetPovinceList()
        {
            string sql="select * from povince";
            return GetDataSet(sql);
        }
        #endregion

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

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

8.  Ajax实现无刷新三级连动完整源代码(附数据库)

转载于:https://www.cnblogs.com/zhouxiaxue/archive/2006/05/11/396906.html