zoukankan      html  css  js  c++  java
  • 社区网站功能实现系列(三):社区页面无刷新回发的一种实现方式

    页面无刷新回发实现有很多种方式,可以用XMLHttpRequest,一些js框架的ajax实现(如jQuery的 ajax),ajaxPro,MS的UpdatePanel,web服务等。下面我来介绍另一种方式:页面回发。

    1. ICallbackEventHandler接口
    该接口用于指示控件可以作为服务器的回调事件的目标。ICallbackEventHandler 接口的控件为目标时,将把事件变量作为 参数传递来调用 RaiseCallbackEvent 方法以处理该事件,并且 GetCallbackResult 方法返回回调的结果。继承这个接口需要实现两个方法: RaiseCallbackEvent, GetCallbackResult .

    public void RaiseCallbackEvent(string eventArgument)

    {}

    这个方法用于处理客户端提交的请求。它接收一个string类型的参数,这个参数由客户端传入。如果你需要传入多个参数,你可以将这些参数组合起 来,然后到这个方法里面再分解。

    public string GetCallbackResult()

    {}

    该方法用于返回服务器端处理后的数据。如果你要返回的数据类型不仅仅是string类型,你可以自己构造一个类,返回的时候通过序列化这个类达到返 回复杂类型的效果。客户端获取的时候用eval("(string)")来反序列化即可。

    2. 方法GetCallbackEventReference()。用于向服务器端发送回调后请求的函数。

    public string GetCallbackEventReference(Control control, string argument, string clientCallback, string context, string clientErrorCallback, bool useAsync){}

    看参数列表的名字就知道大概什 么意思了,不赘述。

    先参考代码:

    前台页面:

    <html><head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">

    function ReceiveCallback(result)
    {
    var resultArrays = eval("(" + result + ")");

    alert(resultArrays.RepeaterJson);
    }

    function ChangeGameTab(order)
    {
    CallServer(order, null);
    }

    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div class="">
    <div class="">
    <h3>网页游戏列表</h3>
    <a class="z1 tj00" id="tj00"  href="javascript:ChangeGameTab('1');">最新游戏</a>
    <a id="tj01" class=""  href="javascript:ChangeGameTab('2');">策略战争</a>
    <a id="tj02" class=""  href="javascript:ChangeGameTab('3');">角色扮演</a>
    <a id="tj03" class=""  href="javascript:ChangeGameTab('4');">棋牌类</a>
    <a id="tj04" class=""  href="javascript:ChangeGameTab('5');">战略养成类</a>
    </div>
    <ul id="t1">
    <uc1:GameList runat="server" id="GameList1" CategoryID="1"></uc1:GameList>
    </ul>
    <ul style="display: none;" id="t2"></ul>
    <ul style="display: none;" id="t3"></ul>
    <ul style="display: none;" id="t4"></ul>
    <ul style="display: none;" id="t5"></ul>
    <div></div>
    </div>
    </form>
    </body>
    </html>

    后台代码:

    namespace Game
    {
    public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!Page.IsPostBack)
    {
    this.RegistCallbackScript(this.Page);
    }

    if (Page.IsPostBack && !Page.IsCallback)
    {
    this.RegistCallbackScript(this.Page);
    }
    }

    #region ICallbackEventHandler 成员

    public string GetCallbackResult()
    {
    Game.Entities.GameRepeaterJson gameJson = new Game.Entities.GameRepeaterJson();
    gameJson.RepeaterJson = this.RewriteControl(this.GameList1);
    return SNET.Common.DataAccessHelper.JSONHelper.ObjectToString(gameJson);
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
    switch (eventArgument)
    {
    case "1":
    this.GameList1.CategoryID = "1";
    this.GameList1.RPTBind();
    break;
    case "2":
    this.GameList1.CategoryID = "3";
    this.GameList1.RPTBind();
    break;
    case "3":
    this.GameList1.CategoryID = "4";
    this.GameList1.RPTBind();
    break;
    case "4":
    this.GameList1.CategoryID = "6";
    this.GameList1.RPTBind();
    break;
    case "5":
    this.GameList1.CategoryID = "8";
    this.GameList1.RPTBind();
    break;
    default:
    this.GameList1.CategoryID = "1";
    this.GameList1.RPTBind();
    break;
    }
    }

    #endregion

    /// <summary>
    /// 注册无刷新回调事件
    /// </summary>
    /// <param name="page">The page.</param>
    protected void RegistCallbackScript(System.Web.UI.Page page)
    {
    string callbackReference = page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveCallback", "context",null, false);
    string callbackScript = string.Format("function CallServer(arg,context){{ {0} }}", callbackReference);
    page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
    }

    /// <summary>
    /// 获取指定控件重画的内容
    /// </summary>
    /// <param name="control">The control.</param>
    /// <returns></returns>
    protected string RewriteControl(Control control)
    {
    StringWriter stringWriter = new StringWriter(System.Globalization.CultureInfo.InvariantCulture);
    HtmlTextWriter htmlTextWriter = new HtmlTextWriter(stringWriter);
    control.RenderControl(htmlTextWriter);
    htmlTextWriter.Flush();
    htmlTextWriter.Close();
    return stringWriter.ToString();
    }
    }
    }

    Game.Entities.GameRepeaterJson 是我自定义的一个类,为了说明可以返回复杂类型。

    这样就实现了客户端向服务器端 请求数据,而页面无刷新了。

    代码关键是RegistCallbackScript 这个方法,它向页面注册了一个function,同时也说明了它的回调函数是ReceiveCallback, 继而你只要在页面上的ReceiveCallback这个方法里写页面处理代码即可。

    是不是很简单?:)

  • 相关阅读:
    eclipse上传下载github
    GitHub整合idea 上传和下载
    Git安装与配置
    第八天springboot整合redis
    第七天.spring boot 整合mybatis并使用Junit进行测试
    ssm的各种配置资源
    Git相关软件下载
    Eclipse上传项目到GitHub
    SpringBoot使用spring data jpa及在页面yaml中显示
    spring boot 整合mybatis及使用Junit进行测试
  • 原文地址:https://www.cnblogs.com/myself/p/1699737.html
Copyright © 2011-2022 走看看