“无刷新页面”,只是一种不确切的效果描述(其实还有其他各种方法来实现这个效果),更确切的说法是:
在页面上用JavaScript调用服务器端的一个方法,然后处理返回的数据。实现它最标准的方法当然是XMLHTTP。但是,程序员都是懒惰的家伙,每个人都希望能有更方便的方法,或者,更佳的包装。比如,
Lostinet的
Rane就是对XMLHTTP的一个很好的包装。
终于,在ASP.NET 2.0里面,我们可以轻松的来做到这点了。服务器端任何实现了System.Web.UI.ICallbackEventHandler接口的控件,都可以通过RaiseCallbackEvent()方法来处理从页面上的JS脚本传递过来的请求和数据,处理后,再将结果传回给页面。这项能力的底层仍然是XMLHTTP。
下面是一个简单的演示:
This interface is new in the .NET Framework version 2.0.
此接口属于.net framework 2.0新特性。
MSDN原文如下:
<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public int cbCount = 0;
// Define method that processes the callbacks on server.
public void RaiseCallbackEvent(String eventArgument)
{
cbCount = Convert.ToInt32(eventArgument) + 1;
}
// Define method that returns callback result.
public string GetCallbackResult()
{
return cbCount.ToString();
}
protected void Page_Load(object sender, EventArgs e)
{
// Define a StringBuilder to hold messages to output.
StringBuilder sb = new StringBuilder();
// Check if this is a postback.
sb.Append("No page postbacks have occurred.");
if (Page.IsPostBack)
{
sb.Append("A page postback has occurred.");
}
// Write out any messages.
MyLabel.Text = sb.ToString();
// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;
// Define one of the callback script's context.
// The callback script will be defined in a script block on the page.
StringBuilder context1 = new StringBuilder();
context1.Append("function ReceiveServerData1(arg, context)");
context1.Append("{");
context1.Append("Message1.innerText = arg;");
context1.Append("value1 = arg;");
context1.Append("}");
// Define callback references.
String cbReference1 = cs.GetCallbackEventReference(this, "arg",
"ReceiveServerData1", context1.ToString());
String cbReference2 = cs.GetCallbackEventReference("'" +
Page.UniqueID + "'", "arg", "ReceiveServerData2", "",
"ProcessCallBackError", false);
String callbackScript1 = "function CallTheServer1(arg, context) {" +
cbReference1 + "; }";
String callbackScript2 = "function CallTheServer2(arg, context) {" +
cbReference2 + "; }";
// Register script blocks will perform call to the server.
cs.RegisterClientScriptBlock(this.GetType(), "CallTheServer1",
callbackScript1, true);
cs.RegisterClientScriptBlock(this.GetType(), "CallTheServer2",
callbackScript2, true);
}
|
</script>
<script type="text/javascript">
var value1 = 0;
var value2 = 0;
function ReceiveServerData2(arg, context)
{
Message2.innerText = arg;
value2 = arg;
}
function ProcessCallBackError(arg, context)
{
Message2.innerText = 'An error has occurred.';
}
|
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ClientScriptManager Example</title>
</head>
<body>
<form id="Form1" runat="server">
<div>
Callback 1 result: <span id="Message1">0</span>
<br />
Callback 2 result: <span id="Message2">0</span>
<br /> <br />
<input type="button" value="ClientCallBack1" onclick="CallTheServer1(value1, alert('Increment value'))"/>
<input type="button" value="ClientCallBack2" onclick="CallTheServer2(value2, alert('Increment value'))"/>
<br /> <br />
<asp:Label id="MyLabel" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
|