导航

利用ICallbackEventHandler实现dropdownlist的无刷新多级联动

Posted on 2008-07-22 20:24  jg_chen  阅读(409)  评论(0)  编辑  收藏  举报

      asp.net2.0以后引进的ICallbackEventHandler接口,给我们带来了诸多方便,客户端回调带来的影响是巨大的!像投票,推荐等网上常见的功能利用ICallbackEventHandler接口就能很好的实现.

      今天我要介绍一下利用ICallbackEventHandler接口实现多级联动.

      下面是.aspx:

     

<%%>

<!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>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddl1" runat="server"  Style="position: relative">
        </asp:DropDownList>
        <asp:DropDownList ID="ddl2" runat="server"  Style="position: relative">
        </asp:DropDownList>
        <asp:DropDownList ID="ddl3" runat="server" Style="position: relative">
        </asp:DropDownList>
    </form>
</body>
</html>

 

下面是.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 System.Data.SqlClient;

public partial class testMutiDropdownlist : System.Web.UI.Page,ICallbackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
        callback cb = new callback();
        cb.RegMutiDropdownlistScript(this.Page);
        this.ddl1.Attributes.Add("onchange", "BeginCallServer(this)");
        this.ddl2.Attributes.Add("onchange", "BeginCallServer(this)");
        if (!IsPostBack)
        { 
            
            this.ddl1.DataSource = getddl1();
            ddl1.DataTextField = "d1";
            ddl1.DataValueField = "d1";
            this.ddl1.DataBind();
            ddl1.Items.Insert(0, "");
        }
        

    }
    public DataTable getddl1()
    {
        Datacces.runsp rs = new Datacces.runsp();
        rs.Database = Datacces.connstr.xml2connstr("test01");
        DataTable dt = new DataTable();
        rs.dtCreate("ddl1", out dt);
        int l = dt.Rows.Count;
        return dt;
    }
    public DataTable getddl2(string d1)
    {
        Datacces.runsp rs = new Datacces.runsp();
        rs.Database = Datacces.connstr.xml2connstr("test01");
        SqlParameter[] param ={ 
            rs.CreateInParam("@d1",SqlDbType.NVarChar,50,d1)
        };
        DataTable dt = new DataTable();
        rs.dtCreate("ddl2",param, out dt);
        return dt;
    }
    public DataTable getddl3(string d2)
    {
        Datacces.runsp rs = new Datacces.runsp();
        rs.Database = Datacces.connstr.xml2connstr("test01");
        SqlParameter[] param ={ 
            rs.CreateInParam("@d2",SqlDbType.NVarChar,50,d2)
        };
        DataTable dt = new DataTable();
        rs.dtCreate("ddl3", param, out dt);
        return dt;
    }
    private string ddl2Bind(string d1)
    {
        DataTable dt = getddl2(d1);
        string str = "";
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            str += dt.Rows[i][0] + "|";
        }
        return str;
    }
    private string ddl3Bind(string d2)
    {
        DataTable dt = getddl3(d2);
        string str = "";
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            str += dt.Rows[i][0] + "|";
        }
        return str;
    }

    ICallbackEventHandler 成员
}

 

脚本类,callback.cs:

 

 

using System;
using System.Data;
using System.Configuration;
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;

/// <summary>
/// callback 的摘要说明
/// </summary>
public class callback
{
    public callback()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }
    /// <summary>
    /// 注册客户端回调脚本,指定控件调用客户端函数BeginCallServer(inValue),无须返回服务器端信息
    /// 如:指定控件可以这样this.DropDownList1.Attributes.Add("onchange", "BeginCallServer(this.value);")调用客户端函数
    /// </summary>
    /// <param name="page">页面page对象</param>
       public void RegMutiDropdownlistScript(Page page)
    {
        string strscript = @"function BeginCallServer(e){
                                  for(var i=0;i<e.options.length;i++){
                                      if(e.options[i].selected==true){
                                      CallServer(e.options[i].value,""""); break;
                                      }
                                  }
                            }
                            function ReceiveServerData(rValue){
                                var son=form1.elements[""ddl2""];
                                if(rValue.indexOf("";"")>0){
                                    var s1=(rValue.substr(0,rValue.indexOf("";"")-1)).split(""|"");
                                    son.length=s1.length;
                                    for(var i=0;i<s1.length;i++){
                                        son.options[i]=new Option(s1[i],s1[i]);
                                    }
                                }
                                if(rValue=="";""){ 
                                    son.length=0;
                                    son.options[0]=new Option("""","""");
                                }
                                var child=form1.elements[""ddl3""];
                                if(rValue.length>1){
                                    var s2=(rValue.substring(rValue.indexOf("";"")+1,rValue.length-1)).split(""|"");
                                    child.length=s2.length;
                                    for(var i=0;i<s2.length;i++){
                                        child.options[i]=new Option(s2[i],s2[i]);
                                    }
                                } 
                                else{ 
                                    child.length=0;
                                    child.options[0]=new Option("""","""");
                                } 
                            }";
        page.ClientScript.RegisterClientScriptBlock(page.GetType(), "strscript" + System.DateTime.Now.ToString("hhmmss"), strscript, true);
        string cbReference = page.ClientScript.GetCallbackEventReference(page, "arg", "ReceiveServerData", "context");
        string callbackScript = "function CallServer(arg, context){" + cbReference + "} ;";
        page.ClientScript.RegisterClientScriptBlock(page.GetType(), "callbackScript" + System.DateTime.Now.ToString("hhmmss"), callbackScript, true);
 
    }
}

数据结构:

d1              d2              d3

1                11              111

1                11              112

1                 12             121

1                12              122

2                 21             211

2                21              212

2                22               221

2                22               222