ASP.NET2.0实现页面无刷新

 

Asp.Net2.0的客户端回调是一种很让人激动的方法,他能够让我们控制要提交什么数据给服务器而不用提交整个页面,同时服务器也只返回你所需要的数据而不要发回整个页面。

  首先我们要说一个很重要的方法:GetCallbackEventRefernce.
  GetCallbackEventReference首先实现让客户端脚本有能力传递参数给服务器端的RaiseCallbackEvent方法,然后返回RaiseCallBackEvent方法的值给你在GetCallbackEventRefernce方法中注册的一个参数(其实也是一个你要在客户端写的脚本)。调用GetCallbackEventRefernce你必须从客户端脚本中传递给他两个参数,一个是要传递给RaiseCallbackEvent事件的值,一个是context.

  他的参数意义如下:

  第一个:实现了ICallbackEventHandler借口的页面或者服务器控件,写this代表但前页面。

  第二个:代表你从要从客户端传递给服务器RaiseCallbackEvent方法的值

  第三个:你要在客户端写的一个js函数,同时,服务器也会把计算得到的数据传递给这个函数做为这个函数的参数。

  第四个:context具体什么意思我也不太清楚GetCallbackEventRefernce发送到了客户、端的代码是这样的:

    WebForm_DoCallback('__Page',arg,ReceiveServerData,context,null,false)
  那么我们要怎么样做才能够从客户端调用他呢?看到了三中方法:

  第一种:在后台写个public string,在Page_Load中给他赋值为:=Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context");注意在这里是Page.ClientScrip,因为他会返回个ClientScriptManager,ClientScriptManager管理所有的客户端脚本。然后在前台某个按钮的onclick事件里.做个小实验代码如下:

前台ServerTime.aspx:为了方便去掉好多没用的html


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
   function GetServerTime()
     {
 
         CallBackResult("擦干你的泪水");
 
    }
 
function ShowServerTime(timeMessage, context) {
  alert('现在服务器上的时间是: ' + timeMessage);
}

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<input type="button" value="得到服务器端时间" οnclick="GetServerTime();" />
    <asp:Label ID="lbltime" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>



 


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
   function GetServerTime()
     {
 
         CallBackResult("擦干你的泪水");
 
    }
 
function ShowServerTime(timeMessage, context) {
  alert('现在服务器上的时间是: ' + timeMessage);
}

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<input type="button" value="得到服务器端时间" οnclick="GetServerTime();" />
    <asp:Label ID="lbltime" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
   function GetServerTime()
     {
 
         CallBackResult("擦干你的泪水");
 
    }
 
function ShowServerTime(timeMessage, context) {
  alert('现在服务器上的时间是: ' + timeMessage);
}

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<input type="button" value="得到服务器端时间" οnclick="GetServerTime();" />
    <asp:Label ID="lbltime" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

 

后台:

public partial class AspAjax : System.Web.UI.Page, ICallbackEventHandler
    {
        public string sCallBackFunctionInvocation;
        protected void Page_Load(object sender, EventArgs e)
        {
            sCallBackFunctionInvocation = Page.ClientScript.GetCallbackEventReference(this, "arg", "ShowServerTime", "context");
            string ScriptFunction = "function CallBackResult(arg, context) { " + sCallBackFunctionInvocation + "} ;";
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
             "CallServer", ScriptFunction, true);

        }
        String returnValue;
        public string GetCallbackResult()
        {
            return returnValue;
        }

        public void RaiseCallbackEvent(string eventArgument)
        {
            returnValue = eventArgument + DateTime.Now.ToString();
        }
    }

 

一个 string GetCallbackResult 和 void RaiseCallbackEvent   搞定!

--------------------------------------

再给大家一个例子:

前台:


DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script type="text/javascript">
    function LookUpStock()
    ...{
        var lb = document.forms[0].ListBox1;
        var product = lb.options[lb.selectedIndex].text
        CallServer(product, "");
    }
   
    function ReceiveServerData(rValue)
    ...{
        Results.innerText = rValue;
    }
script>
head>
<body>
<form id="form1" runat="server">
    <div>
      <asp:ListBox ID="ListBox1" Runat="server">asp:ListBox>
      <br />
      <br />
      <button οnclick="LookUpStock()">Look Up Stockbutton>
      <br />
      <br />
      Items in stock: <span ID="Results">span>
      <br />
    div>
form>
body>
html>

后台:


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;

public partial class Exp2 : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
...{
    protected System.Collections.Specialized.ListDictionary catalog;
    protected void Page_Load(object sender, EventArgs e)
    ...{
        String cbReference =
            Page.ClientScript.GetCallbackEventReference(this,
            "arg", "ReceiveServerData", "context");
        String callbackScript;
        callbackScript = "function CallServer(arg, context)" +
            "{ " + cbReference + "} ;";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
            "CallServer", callbackScript, true);

        catalog = new System.Collections.Specialized.ListDictionary();
        catalog.Add("monitor", 12);
        catalog.Add("laptop", 10);
        catalog.Add("keyboard", 23);
        catalog.Add("mouse", 17);

        ListBox1.DataSource = catalog;
        ListBox1.DataTextField = "key";
        ListBox1.DataBind();
    }

    string earg = "";

    //#region ICallbackEventHandler 成员

    public string GetCallbackResult()
    ...{
        String returnValue;
        if (catalog[earg] == null)
        ...{
            returnValue = "-1";
        }
        else
        ...{
            returnValue = catalog[earg].ToString();
        }
        return returnValue;
    }

    public void RaiseCallbackEvent(string eventArgument)
    ...{
        //throw new Exception("The method or operation is not implemented.");
        earg = eventArgument;
    }

    //#endregion

}

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值