We can call page methods (static methods declared in scope of asp.net page) using MS Ajax framework for ASP.NET. That is how can we do it :
1) Drop ScriptManager control on page
2) Set EnablePageMethods property of ScriptManager control to true
<asp:ScriptManager
EnablePageMethods="true"
ID="MainSM"
runat="server"
ScriptMode="Release"
LoadScriptsBeforeUI="true"
>
</asp:ScriptManager>
3) Add static public method in page-behind code (or its parent class) and mark it with [System.Web.Services.WebMethod] attribute:
using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string GetTime()
{
return DateTime.Now.ToString();
}
}
4) Create new JS file and add the following code to it:
/// --------------------------------------------------
/// mainScreen object
/// --------------------------------------------------
var mainScreen =
{
resultDivId : "resultDiv",
resultDiv : null
}
mainScreen.Init = function() {
/// <summary>
/// Initializes mainScreen variables
/// </summary>
this.resultDiv = $get(this.resultDivId);
};
mainScreen.GetTime = function () {
/// <summary>
/// Loads rendered server control from server
/// </summary>
PageMethods.GetTime(mainScreen.GetTimeCallback, mainScreen.GetTimeFailed);
};
mainScreen.GetTimeCallback = function (result) {
/// <summary>
/// Is called when server sent result back
/// </summary>
/// <param name="result">
/// Result of calling server method,
/// string - server time
/// </param>
if(result) {
mainScreen.resultDiv.innerHTML = result;
}
};
mainScreen.GetTimeFailed = function (error, userContext, methodName) {
/// <summary>
/// Callback function invoked on failure of the page method
/// </summary>
/// <param name="error">error object containing error</param>
/// <param name="userContext">userContext object</param>
/// <param name="methodName">methodName object</param>
if(error) {
// TODO: add your error handling
mainScreen.resultDiv.innerHTML = error.get_message();
}
};
/// --------------------------------------------------
/// Page events processing
/// --------------------------------------------------
Sys.Application.add_load(applicationLoadHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
function applicationLoadHandler() {
/// <summary>
/// Raised after all scripts have been loaded and
/// the objects in the application have been created
/// and initialized.
/// </summary>
mainScreen.Init()
}
function endRequestHandler() {
/// <summary>
/// Raised before processing of an asynchronous
/// postback starts and the postback request is
/// sent to the server.
/// </summary>
// TODO: Add your custom processing for event
}
function beginRequestHandler() {
/// <summary>
/// Raised after an asynchronous postback is
/// finished and control has been returned
/// to the browser.
/// </summary>
// TODO: Add your custom processing for event
}
5) Add reference to js file we just created to ScriptManager control we created in step 1, so it will look like:
<asp:ScriptManager
EnablePageMethods="true"
ID="MainSM"
runat="server"
ScriptMode="Release"
LoadScriptsBeforeUI="true"
>
<Scripts>
<asp:ScriptReference Path="~/Scripts/Main.js" />
</Scripts>
</asp:ScriptManager>
6) Add div with id "resultDiv" to the page markup"
<div id="resultDiv"></div>
7) Add a button to the page and set it's onclick event to "mainSrceen.GetTime();" value:
<input value="GetTime" type="button" onclick="mainScreen.GetTime();" />
8) Run the page, click on the button and get time from the server.