zoukankan      html  css  js  c++  java
  • 基于ICallbackEventHandler的轻量级Ajax方式

    cs:

    function rServer(arg, context) {
    
          //这里处理回调后的结果
    
    }
    
    function raiseEvent(arg, context) 
    
    {    //这里为arg添加参数
    
       <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>; 
    
    } 
    

    2、 在页面后端,需要继承自ICallbackEventHandler接口,然后实现

    RaiseCallbackEvent(string eventArgument)和GetCallbackResult()两个方法,其中前面一个主要是针对前台通过arg传来的参数,进行处理;后面一个主要是将结果返回。

    页面调用的图例化调用流程如下:

     

            光说不练,不如不干,下面以两个示例来说明其使用方法,第一个就是通过Ajax聊天室来说明,第二个就通过JQuery的TreeView控件来说明,首先是第一个:

    <script type="text/javascript">
            function checkNick(){
                var _val = $("#txtNick").val();
                var _say=$("#txtSay").val();
                if (_val == "") {
                    alert("昵称不能为空!");
                    return;
                }
                if(_say=="")
                {
                    alert("发言不能为空!");
                    return;
                }
            }
            function rServer(arg, context) {
            /***********************************
            这个是回调成功后的处理函数,相当于上面图片流程中的(4),注意,arg参数就是返回的内容
            ****************************/
                $("#chartMain").html(arg);
            }
    
            function raiseEvent(arg, context) {
            /***********************************
            本函数主要是发起ajax请求,相当于上面图片流程中的(1),注意,arg参数
            ****************************/
                checkNick();
                arg=$("#txtNick").val()+"|"+$("#txtSay").val();
                <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;  
            }
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="chartMain"></div>
        <div id="chartUser">
        <ul>
            <li>请输入昵称:</li>
            <li><input id="txtNick" type="text" /></li>
            <li>请发言:<input id="txtSay" type="text" /></li>
            <li><input id="btnSay" type="button" value="请你发言" onclick="raiseEvent();" /></li></ul>
        </div>
        </form>
    </body>
    

    cs;

    public partial class ChartRoom : System.Web.UI.Page,ICallbackEventHandler
    {
    
        public static string str;
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        /****************
         * 这个就是将处理完成的结果返回到前台,相当于图片流程(3)中的秒速
         * *********************/
        public string GetCallbackResult()
        {
            return str;
        }
    
    
        /****************
         * 这个就是处理的函数,接受前台传过来的arg参数的值,然后进行处理,相当于图片流程(2)所描述
         * **********************/
        public void RaiseCallbackEvent(string eventArgument)
        {
            if (!String.IsNullOrEmpty(eventArgument))
            {
                string[] _str = eventArgument.Split('|');
                string sql = "Insert into ChartInfo values('"+_str[0]+"','"+_str[1]+"','"+DateTime.Now.ToString()+"')";
                int flag = DB.Exec(sql);
                string sql1 = "  select * from (select top 10 * from ChartInfo order by ID desc) t order by ID asc ";
    
                using (SqlConnection conn = DB.GetConn())
                {
                    SqlCommand cmd = new SqlCommand(sql1,conn);
                    SqlDataReader sdr = cmd.ExecuteReader();
                    StringBuilder sbStr = new StringBuilder();
                    while (sdr.Read())
                    {
                        sbStr.Append("<br><font color='red'>" + sdr["ChartPerson"].ToString() 
                                     + "</font><b>说</b>:" + sdr["ChartSay"].ToString() + "  " 
                                     + sdr["ChartDate"].ToString() + "<br/>");
                    }
                    sdr.Close();
                    str = sbStr.ToString();
                }
            }
        }
    }
    

    基于ICallBackEventHandler接口的大树(TreeView)

    <script type="text/javascript">
            $(document).ready(function() {
                raiseEvent();
            });
            function rServer(arg, context) {
                  var o = { showcheck: true,onnodeclick:nav };   //显示checkbox,同时加上节点点击的单击事件:nav();
                  o.data = eval(arg);  
                  $("#showTree").treeview(o);    //绑定到树上
            }
            
            function raiseEvent(arg, context) {
                <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;  
            }
            
            function getValues()
            {
                var obj=$("#showTree");
                var thstest=obj.getTSVs(); //本方法可以获取选取的节点的值
                
                var count=obj[0].t.getSelectedNodes().length;
                var val= obj[0].t.getSelectedNodes();
                for(var i=0;i<count;i++)
                {
                    alert(val[i].text+"-"+val[i].value);  //可以获取选取的节点的值和文本
                    /*******************************************************************
                    当然一点,需要说明的是,如果想向上回溯,可以利用val.parent方法来进行一一查找即可
                    ********************************************************************/
                }
            }
            function nav(item)
            {
                $("#txtNode").val(item.text);
            }
            function editNode()
            {
                arg=item.text+"-"+item.value;
                raiseEvent(arg,"");
            }
        </script>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    /*******************************************************
     * 基于ICallbackEventHandler的轻量级ajax回调方法
     * 使用方式:首先页面需要继承自ICallbackEventHandler接口
     * 然后页面必须实现RaiseCallbackEvent和GetCallbackResult
     * 方法,其中注意的是,前面一个函数先被调用,用来接收从前台
     * 传送来的数据,后面一个函数是将处理过的函数返回到前台
     * ***************************************************
    */

    public partial class _Default : System.Web.UI.Page,ICallbackEventHandler   
    {
        
    protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        
    public string jsonStr = string.Empty;

        
    public  string GetJson()
        {
            
    string json = "[";
            IList
    <Tree> t = DB.returnParentTree();
            
    foreach (Tree model in t)
            {
                
    if (model != t[t.Count - 1])
                {
                    json 
    += GetJsonByModel(model) + ",";
                }
                
    else
                {
                    json 
    += GetJsonByModel(model);
                }
            }
            json 
    += "]";
            json 
    = json.Replace("'""\"");
            
    return json;
        }

        
    public  string GetJsonByModel(Tree t)
        {
            
    string json = "";
            
    bool flag = DB.isHaveChild(t.ModuleID);

            json 
    = "{"
                      
    + "'id':'" + t.ModuleID + "',"
                      
    + "'text':'" + t.ModuleName + "',"
                      
    + "'value':'" + t.ModuleID + "',"
                      
    + "'showcheck':true,"
                      
    + "'checkstate':'0',"
                      
    + "'hasChildren':" + flag.ToString().ToLower() + ","
                      
    + "'isexpand':false,"
                      
    + "'ChildNodes':"
            
    if (!flag)
            {
                json 
    += "null,";
                json 
    += "'complete':false}";
            }
            
    else
            {
                json 
    += "[";
                IList
    <Tree> list = DB.getChild(t.ModuleID);
                
    foreach (Tree tree in list)
                {
                    
    if (tree != list[list.Count - 1])
                    {
                        json 
    += GetJsonByModel(tree) + ",";
                    }
                    
    else
                    {
                        json 
    += GetJsonByModel(tree);
                    }
                }
                json 
    += "],'complete':true}";
            }
            
    return json;
        }

        
    public string GetCallbackResult()
        {
            
    return jsonStr;
        }

        
    public void RaiseCallbackEvent(string eventArgument)
        {
            jsonStr 
    = GetJson();
        }
    }

  • 相关阅读:
    Async方法死锁的问题 Don't Block on Async Code(转)
    微信小程序列表项滑动显示删除按钮
    使用CodeDom动态生成类型
    react native中state和ref的使用
    react native中props的使用
    react native组件的生命周期
    react-native debug js remotely跨域问题
    react native组件的创建
    react native基础与入门
    ionic 开发实例
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2006182.html
Copyright © 2011-2022 走看看