Partial page refresh using jQuery

Introduction

Many a times partial page refresh type of question has been asked on DotNetFunda.Com forums, so I decided to write this short and sweet article. This particular article has been written to provide hints to solve the problem asked in this this http://www.dotnetfunda.com/forums/thread3324-refersh-aspnet-page.aspx.

Note: If you are a web developer, you may find my 101+ jQuery How to's ebook useful.

I think many of us already know that partial page refresh or postback can be done easily by using ASP.NET AJAX ScriptManager and UpdatePanel. However in many cases, we are not allowed or even suggested to use ASP.NET AJAX. In this article, we are going to learn how to do partial page refresh using jQuery.

To show partial page refresh, I have taken two page

1. Default.aspx - page that sends the request to ProcessData.aspx page, get response and partially refresh a portion of the page.
2. ProcessData.aspx - page that sends the response from the server

and my sample default.aspx page looks like below

Let us understand partial page refresh using jQuery in 3 simple steps. My purpose here is to get the sum of two numbers by sending the request to the server and getting the result (sum) as response and populating it into the page without whole page refresh.

Step 1

Lets see the code for default.aspx that will fire the jQuery methods.

<script type="text/javascript" language="Javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
 
<div>
<p>
Click on the 1st button to load data using Post method and 2nd to load data using
Get method.</p>
 
<input type="button" id="btnPost" value="1. Load Data using jQuery Post" />
<input type="button" id="btnGet" value="2. Load Data using jQuery Get" />
<p>
Result:
<div id="divResult"></div>
</p>
</div>
<script language="javascript" type="text/javascript">
$("#btnPost").click(function () {
$.post("ProcessData.aspx", { a: "20", b: "6" }, function (data) { $("#divResult").html("<b>The result is: " + data + "</b>"); });
});
 
$("#btnGet").click(function () {
$.get("ProcessData.aspx", { ag: "2", bg: "6" }, function (data) { $("#divResult").html("<b>The result is: " + data + "</b>"); });
});
</script>

In the above code, I have two buttons. On click on each button I have specified a jQuery function that sends the ajax request to the server. First button post the data on the server using Form POST method and second button posts the data on the server using Form GET method. Rest all the parameters for these methods are same.

Lets see the parameters I have used for jQuery.post andjQuery.get methods

• The 1^st parameter is the URL where we need to post the request and get the response.
• The 2^nd parameter is the data we need to pass to that page. This is specified in between opening and closing curly braces "{ and }" and parameter is written in the key value pair separated by ":" (colon). In my case I am sending two parameter a and b.
• The 3^rd parameter is the callback function that contains the response as argument and it fires when request is successful. In my case I have specified the inline function, you can declare your function separately and call that function here.

There is nothing into the code behind of this (default.aspx) page.

Step 2

In step 1 we desiged the page that sends the request, now lets see the code for the ProcessData.aspx.cs that receives the request, process the data and sends the response.

protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.ClearContent();
 
if (Request.Form["a"] != null && Request.Form["b"] != null)
{
int a = int.Parse(Request.Form["a"]);
int b = int.Parse(Request.Form["b"]);
int sum = a + b;
Response.Write("The Sum is " + sum);
System.Threading.Thread.Sleep(5000);
}
 
if (Request.QueryString["ag"] != null && Request.QueryString["bg"] != null)
{
int a = int.Parse(Request.QueryString["ag"]);
int b = int.Parse(Request.QueryString["bg"]);
int sum = a + b;
Response.Write("The Sum is " + sum);
}
}

First two Response lines are just to clear all previous responses of the page, if any. 

The 1^st if condition checks for the Request.Form objects. The point to note here is that when the request will be sent to this page using $.post method then we will have to retrieve the values of a and b using Request.Form and if the request will be sent using $.get method, we will have to retrieve the value using Request.QueryString. Rest all codes are preety simple, just parsing the values, summing up and writing the sum using Response.Write method.

There is be nothing into the ProcessData.aspx page so I have not covered that part.

Step 3

Now, let's run the default.aspx page and you should see your browser something like shown in Picture 1 below.

Now, click on the 1^st button and you will see that you will get response as "The Sum is 26" and on click on 2^nd button you will get response as "The Sum is 8". All this happens seamlessly without full page refresh or any postback visible to the user.

I have written hundreds of .NET How to's solution (ebook + source code + video) series based on real time project problems, click here to get it.

Conclusion

Using jQuery.post and jQuery.get method we can send asynchronous request to the server and get the response. That response can be set into the aspx page without full page refresh.

This solution is the part of my 101+ jQuery How to's ebook.