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

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

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

      下面是.aspx:

     

<% @ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="testMutiDropdownlist.aspx.cs" Inherits="testMutiDropdownlist"  %>

<! 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 成员#region ICallbackEventHandler 成员
    private string resualt;
    public string GetCallbackResult()
    {
        return resualt;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        if (eventArgument.Length == 1)//绑定第二级、三级
        {
            resualt = ddl2Bind(eventArgument);
            resualt += ";";
            resualt += ddl3Bind(resualt.Substring(0,resualt.IndexOf("|")));
        }
        else if (eventArgument.Length==0)
        {
            resualt = ";";
        }
        else
        {
            resualt = ddl3Bind(eventArgument);
        }
    }

    #endregion
}

 

脚本类,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