Understanding Page Methods in ASP.NET AJAX

At times we find a need to avoid postbacks and for that we use AJAX calls to populate our ASP.NET Forms or save the information in Databases without a post back. In this article I am going to discuss how we can use PageMethod and avoid postbacks in performing CRUD (Create, Read, Update, and Delete) operations.

First of all we will try to learn what page method is in ASP.NET AJAX. PageMethod are similar to WebService’s WebMethod the only difference is that they are always declared as staric and is defined on the page so that it can be rendered on the page as inline javascript and Javascript can call those methods.

Let’s start with creating a aspx page that allows users to provide following information and on clicking save we will save it  to database.  Here I would like to highlight that it is necessary to have ScriptManager on the rendered aspx page. If you are using Master Pages then you can also place Script Manager on your master page instead of aspx page. You also need to set EnablePageMethods to true.

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”ScriptMgr” EnablePageMethods=”true” runat=”server”></asp:ScriptManager>

<div>

<h1>My Form</h1>

Full Name:<br />

<asp:TextBox ID=”txtName” runat=”server”></asp:TextBox><br />

Address:<br />

<asp:TextBox ID=”txtAddress” runat=”server”></asp:TextBox><br />

Secret Question:<br />

<asp:TextBox ID=”txtQuestion” runat=”server”></asp:TextBox><br />

Secret Answer:<br />

<asp:TextBox ID=”txtAnswer” runat=”server”></asp:TextBox><br />

<asp:Button ID=”btnSubmit” OnClientClick=”SaveInfo(); return false;”  runat=”server” Text=”Save” />

// here we have returned false in OnClientClick, other wise the page will be posted back to te server

</div>

</form>

<script type=”text/javascript”>

function SaveInfo() {

var UserInfo = new Object();

//UserInfo.FullName = $(‘#txtName’).val();

UserInfo.FullName = $get(“txtName”).value;

UserInfo.Address = $get(“txtAddress”).value;

UserInfo.Question = $get(“txtQuestion”).value;

UserInfo.Answer = $get(“txtAnswer”).value;

PageMethods.SaveInformation(UserInfo,OnSuccess,OnFail); // this is the call to PageMethod

}

function OnSuccess(msg){

alert(msg);

}

function OnFail(exception, ctx, methodName) {

alert(“Method:” + methodName + “\n” +

exception.get_exceptionType() + “\n” +

exception._message);
}

Next in the code behind file on the page we are going to declare our PageMethod that is being  called from client side scripts.

protected void Page_Load(object sender, EventArgs e)

{

}

//This is our Page Method

[WebMethod]

public static string SaveInformation(UserInfo u)

{

// some saving logic here

string msg = u.SaveInfo(u);

return msg;

}

In the above code UserInfo is my custom class which is the middle layer for saving the data in the database, you can also call a WebService and have your login inside it. Another thing to note  is that we have defined our PageMethod as static. It is because PageMethods are independent of ASP.NET page life cycle and we do not require an instance of the page to call a PageMethod. In fact they are like standalone web services. Another important point that we should note is, that PageMethods are efficient because they do not maintain ViewState on every call which is another reason about their static nature.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s