Ajax联动下拉框的实现例子

【 tulaoshi.com - Web开发 】

　　这是采用ajax技术,刷新是肯定的,是在我们察觉不到的速度完成.XMLHTTP牺牲页面的方法,我们之所以看不见刷新,是因为所有的工作都是在牺牲页面上进行的,里面"翻江倒海"的"折腾",我们看不见,效率上差些!

　　AjaxPro.dll 下载地址  http://ajaxpro.schwarz-interactive.de/download/ajaxpro.zip

　　Web.Config
　　？xml version="1.0"？
　　configuration
　　 system.web
　　      httpHandlers
　　   add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /
　　   add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/
　　  /httpHandlers
　　 /system.web
　　/configuration

　　AjaxTest.aspx

　　%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits="AjaxTest" %

　　!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

　　html xmlns="http://www.w3.org/1999/xhtml"
　　head runat="server"
　　    title无标题页/title

　　/head

　　body
　　script language="javascript" type="text/javascript"
　　function areaResult()
　　{
　　var area=document.getElementById("DropDownList1");
　　//alert(area.value);
　　AjaxTest.GetCityList(area.value,get_city_Result_CallBack);
　　}
　　function get_city_Result_CallBack(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; ids.Tables[0].Rows.length; i++)
　　　 {
　　 var name=ds.Tables[0].Rows[i].name;
　　 var id=ds.Tables[0].Rows[i].id;
　　 document.all("DropDownList2").options.add(new Option(name,id));
　　　 }
　　　 //document.all("TextBox1").value="";　　
　　 }
　　}
　　return
　　}

　　/script
　　  form id="form1" runat="server"
　　        
　　 asp:DropDownList ID="DropDownList1" runat="server"
　　        /asp:DropDownList
　　        asp:DropDownList ID="DropDownList2" runat="server"
　　        /asp:DropDownList 
　　      br /
　　    /form
　　/body
　　/html

　　AjaxTest.cs

　　using System;
　　using System.Data;
　　using System.Configuration;
　　using System.Collections;
　　using System.Web;
　　using System.Web.Security;
　　using System.Web.UI;
　　using System.Web.UI.WebControls;
　　using System.Web.UI.WebControls.WebParts;
　　using System.Web.UI.HtmlControls;
　　using MeetWeb;
　　public partial class AjaxTest : System.Web.UI.Page
　　{
　　    protected void Page_Load(object sender, EventArgs e)
　　    {
　　       AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxTest));
　　       if (!Page.IsPostBack)
　　       {
　　           BindData();

　　       }
　　    }
　　    private void BindData()
　　    {
　　        DataSet ds = new DataSet();
　　          String sql = "Select id,name from test";
　　          try
　　          {
　　              ds = GetDataSet(sql, "test");
　　              this.DropDownList1.DataSource = ds.Tables[0];
　　              this.DropDownList1.DataTextField = "name";
　　              this.DropDownList1.DataValueField = "id";
　　              this.DropDownList1.DataBind();
　　              this.DropDownList1.Attributes.Add("onclick", "areaResult();");
　　          }
　　          catch (Exception ex)
　　          {
　　              Response.Write(ex.Message);
　　          }
　　    }

　　    public static DataSet GetDataSet(string sql,string aa)
　　    {
　　        MeetWeb.SqlDataBase a = new MeetWeb.SqlDataBase("server=localhostPMSERVER;uid=sa;pwd=sa;database=test");
　　        DataSet ds = new DataSet();
　　        ds=a.CreateSet(sql, aa);
　　        return ds;
　　    }

　　    [AjaxPro.AjaxMethod]
　　    public DataSet GetCityList(int id)
　　    {
　　        string sql = "select name from test where id='" + id + "'";
　　        return GetDataSet(sql,"test");
　　    }

　　
　　}