The client callback of Asp.Net2.0 is a very exciting method. It allows us to control what data to submit to the server without submitting the entire page. At the same time, the server only returns the data you need without sending it back. entire page.
First of all, we have to talk about a very important method: GetCallbackEventRefernce. I wrote down my understanding. It may be wrong. Please point it out. Thank you very much!
GetCallbackEventReference first implements the RaiseCallbackEvent method that allows the client script to pass parameters to the server, and then returns the value of the RaiseCallBackEvent method to a parameter you registered in the GetCallbackEventRefernce method (actually it is also a script you want to write on the client). To call GetCallbackEventRefernce, you must pass it two parameters from the client script, one is the value to be passed to the RaiseCallbackEvent event, and the other is context.
The meaning of its parameters is as follows:
First: the page or server control that implements the ICallbackEventHandler interface, Write this to represent the previous page.
The second: represents the value you want to pass from the client to the server's RaiseCallbackEvent method.
The third: a js function you want to write on the client. At the same time, the server will also pass the calculated data to this function as this function parameters.
Fourth: I don’t know exactly what context means. The code that GetCallbackEventRefernce sends to the client is as follows:
WebForm_DoCallback('__Page',arg,ReceiveServerData,context,null,false)
So what should we do to get the request from the client? How to call him? I saw three methods:
The first one: write a public string in the background and assign it in Page_Load: =Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context"); Pay attention here It is Page.ClientScrip, because it will return a ClientScriptManager, which manages all client scripts. Then in the onclick event of a button in the foreground <%=that public background string%>. Make a small experimental code as follows:
Frontend ServerTime.aspx: For convenience, remove a lot of useless html
<%@ page language="C#" CodeFile="ServerTime.aspx.cs" Inherits="ServerTime_aspx" %＞
<html>
＜head＞
＜title＞Server Time＜/title＞
<script language="javascript">
function GetServerTime()
{
var message = '';
var context = '';
<%=sCallBackFunctionInvocation%>
}
function ShowServerTime(timeMessage, context) {
alert('The current time on the server is:n' + timeMessage);
}
＜/script＞
＜/head＞
<body>
＜form id="MainForm" runat="server"＞
＜input type="button" value="Get server time" onclick="GetServerTime();" /＞
＜/form＞
＜/body＞
＜/html＞
Backend:
using System;
using System.Web.UI;
public partial class ServerTime_aspx : Page,ICallbackEventHandler
{
//Be sure to implement the ICallbackEventHandler excuse public string sCallBackFunctionInvocation;
void Page_Load(object sender, System.EventArgs e)
{
sCallBackFunctionInvocation = Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context");
}
public string RaiseCallbackEvent(string eventArgument)
{
return DateTime.Now.ToString();
}
}
Run, click the button and the result is as follows:
Second method: In the above method, we must bind the background to the foreground, so what if we don’t bind it? We do this:
directly use GetCallbackEventReference as an implementation content in the js function, and then register this js function to the client.
Front-end TestPage code:
＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %＞
<html>
＜head＞
＜title＞Untitled Page＜/title＞
<script type="text/javascript">
function test()
{
var lb = document.getElementById("Select1");
//The drop-down box to be taken var con = lb.options[lb.selectedIndex].text;
//Get the text of the drop-down box you selected and then call CallTheServer, which is a js function output by the server CallTheServer(con,'');
}
functionReceiveServerData(rValue)
{
Results.innerHTML = rValue;
}
＜/script＞
＜/head＞
<body>
＜form id="form1" runat="server"＞
<div>
＜select id="Select1"＞
＜option value=1 selected="selected"＞Mouse Disciple＜/option＞
＜option value=2＞Master Wu Qiwa＜/option＞
＜/select＞
＜br /＞
＜br /＞
＜input onclick="test()" value="Return the drop-down box text from the server" type=button＞
＜br /＞
＜br /＞
＜span ID="Results"＞＜/span＞
＜br /＞
＜/div＞
＜/form＞
＜/body＞
＜/html＞
Backend code:
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 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);
//The fourth parameter represents whether to automatically add the <script type="text/javascript"></script> tag to the script, of course it must be added}
public String RaiseCallbackEvent(String eventArgument)
{
return "What you selected is" + eventArgument;
}
}
The following is the execution result:
The third type: The first two are HTML controls with <input type="button", so what if it is a server button? Of course, you can also add the onclick attribute of the server button in the background.
Front-end third.aspx code:
＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="third.aspx.cs" Inherits="third" %＞
<html>
＜head＞
＜title＞Untitled Page＜/title＞
＜/head＞
<body>
＜form id="form1" runat="server"＞
<div>
＜select id="Select1"＞
＜option selected="selected" value=1＞Mouse Disciple＜/option＞
＜option value=2＞Master Wu Qiwa＜/option＞
＜/select＞
＜asp:Button ID="Button1" runat="server" Text="This is a server button" /＞＜/div＞
＜div id="div1" /＞
<script type="text/javascript">
functionRe(ret)
{
document.getElementById("div1").innerHTML = ret;
alert(ret);
}
＜/script＞
＜/form＞
＜/body＞
＜/html＞
Code behind:
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 third : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
//The fourth parameter is null, because you can no longer pass parameters to it in js string str = Page.ClientScript.GetCallbackEventReference(this,"document.getElementById('Select1')._
options[document.getElementById('Select1').selectedIndex].text","Re",null);
//return false is to prevent the form from being submitted. Button1.Attributes.Add("onclick",str+";return false;");
}
#region ICallbackEventHandler Members
public string RaiseCallbackEvent(string eventArgument)
{
if (eventArgument == "Mouse Apprentice")
{
return "Mouse apprentice: Life is like a mouse. If you are not in the barn, you are in the toilet!";
}
else
{
return "Master Wu Qiwa: confident, self-reliant, optimistic";
}
}
#endregion
}
Little tip, after you finish writing System.Web.UI.ICallbackEventHandler, move the mouse up, and there will be a small chart in front of System. Click on it to automatically write the RaiseCallbackEvent code. The effect is as follows;
The third one feels the worst!