ASP.NET无刷新客户端回调

首先说一下:Page.ClientScript

用于管理脚本、注册脚本和向页添加脚本。

返回结果:一个 System.Web.UI.ClientScriptManager 对象。

ClientScriptManager对象 是一些 在 Web 应用程序中定义用于管理客户端脚本的方法,其中有一个方法重载:

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

获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。

此重载方法的客户端函数包含指定的控件、参数、客户端脚本和上下文。

参数:

control: 处理客户端回调的服务器 System.Web.UI.Control。该控件必须实现

System.Web.UI.ICallbackEventHandler接口并提供

System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(System.String)方法

argument: 从客户端脚本传递给服务器端的一个参数

System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(System.String)方法

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

context: 启动回调之前在客户端计算的客户端脚本。脚本的结果传回客户端事件处理程序。

返回结果: 调用客户端回调的客户端函数的名称。

GetCallbackEventRefernce发送到了客户端的代码是这样的:

WebForm_DoCallback('__Page',message,ShowServerTime,context,null,false)

message:arg

ShowServerTime:ReceiveServerData

三种客户端回调方法:

第一种:添加 ServerTime.aspx 页面

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerTime.aspx.cs" Inherits="_3_ServerTime" %>

<!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 language="javascript" type="text/javascript">

function GetServerTime()

{

var message = '';

var context = '';

<%=sCallBackFunctionInvocation%>

}

function ShowServerTime(timeMessage, context)

{

alert('现在服务器上的时间是:\n' + timeMessage);

}

</script>

</head>

<body>

<form runat="server">

<input type="button" value="得到服务器端时间" onclick="GetServerTime();" />

</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 _3_ServerTime : System.Web.UI.Page, ICallbackEventHandler

//System.Web.UI.ICallbackEventHandler

//一定要实现ICallbackEventHandler接口,用于指示控件可以作为服务器的回调事件的目标。

{

public string sCallBackFunctionInvocation;

protected void Page_Load(object sender, EventArgs e)

{

sCallBackFunctionInvocation =

Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context");

//因为它会返回个ClientScriptManager, ClientScriptManager管理所有的客户端脚本。

//然后在前台某个按钮的onclick事件里<%=那个public后台字符串% >.

//此方法 发送到客户端代码是:WebForm_DoCallback('__Page',message,ShowServerTime,context,null,false)

}

public void RaiseCallbackEvent(string eventArgument)

{

// ICallbackEventHandler接口 要实现的方法

// 处理以控件为目标的回调事件。

// 参数:

// eventArgument:

// 一个字符串,表示要传递到事件处理程序的事件参数。

}

public string GetCallbackResult()

{

// ICallbackEventHandler接口 要实现的方法

// 返回以控件为目标的回调事件的结果。

//

// 返回结果:

// 回调的结果。

return DateTime.Now.ToString();

}

}

第二种方法:前台异步调用后台

在上面的方法中我们必须要在前台绑定后台,那么如果不绑定呢?我们怎么做:

直接把GetCallbackEventReference当做js函数中的一个实现内容,然后把这个js函数注册到客户端。

新建页面TestPage.aspx

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="_3_TestPage" %>

<!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">

function test()

{

var lb = document.getElementById("Select1");

//取的那个下拉框

var con = lb.options[lb.selectedIndex].text;

//得到你选择的下拉框的文本再调用呢个CallTheServer,是一个由服务器端输出的js函数

CallTheServer(con,''); //此方法由 后台生成到前台来

}

function ReceiveServerData(rValue)

{

Results.innerHTML = rValue;

//在<span >>

后台代码:

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 _3_TestPage : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler

{

protected void Page_Load(object sender, EventArgs e)

{

String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");

String callbackScript;

callbackScript = "function CallTheServer(arg,context)" +

"{ " + cbReference + "} ;";

Page.ClientScript.RegisterStartupScript(this.GetType(), "abcdefg", callbackScript, true);

//第四个参数代表是不是要自动给着脚本加上<script type="text/javascript"></script>标记,当然要加啊

}

private string SelectValue;

public void RaiseCallbackEvent(string eventArgument)

{

// ICallbackEventHandler接口 要实现的方法

// 处理以控件为目标的回调事件。

// 参数:

// eventArgument:

// 一个字符串,表示要传递到事件处理程序的事件参数。

SelectValue = eventArgument;

}

public string GetCallbackResult()

{

// ICallbackEventHandler接口 要实现的方法

// 返回以控件为目标的回调事件的结果。

//

// 返回结果:

// 回调的结果。

return "你选择的是:" + SelectValue;

}

}

第三种:前面两种都是<input type="button"的html控件,那么如果是WEB按钮控件呢?当然也可以,在后台添加服务器按钮的onclick 属性。

新建 third.aspx 页面

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="third.aspx.cs" Inherits="_3_third" %>

<!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 runat="server">

<div>

<select >

<option selected="selected" value='1'>老鼠徒弟</option>

<option value='2'>吴旗娃师傅</option>

</select>

<asp:Button runat="server" Text="这是个服务器按钮" />

</div>

<div />

<script type="text/javascript">

function Re(ret)

{

document.getElementById("div1").innerHTML = ret;

alert(ret);

}

</script>

</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 _3_third : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler

{

protected void Page_Load(object sender, EventArgs e)

{

//第四个参数为null,因为你不可能再在js中给他传参数了

string str = Page.ClientScript.GetCallbackEventReference(this,

"document.getElementById('Select1').options[document.getElementById('Select1').selectedIndex].text",

"Re", null);

//return false是为了防止提交窗体

Button1.Attributes.Add("onclick", str + ";return false;");

}

private string SelectValue;

public void RaiseCallbackEvent(string eventArgument)

{

// ICallbackEventHandler接口 要实现的方法

// 处理以控件为目标的回调事件。

// 参数:

// eventArgument:

// 一个字符串,表示要传递到事件处理程序的事件参数。

if (eventArgument == "老鼠徒弟")

{

SelectValue = "老鼠徒弟:人生如鼠,不在仓就在厕!";

}

else

{

SelectValue = "吴旗娃师傅:自信自强,乐观向上";

}

}

public string GetCallbackResult()

{

// ICallbackEventHandler接口 要实现的方法

// 返回以控件为目标的回调事件的结果。

//

// 返回结果:

// 回调的结果。

return SelectValue;

}

}

小技巧,当你写完System.Web.UI.ICallbackEventHandler后,把鼠标移上去,那么System前面'S'下面会有个小红线,点他会自动写好那个RaiseCallbackEvent代码。