轻松实现无刷新三级联动菜单[VS2005与AjaxPro]
<P>最近做一些网站程序,经常要用到多个下拉菜单选择,看了介绍开始用AjaxPro这个控件,感觉效果不错。以前使用过MagicAjax,很久不用了忘记了,最麻烦的就是在虚拟目录的时候比较麻烦,呵呵,在网上也有很多,不过重要的地方经常没提醒新手,俺也是菜鸟,高手请忽略。看到这个 AjaxPro使用比较简单,这次使用的是6.x的,最新的是7.x的,觉得6.0系列的方便,就选它了。<br>在重要的地方都有提示了,相信很容易看懂。<br> 首先在web.config添加这个接点 在<system.web>与</system.web>之间,如下:<br> <system.web><br> <!--for Ajaxnet--><br> <httpHandlers><br> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/><br> </httpHandlers><br> <!--其他设置--><br> </system.web><br> 然后把AjaxPro.2.dll丢到bin文件夹,然后引用它就可以了。<br> 还是发代码吧,麻烦死了下面代码是 Default.aspx.cs的</P><P><br>using System;<br>using System.Data;<br>using System.Configuration;<br>using System.Data.OleDb;<br>using System.Web;<br>using System.Web.UI;<br>using System.Web.UI.WebControls;<br>using System.Web.UI.WebControls.WebParts;<br>using System.Web.UI.HtmlControls;</P>
<P>public partial class _Default : System.Web.UI.Page<br>{ <br> <br> protected void Page_Load(object sender, EventArgs e)<br> {<br> AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); //必要的<br> if(!IsPostBack)BindDc();<br> }</P>
<P> /**//// <summary><br> /// 数据库连接 </P>
<P> /// </summary><br> /// <returns></returns><br> public OleDbConnection myConn()<br> {<br> string ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);<br> OleDbConnection conn = new OleDbConnection(ConnStr);<br> try<br> {<br> conn.Open();<br> return conn;<br> }<br> catch<br> {<br> throw;<br> }<br> }<br> <br> /**//// <summary><br> /// 获取下级分类<br> /// </summary><br> [AjaxPro.AjaxMethod]<br> public DataSet getNextClass(string cid)<br> {<br> //因为不希望页面可以知道字段名称 所以 as txt,id as vol 如果是sql ser 可以用 =<br> //页面获取的 列名称 必须跟这个一同样 而且区分大小写 一般都是这个地方容易疏忽了<br> //所以二级分类没变化<br> string sql = @"select cname as txt,id as vol from webclass where parentid=" + cid;<br> try<br> {<br> return getDs(sql);<br> }<br> catch<br> {<br> //throw;<br> return null;<br> }<br> }<br> </P>
<P> /**//// <summary><br> /// 返回一个DataSet<br> /// </summary><br> /// <param name="SQL"></param><br> /// <returns></returns><br> public DataSet getDs(string SQL)<br> {<br> OleDbConnection conn = myConn();<br> DataSet Ds = new DataSet();<br> OleDbDataAdapter Da = new OleDbDataAdapter(SQL, conn);<br> try<br> { <br> Da.Fill(Ds);<br> return Ds;<br> }<br> catch<br> {<br> return null;<br> //throw;<br> }</P>
<P> }<br> /**//// <summary><br> /// //数据绑定<br> /// </summary><br> private void BindDc()<br> {<br> //第一个<br> string sql = @"select * from webclass where Parentid=0";<br> ddl1.DataSource = getDs(sql);<br> ddl1.DataTextField = "cname";<br> ddl1.DataValueField = "id";<br> ddl1.DataBind();<br> if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");</P>
<P> <br> //可以先判断 DropDownList.SelectedItem.Value<br> //第二个<br> sql = @"select * from webclass where parentid=" + ddl1.SelectedItem.Value;<br> ddl2.DataSource = getDs(sql);<br> ddl2.DataTextField = "cname";<br> ddl2.DataValueField = "id";<br> ddl2.DataBind();<br> <br> //第三个<br> if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");<br> sql = @"select * from webclass where parentid=" + ddl2.SelectedItem.Value;<br> ddl3.DataSource = getDs(sql);<br> ddl3.DataTextField = "cname";<br> ddl3.DataValueField = "id";<br> ddl3.DataBind();<br> <br> }<br>}</P>
<P>default.aspx内容:</P>
<P><br><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %></P>
<P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></P>
<P><html xmlns="http://www.w3.org/1999/xhtml" ><br><head runat="server"><br> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br> <title>AjaxPro实现无刷新三级联动</title><br></head><br><script language="javascript" type="text/javascript"><br> <!--<br> // ACLOUD 常用JS函数<br> function getBid(s){<br> return document.getElementById(s);<br> }<br> function getBmc(s){<br> return document.getElementByName(s);<br> }<br> <br> //显示分类列表<br> function showNext(sid,obj)<br> {<br> if(sid==null || sid=="" || sid.length<1)return;<br> var slt =getBid(obj);<br> var v = _Default.getNextClass(sid).value; // 类的名称<br> //alert(v);<br> //return;<br> if (v != null){ <br> if(v != null && typeof(v) == "object" && v.Tables != null)<br> { <br> slt.length = 0;<br> slt.options.add(new Option("请选择",0));<br> //加了个“请选择”主要为了触发onchange事件<br> if(obj=="ddl2"){<br> getBid("ddl3").options.length=0;<br> getBid("ddl3").options.add(new Option("请选择",0));<br> } <br> for(var i=0; i<v.Tables[0].Rows.length; i++)<br> {<br> var txt = v.Tables[0].Rows[i].txt; //这个地方需要注意区分大小写<br> var vol = v.Tables[0].Rows[i].vol; //跟dataset表的列名称要一致<br> slt.options.add(new Option(txt,vol));<br> }<br> }<br> } <br> return;<br> }<br> --><br></script><br><body><br> <form id="form1" runat="server"><br> <div><br> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"><br> <tr><br> <td width="99">&nbsp;</td><br> <td width="401"><br> 城市<asp:DropDownList ID="ddl1" runat="server"><br> </asp:DropDownList><br> 区域<asp:DropDownList ID="ddl2" runat="server"><br> </asp:DropDownList><br> 花园<asp:DropDownList ID="ddl3" runat="server"><br> </asp:DropDownList></td><br> </tr><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr><br> </table><br> <br> </div><br> </form><br></body><br></html><br>相关文件<br>http://www.cnblogs.com/Files/asboy/AjaxDropDownlist.rar<br>代码文件于2005-5-13更新过 列出了取值的方法</P>
[align=right][color=#000066][此贴子已经被静夜思于2007-8-23 9:49:08编辑过][/color][/align]
回复:(vcrhome)轻松实现无刷新三级联动菜单[VS2005...
<P>顶!!</P> 顶贴! 谢谢了。 <P>看看</P> <P>好东西[em17][em01]</P> <P>能做一个,无刷新,更新数据的例子么,SQL数据库的?<BR>想学习学习,多谢了。</P> <P>是不错,但有一个问题就是,不能有提交之类的按扭,另一点是如果你数据库里面有一个默认选项,打开页面时想让下拉列表选择项显示的是默认选项,怎么办?</P> 好 好 谢谢楼主页:
[1]
