Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Fri, 25-Jul-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
37300
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

Partial page refresh using jQuery

SheoNarayan
Posted by under jQuery category on for Intermediate level | Points: 250 | Views : 45457 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: 4.33 out of 5
3 vote(s)
This article descibes how to do partial page refresh using jQuery.

 Download source code for 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 1st parameter is the URL where we need to post the request and get the response.
  • The 2nd 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 3rd 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 1st 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 1st button and you will see that you will get response as "The Sum is 26" and on click on 2nd 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.

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 The Founder 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: Karaniscool on: 1/14/2011 | Points: 25

very nice tutorial.

I have one question. I was wondering if there is a way to call a web method from the post or get ?

Posted by: SheoNarayan on: 1/14/2011 | Points: 25

Hi Karan,

As far as I know and tried, calling web service (web method) from jQuery post or get method is not possible as web service needs content type as "application/json" that you can't pass into get and post method of the jQuery. However content type can be specified in the jQuery.ajax method so we can consume web service using jQuery.ajax method. I have written an article on this at this http://www.dotnetfunda.com/articles/article1127-consuming-web-service-webmethod-from-jquery-in-aspnet-.aspx, you can have a look.

Thanks!



Posted by: Akiii on: 5/29/2011 | Points: 25

Excellent article.......Sir

Thanks and Regards
Akiii

Posted by: Vuyiswamb on: 9/6/2011 | Points: 25

Another good article :) i am learning JQuery today :) my vote is 5 i was able to do the examples. So tell me the Page that can do the Calculation , can we replace it with a DAL class so e.g when saving data, can i call a class instead of a page in asp.net and do my insert and rebind the grid if iam using one to refresh the page but at the same time not get a flicking page ?

THanks


Posted by: Vinay13mar on: 10/15/2012 | Points: 25
Posted by: Gauravbembi on: 12/31/2012 | Points: 25

Hi Sheo Narayan,

Its very nice article on $.post and $.get methods.
I have one question.

What is the difference between $.post and $.get methods and when should we use these?

Thanks and Regards,
Gaurav Bembi


Login to post response

Comment using Facebook(Author doesn't get notification)