Introduction
After going through this article, you will be able to understand how to submit data to the server using ASP.NET AJAX PageMethods and get the response. At the end of the article, you will also know how to Serialize any object into JSON format and access its properties in plain JavaScript.To describe above things, I have taken a sample web form in whichI have two textbox Forename, Surname and a Submit button. In order to show how to serialize and return the object in JSON, I have a class called Person as well that has two properties Forename and Surname.
Lets start our short journey of learning PageMethods and JSON.
My ASPX Page
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.
- using System.Web.Services; // For web method
- using System.Runtime.Serialization.Json; // To serialize object into JSON
- using System.IO; // To work with MemoryStream
- using System.Text; // To work with Encoding
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>First see the 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.
<!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>
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.
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
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.///
/// Summary description for Person
///
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; }
}
}
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.Hope you find this article informative, please subscribe to the article feed for subsequent article alert in the email. Thanks and take care.
No comments:
Post a Comment