编程论坛's Archiver

vcrhome 发表于 2007-7-18 20:03

轻松实现无刷新三级联动菜单[VS2005与AjaxPro]

<P>最近做一些网站程序,经常要用到多个下拉菜单选择,看了介绍开始用AjaxPro这个控件,感觉效果不错。以前使用过MagicAjax,很久不用了忘记了,最麻烦的就是在虚拟目录的时候比较麻烦,呵呵,在网上也有很多,不过重要的地方经常没提醒新手,俺也是菜鸟,高手请忽略。看到这个 AjaxPro使用比较简单,这次使用的是6.x的,最新的是7.x的,觉得6.0系列的方便,就选它了。<br>在重要的地方都有提示了,相信很容易看懂。<br>      首先在web.config添加这个接点 在&lt;system.web&gt;与&lt;/system.web&gt;之间,如下:<br>   &lt;system.web&gt;<br>    &lt;!--for Ajaxnet--&gt;<br>    &lt;httpHandlers&gt;<br>      &lt;add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/&gt;<br>    &lt;/httpHandlers&gt;<br>     &lt;!--其他设置--&gt;<br>   &lt;/system.web&gt;<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>    /**//// &lt;summary&gt;<br>    /// 数据库连接 </P>
<P>    /// &lt;/summary&gt;<br>    /// &lt;returns&gt;&lt;/returns&gt;<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>    /**//// &lt;summary&gt;<br>    /// 获取下级分类<br>    /// &lt;/summary&gt;<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>    /**//// &lt;summary&gt;<br>    /// 返回一个DataSet<br>    /// &lt;/summary&gt;<br>    /// &lt;param name="SQL"&gt;&lt;/param&gt;<br>    /// &lt;returns&gt;&lt;/returns&gt;<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>    /**//// &lt;summary&gt;<br>    /// //数据绑定<br>    /// &lt;/summary&gt;<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>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;</P>
<P>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</P>
<P>&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;<br>&lt;head runat="server"&gt;<br>    &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<br>    &lt;title&gt;AjaxPro实现无刷新三级联动&lt;/title&gt;<br>&lt;/head&gt;<br>&lt;script language="javascript" type="text/javascript"&gt;<br>      &lt;!--<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&lt;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 &amp;&amp; typeof(v) == "object" &amp;&amp; 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&lt;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>        --&gt;<br>&lt;/script&gt;<br>&lt;body&gt;<br>    &lt;form id="form1" runat="server"&gt;<br>    &lt;div&gt;<br>      &lt;table width="500" border="0" align="center" cellpadding="0" cellspacing="0"&gt;<br>        &lt;tr&gt;<br>          &lt;td width="99"&gt;&amp;nbsp;&lt;/td&gt;<br>          &lt;td width="401"&gt;<br>              城市&lt;asp:DropDownList ID="ddl1" runat="server"&gt;<br>              &lt;/asp:DropDownList&gt;<br>              区域&lt;asp:DropDownList ID="ddl2" runat="server"&gt;<br>              &lt;/asp:DropDownList&gt;<br>              花园&lt;asp:DropDownList ID="ddl3" runat="server"&gt;<br>              &lt;/asp:DropDownList&gt;&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>          &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>          &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>          &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>          &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>        &lt;/tr&gt;<br>      &lt;/table&gt;<br>   <br>    &lt;/div&gt;<br>    &lt;/form&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<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 发表于 2007-7-20 19:06

回复:(vcrhome)轻松实现无刷新三级联动菜单[VS2005...

<P>顶!!</P>

vcrhome 发表于 2007-8-3 09:23

顶贴!

黑白不分 发表于 2007-8-25 14:31

谢谢了。

HelloFuck 发表于 2007-9-6 12:27

<P>看看</P>

梦灵儿 发表于 2007-9-14 20:09

<P>好东西[em17][em01]</P>

dhdhzzw 发表于 2007-9-17 09:26

<P>能做一个,无刷新,更新数据的例子么,SQL数据库的?<BR>想学习学习,多谢了。</P>

xqyy 发表于 2007-10-8 17:49

<P>是不错,但有一个问题就是,不能有提交之类的按扭,另一点是如果你数据库里面有一个默认选项,打开页面时想让下拉列表选择项显示的是默认选项,怎么办?</P>

qqqqqqq333 发表于 2007-12-20 20:42

好 好 谢谢楼主

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.