启网、虚拟主机、域名注册、服务器合租
精致合租、5人、10人、15人服务器合租、freebsd合租
当前位置:站长中国 > AJAX教程 > Ajax联动下拉框的实现例子

Ajax联动下拉框的实现例子

2008 - 12 - 01  作者:  来源:  浏览:555  评论: 发布评论 问高手
推荐:启网 - 专业的主机、服务器合租提供商 17hz.net - 5年服务器合租精品服务
    

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


}


}




推荐教程