My sample asp.net web page looks like below. In order to wrok with this sample, you need to use following four namespace in particular.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>PageMethod and JSON Sample</title>
<script language="javascript" type="text/javascript">
function OnRequestComplete(result, userContext, methodName) {
var Person = eval('(' + result + ')');
alert(Person.Forename);
alert(Person.Surname);
}
function OnRequestError(error, userContext, methodName) {
if (error != null) {
alert(error.get_message());
}
}
function SubmitData() {
var f = document.getElementById('<%= txtFName.ClientID %>').value;
var s = document.getElementById('<%= txtSName.ClientID %>').value;
PageMethods.GetData(f, s, OnRequestComplete, OnRequestError);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" />
<div>
Forename: <asp:TextBox ID="txtFName" runat="Server"></asp:TextBox><br />
Surname: <asp:TextBox ID="txtSName" runat="Server"></asp:TextBox><br />
<input type="button" value="Submit" onclick="SubmitData()" />
</div>
</form>
</body>
</html>
First see the <body> part of the page, here I have a asp:ScriptManager tag that has EnablePageMethods property as true. This will allow us to post the data on the server using plain JavaScript code. This has certain standard that we need to follow. Notice above JavaScript code, that has three methods named OnRequestComplete(), OnRequestError() and SubmitData() method. We shall talk about them later on.
We can only call a method with WebMethod attribute from the JavaScript using PageMethods. Normal code behind methods are not accessible from PageMethods. See the code snipeet below.
Get solutions of the .NET problems with video explanations, .pdf and source code in .NET How to's.
Code Snippet - 2
[WebMethod]
public static string GetData(string f, string s)
{
Person p = new Person();
p.Forename = f;
p.Surname = s;
// throw new Exception("Custom Error :) ");
return SerializeObjectIntoJson(p);
}
SubmitData function
On the click event of the Submit button, I am calling a JavaScript function called SubmitData() that is getting the value of the TextBoxes in two different variable called f (forename) and s (surname). Once we have the data that needs to be passed to the server side, simply call the WebMethod (Code Snippet 2) you have written. In my case its GetData. Notice that my server side GetData method has two parameter only but from client side I am calling this with four parameter where first two parameter is the same as server side GetData parameter and last two parameters are the name of the methods that will fire when request is complete (OnRequestComplete) and if any error occured in the server while processing the request (OnRequestError) respectively.
On the server side GetData method, I have a Person object that has two properties as show in the following code snippets.
Code Snippet - 3
/// <summary>
/// Summary description for Person
/// </summary>
public class Person
{
string forename = string.Empty;
string surname = string.Empty;
public string Forename
{
get { return forename; }
set { forename = value; }
}
public string Surname
{
get { return surname; }
set { surname = value; }
}
}
Look at Code Snippet 2, where I am setting the property of the Person object and passing that object to another method called SerializeObjectIntoJson (Code Snippet 4), this method will convert the Person object into JSON format and return to the user browser.
Code Snippet - 4
private static string SerializeObjectIntoJson(Person p)
{
DataContractJsonSerializer serializer = new
DataContractJsonSerializer(p.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, p);
ms.Flush();
byte[] bytes = ms.GetBuffer();
string jsonString = Encoding.UTF8.GetString(bytes, 0, bytes.Length).Trim('\0');
return jsonString;
}
}
OnRequestComplete function
Once the Person object has been serialized and request is complete, OnRequestComplete JavaScript function will be called. This function has three parameter (result, userContext and methodName), result is the string that will be returned from the WemMethod (in our case GetData method in code behind), userContext is the context of the user (generally, it will be null) and methodName is the name of the server side method that is returning the data to this method (in my case GetData).
In the first line of this method, I am extracting the Person object from JSON Serialized string and in the rest of the lines I am showing the properties of this object as JavaScript alert.
OnRequestError function
While processing the request in the server side, any error occurs then OnRequestError JavaScript function will be called. This function has also three parameter same as OnRequestComplete except that the first parameter is the actual error that is returned from the server side.
Limitations
There are few limitations of using ASP.NET AJAX PageMethods. They are
You can't access the asp.net server controls (like TextBox control) in the WebMethod directly as you normally access in the server side methods. If you try to access the asp.net server controls directly into WebMethod, you will get "An object reference is required for the nonstatic field, method, or property '_Default.txtFName' " error.
You can also not access any variable that is declared in the code behind.
Benefits
PageMethods is a simple lightweight way to submit data to the server using ASP.NET AJAX. This doesn't submit whole page data to the server and also as opposed to the ASP.NET AJAX call back this doesn't even fire the Page_Load and other Page events of the code behind page.