Search
MVC Online Training
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Tue, 16-Sep-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
37550
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

Using PageMethods and JSON in ASP.NET AJAX

SheoNarayan
Posted by under ASP.NET AJAX category on for Intermediate level | Views : 81729 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 5 out of 5
2 vote(s)
This article describes how to use ASP.NET AJAX PageMethods to submit data to the server and get response. It also shows how to serialize object into JSON format and access its properties in JavaScript.

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.


  1. using System.Web.Services; // For web method

  2. using System.Runtime.Serialization.Json; // To serialize object into JSON

  3. using System.IO; // To work with MemoryStream

  4. using System.Text; // To work with Encoding

Picture 1


Code Snippet - 1

<%@ 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 

  1. 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.

  2. 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.


Page copy protected against web site content infringement by Copyscape
About the Author

SheoNarayan

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Microsoft_MVP,Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com

Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan
Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Posted by: Vuyiswamb on: 8/10/2010

very Good article, the statement

SP.NET AJAX call back this doesn't even fire the Page_Load and other Page events of the code behind page.


How can someone mimic this event, i mean how can someone fire this events manually?

Thanks

Posted by: SheoNarayan on: 8/10/2010

Hi Vuyiswa,

Not sure how you can do that, however I think its not possible using PageMethod way I am doing. However if you use ASP.NET AJAX, that fires all the ASP.NET Page life cycle events.

Regards

Login to post response

Comment using Facebook(Author doesn't get notification)