• 回调实现步骤


            ASP.NET 网页的默认模型中,单击按钮或执行一些其他操作会导致回发,此时将重新创建页及其控件,并在服务器上运行页代码,且新版本的页被呈现到浏览器。但是,在有些情况下,需要从客户端运行服务器代码,而不执行回发。如果页中的客户端脚本维护一些状态信息(例如,局部变量值),那么发送页和获取页的新副本就会损坏该状态。此外,页回发会导致处理开销,这会降低性能,且会让用户不得不等待处理并重新创建页。

        若要避免丢失客户端状态并且不导致服务器往返的处理开销,可以使用客户端回调。在客户端回调中,客户端脚本函数会向 ASP.NET 网页发送一个请求。该网页运行其正常生命周期的修改版本 — 初始化页并创建其控件和其他成员,然后调用特别标记的方法。该方法执行代码中编写的处理过程,然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中,该页一直驻留在浏览器中。

     在期望不执行回发而从客户端运行服务器代码的情况下,可以使用 ClientScriptManager 类来调用客户端回调。这称为对服务器执行带外回调。在客户端回调中,客户端脚本函数向 ASP.NET 网页发送异步请求。网页修改其正常生命周期来处理回调。

     回调的过程如下所示:

    1)客户端发出请求,请求内容包括:指定更新控件和传递参数。

    2)服务端响应、处理。

    3)服务端将处理后的内容以字符串返回。

    4)客户端使用一个函数接受返回值

    5)客户端更新指定控件。

    创建实现客户端回调的 ASP.NET 页,必须实现ICallbackEventHandler接口。

    先声明该接口,方法如下:

    public partial class CallBackExample : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler

    {… …}

     

    实现ICallbackEventHandler接口的两个固定名称的方法, RaiseCallbackEvent(eventArgment)GetCallbackResult()RaiseCallbackEvent()方法是回调执行的方法,在这个方法中处理回调的内容,它没有返回值,它从浏览器接受一个字符串作为事件参数,即该方法接受客户端JavaScript使传递的参数,注意它是首先触发的。接下来触发的就是GetCallbackResult()方法,它将所得到的结果传回给客户端的JavaScriptJavaScript再将结果更新到页面。

        客户端使用ClientScript.GetCallbackEventReference()方法实现回调。这个方法用几个参数其中一个指定关联上下文,一个指定返回客户端的函数名称。

    Public string GetCallbackEventReference (Control control,string argument,string clientCallback,string context)

    参数与返回值说明:

    参数

    作用

    control

    处理客户端回调的服务器 Control。该控件必须实现 ICallbackEventHandler 接口并提供 RaiseCallbackEvent 方法。

    argument

    从客户端脚本传递一个参数到服务器端的RaiseCallbackEvent 方法。

    clientCallback

    一个客户端事件处理程序的名称,该处理程序接收服务器端事件返回的结果。

    context

    启动回调之前在客户端的客户端脚本信息。脚本的结果传回给客户端事件处理程序。

    返回值

    调用客户端回调的客户端函数的名称。

    注意ClientScript.GetCallbackEventReference()方法在客户端必须有控件来调用,调用的控件不是我们经常使用的服务器端控件,而是一个HTML元素。在控件中添加一个onclick事件,点击该按钮这将向服务器端发出回调请求。

    下面是ClientScriptManager.GetCallbackEventReference 方法的重载列表

    名称

    说明

    ClientScriptManager.GetCallbackEventReference (Control, String, String, String)

    获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的控件、参数、客户端脚本和上下文。

    ClientScriptManager.GetCallbackEventReference (Control, String, String, String, Boolean)

    获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的控件、参数、客户端脚本、上下文和布尔值。

    ClientScriptManager.GetCallbackEventReference (Control, String, String, String, String, Boolean)

    获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的控件、参数、客户端脚本、上下文、错误处理程序和布尔值。

    ClientScriptManager.GetCallbackEventReference (String, String, String, String, String, Boolean)

    获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的目标、参数、客户端脚本、上下文、错误处理程序和布尔值。 我们就整个程序作个系统的说明,并且列出前台的页面代码和后台的逻辑代码,这样可以使得你对程序有个直观的理解。

    说了这么多,我们来看看实际的例子吧:

    Html前台代码:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!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>
            
    <script type = "text/javascript" language ="javascript" >
             
    function CallServerFunction(selectInfo,Num1,Num2)
             
    {
               
    //Arg是传向后台方法RaiseCallbackEvent()的参数,这里将操作符操作数一块传过去
                Arg = selectInfo.selectedIndex + "/" + Num1.value + "/" + Num2.value;
                
    //获取一个客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调
                <%= ClientScript.GetCallbackEventReference(this,"Arg","ReceiveServerData","null"%>
             }

            
    //接收回调后台传过来的结果数据,该函数名为GetCallbackEventReference()的第三个参数
            function ReceiveServerData(result)
            
    {
                
    //js里面,必须用Label的innerText属性,用Text属性不会产生任何效果
                lblShow.innerText = result;
            }

        
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>
            
    <input type = "text" id="Num1" />
            
    <select id="Oper" runat = "server">
                
    <option>+</option>
                
    <option>-</option>
                
    <option>*</option>
                
    <option>/</option>
            
    </select>
            
    <input type = "text" id="Num2" />
            
    <%--调用回调函数的控件最好用HTML控件,因为服务端控件本身会执行会发,不过用服务端控件的页面方法比如OnClentClick类似的方法也可以--%>
            
    <input type= "Button" id ="eq" value = "=" onclick = "CallServerFunction(Oper,Num1,Num2)"/>
            
    <asp:Label ID="lblShow" runat="server" Text="show"></asp:Label>
        
    </div>
        
    </form>
    </body>
    </html>

     

    代码中的注释比较详细,没什么好分析的,要注意的是:由于我们在此没有用到上下文的联系,所以ClientScript.GetCallbackEventReference()方法的4个参数为"null",但是OnCallback()脚本函数还是要保留该"context"参数,因为这是接受回调结果的客户端函数的固定格式。

    Asp.net后台代码如下:

    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;

    /*
     * 对ICallbackEventHandler接口进行声明,要在客户端调用服务端代码而不回发,必须声明该接口并且实现它的两个方法:
     * RaiseCallbackEvent()、GetCallbackResult()
     * RaiseCallbackEvent()的参数是从前台传过来的,根据传来的参数执行不同的代码并将结果用GetCallbackResult()返回前台
    */


    //必须声明System.Web.UI.ICallbackEventHandler接口
    public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
    {
        
    //定义一个回调的返回值
        private string Result;
        
    //定义两个变量,用来接收页面传过来到操作数
        private string Num1;
        
    private string Num2;
        
    protected void Page_Load(object sender, EventArgs e)
        
    {
            
        }


        
    /// <summary>
        
    /// 该方法是回调执行的方法,根据参数在这个方法中处理回调的内容,该方法没有返回值
        
    /// </summary>
        
    /// <param name="eventArgument">此参数是从客户端传过来的</param>

        public void RaiseCallbackEvent(string eventArgument)
        
    {
            
    //eventArgumeng 为javascript从客户端传递的参数,本例传过来三个参数用“/”分割将每个参数取出存入数组
            string[] PagParams = eventArgument.Split('/');
            Num1 
    = PagParams[1];
            Num2 
    = PagParams[2];
            
    //根据第一个参数(所选的操作符),调用不同的执行函数
            switch (PagParams[0])
            
    {
                
    case "0":
                    Result 
    = add(); break;
                
    case "1":
                    Result 
    = sub(); break;
                
    case "2":
                    Result 
    = multi(); break;
                
    case "3":
                    Result 
    = division(); break;
            }

        }

        
        
    /// <summary>
        
    /// 该方法是返回回调的结果给客户端
        
    /// </summary>
        
    /// <returns></returns>

        public string GetCallbackResult()
        
    {
            
    return Result;
        }


        
    //一下四个函数是通过RaiseCallbackEvent方法,调用的回调要执行操作的函数
        private string add()
        
    {
            
    double addResult = double.Parse(Num1) + double.Parse(Num2);
            
    return addResult.ToString();
        }


        
    private string sub()
        
    {
            
    double addResult = double.Parse(Num1) - double.Parse(Num2);
            
    return addResult.ToString();
        }


        
    private string multi()
        
    {
            
    double addResult = double.Parse(Num1) * double.Parse(Num2);
            
    return addResult.ToString();
        }


        
    private string division()
        
    {
            
    double addresult = double.Parse(Num1) / double.Parse(Num2);
            
    return addresult.ToString();
        }

    }


    运行的结果是:

     

    测一测,在运算的时候确实没有一闪一闪的页面刷新了,而且还可以感觉到运算的速度加快了。

    小结:

    所有的异步技术如本文所探讨的客户端回调,以及微软新推出的Atlas框架,都不再使用传统的Postback。因此客户端在呈现由服务器端返回的数据时,浏览器下方将看不到一闪而过的绿色状态条,并且异步过程只传送和接受少量的数据,而非Postback过程中传递的整个页面信息,因此程序在执行性能上有了较大的提高。只有通过自己的实践才能理解客户端回调的精髓,本人身有体会。

    文中大部分知识描述来自MSDN,也有部分来自网络,在此对提供这方面知识前人表示感谢。

  • 相关阅读:
    iphone:URL initWithString 返回为空
    android:unable to instantiate activity componentinfo
    android:进度条
    android:spinner
    android:DDMS查看Threads
    android:ListView:convertView.setTag()来设置数据
    iphone:使用UIImagePickerController从IPhone照片库或照相机获取图像
    android:ListView中的getView原理
    android 从assets和res中读取文件
    android:menu.xml
  • 原文地址:https://www.cnblogs.com/top5/p/1696226.html
Copyright © 2020-2023  润新知