最近做一些網站程序，經常要用到多個下拉菜單選擇，看了介紹開始用AjaxPro這個控件，感覺效果不錯。以前使用過MagicAjax，很久不用了忘記了，最麻煩的就是在虛擬目錄的時候比較麻煩，呵呵，在網上也有很多，不過重要的地方經常沒提醒新手，俺也是菜鳥，高手請忽略。看到這個AjaxPro使用比較簡單，這次使用的是6.x的，最新的是7.x的，覺得6.0系列的方便，就選它了。
在重要的地方都有提示了，相信很容易看懂。
????? 首先在web.config添加這個接點 在<system.web>與</system.web>之間，如下：
?? <system.web>
??? <!--for Ajaxnet-->
??? <httpHandlers>
????? <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
??? </httpHandlers>
????<!--其他設置-->
?? </system.web>
???? 然后把AjaxPro.2.dll丟到bin文件夾，然后引用它就可以了。
??? 還是發代碼吧，麻煩死了下面代碼是 Default.aspx.cs的
using?System;
using?System.Data;
using?System.Configuration;
using?System.Data.OleDb;
using?System.Web;
using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Web.UI.WebControls.WebParts;
using?System.Web.UI.HtmlControls;

public?partial?class?_Default?:?System.Web.UI.Page
{???
????
????protected?void?Page_Load(object?sender,?EventArgs?e)
????{
????????AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));?//必要的
????????if(!IsPostBack)BindDc();
????}

????/**////?<summary>
????///?數據庫連接
????///?</summary>
????///?<returns></returns>
????public?OleDbConnection?myConn()
????{
????????string?ConnStr?=?"Provider=Microsoft.Jet.OLEDB.4.0;Data?Source="?+?System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
????????OleDbConnection?conn?=?new?OleDbConnection(ConnStr);
????????try
????????{
????????????conn.Open();
????????????return?conn;
????????}
????????catch
????????{?
????????????throw;
????????}
????}
????
????/**////?<summary>
????///?獲取下級分類
????///?</summary>
????[AjaxPro.AjaxMethod]
????public?DataSet?getNextClass(string?cid)
????{
????????//因為不希望頁面可以知道字段名稱?所以?as?txt,id?as?vol?如果是sql?ser?可以用?=?
????????//頁面獲取的?列名稱?必須跟這個一同樣?而且區分大小寫?一般都是這個地方容易疏忽了
????????//所以二級分類沒變化
????????string?sql?=?@"select?cname?as?txt,id?as?vol?from?webclass?where?parentid="?+?cid;
????????try
????????{
????????????return?getDs(sql);
????????}
????????catch
????????{
????????????//throw;
????????????return?null;
????????}
????}
????

????/**////?<summary>
????///?返回一個DataSet
????///?</summary>
????///?<param?name="SQL"></param>
????///?<returns></returns>
????public?DataSet?getDs(string?SQL)
????{
????????OleDbConnection?conn?=?myConn();
????????DataSet?Ds?=?new?DataSet();
????????OleDbDataAdapter?Da?=?new?OleDbDataAdapter(SQL,?conn);
????????try
????????{???
????????????Da.Fill(Ds);
????????????return?Ds;
????????}
????????catch
????????{
????????????return?null;
????????????//throw;
????????}

????}
????/**////?<summary>
????///?//數據綁定
????///?</summary>
????private?void?BindDc()
????{
????????//第一個
????????string?sql?=?@"select?*?from?webclass?where?Parentid=0";
????????ddl1.DataSource?=?getDs(sql);
????????ddl1.DataTextField?=?"cname";
????????ddl1.DataValueField?=?"id";
????????ddl1.DataBind();
????????if?(ddl1.DataSource?!=?null)?ddl1.Attributes.Add("onchange",?"showNext(this.options[selectedIndex].value,'ddl2');");

???????
????????//可以先判斷?DropDownList.SelectedItem.Value
????????//第二個
????????sql?=?@"select?*?from?webclass?where?parentid="?+?ddl1.SelectedItem.Value;
????????ddl2.DataSource?=?getDs(sql);
????????ddl2.DataTextField?=?"cname";
????????ddl2.DataValueField?=?"id";
????????ddl2.DataBind();
????????
????????//第三個
????????if?(ddl2.DataSource?!=?null)?ddl2.Attributes.Add("onchange",?"showNext(this.options[selectedIndex].value,'ddl3');");
????????sql?=?@"select?*?from?webclass?where?parentid="?+?ddl2.SelectedItem.Value;
????????ddl3.DataSource?=?getDs(sql);
????????ddl3.DataTextField?=?"cname";
????????ddl3.DataValueField?=?"id";
????????ddl3.DataBind();
????
????}
}
default.aspx內容：
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="Default.aspx.cs"?Inherits="_Default"?%>

<!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">
????<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
????<title>AjaxPro實現無刷新三級聯動</title>
</head>
<script?language="javascript"?type="text/javascript">
??????<!--
???????//?ACLOUD?常用JS函數
???????function?getBid(s){
??????????return?document.getElementById(s);
????????}
????????function?getBmc(s){
??????????return?document.getElementByName(s);
????????}
????????
???????//顯示分類列表
???????function?showNext(sid,obj)
????????{?
??????????if(sid==null?||?sid==""?||?sid.length<1)return;
??????????var?slt?=getBid(obj);
??????????var?v?=?_Default.getNextClass(sid).value;?//?類的名稱
??????????//alert(v);
??????????//return;
??????????if?(v?!=?null){??????
??????????if(v?!=?null?&&?typeof(v)?==?"object"?&&?v.Tables?!=?null)
????????????????????{????????
????????????????????????slt.length?=?0;
????????????????????????slt.options.add(new?Option("請選擇",0));
????????????????????????//加了個“請選擇”主要為了觸發onchange事件
????????????????????????if(obj=="ddl2"){
????????????????????????getBid("ddl3").options.length=0;
????????????????????????getBid("ddl3").options.add(new?Option("請選擇",0));
????????????????????????}????????????
????????????????????????for(var?i=0;?i<v.Tables[0].Rows.length;?i++)
　　　　????????????????{
　　　　????????????????????var?txt?=?v.Tables[0].Rows[i].txt;?//這個地方需要注意區分大小寫
　　　　　　????????????????var?vol?=?v.Tables[0].Rows[i].vol;?//跟dataset表的列名稱要一致
　　　　　　????????????????slt.options.add(new?Option(txt,vol));
　　　　????????????????}
????????????????????}
???????????}????
???????????return;
????????}
????????-->
</script>
<body>
????<form?id="form1"?runat="server">
????<div>
??????<table?width="500"?border="0"?align="center"?cellpadding="0"?cellspacing="0">
????????<tr>
??????????<td?width="99">&nbsp;</td>
??????????<td?width="401">
??????????????城市<asp:DropDownList?ID="ddl1"?runat="server">
??????????????</asp:DropDownList>
??????????????區域<asp:DropDownList?ID="ddl2"?runat="server">
??????????????</asp:DropDownList>
??????????????花園<asp:DropDownList?ID="ddl3"?runat="server">
??????????????</asp:DropDownList></td>
????????</tr>
????????<tr>
??????????<td>&nbsp;</td>
??????????<td>&nbsp;</td>
????????</tr>
????????<tr>
??????????<td>&nbsp;</td>
??????????<td>&nbsp;</td>
????????</tr>
??????</table>
????
????</div>
????</form>
</body>
</html> 相關文件
http://files.cnblogs.com/asboy/AjaxDropDownlist.rar

轉載于:https://www.cnblogs.com/lyfeixue/archive/2007/05/05/736039.html

總結

以上是生活随笔為你收集整理的轻松实现无刷新三级联动菜单[VS2005与AjaxPro]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。