Ajax联动下拉框的实现例子

　2007-03-30 11:16:39　来源：WEB开发网　　　

核心提示：这是采用Ajax技术,刷新是肯定的,是在我们察觉不到的速度完成.xmlHTTP牺牲页面的方法,我们之所以看不见刷新,是因为所有的工作都是在牺牲页面上进行的,里面"翻江倒海"的"折腾",我们看不见,效率上差些!AjaxPRo.dll 下载地址 http://ajaxpro.sch

这是采用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">

</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; i<ds.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=localhost\\PMSERVER;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");
　 }

}