Click here to Skip to main content
15,905,420 members
Articles / Web Development / HTML

Magic of JQuery in ASP.NET, Simplifying AJAX

Rate me:
Please Sign up or sign in to vote.
3.36/5 (9 votes)
6 Jan 2011CDDL1 min read 29K   27   7
Magic of JQuery in ASP.NET, simplifying AJAX

jQuery is a powerful tool that can be used to enhance our ASP.NET application.

In the time of development, we often face problems like “need to show certain data based on a button click” or “need to implement tab in pages where each tab contains costly DB operation”.

There are lots of ways to to this using traditional AJAX like ASP.NET AJAX. But if we consider the hassle related to UpdatePanel, then we can find a few people who will go for it.

Let's see how we can achieve this sort of Magic in our application easily with JQuery!

For the sake of simplicity, let's assume that we have one aspx page with one div and one button. After clicking the button, one extensive database operation will be held and the div’s inner HTML will be updated without page refresh.

It's to be noted that in order to leverage this facility of accessing Page method through client script, we need to add script manger and need to enable page method.

ASP.NET
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

<asp:panel ID="divExtensiveData" runat="server"></asp:panel>

<asp:Button ID="btnFetchData" Text="Fetch Data" 
runat="server" OnClientClick="fetchData(); return false;" />

Now let's write one method in code behind, i.e., in aspx.cs file that will do the actual db operation.

C#
[WebMethod]
public static string fetchData(string someParameter)
{
string result = string.Empty;
/// Do extensive db operation
/// Assign value to result
return result;
}

Now we will get back to our aspx page and will write one method to access this page method.

JavaScript
<script type="text/javascript">
function fetchData(parameter)
 { 
  PageMethods.fetchData(parameter,dataFetched,dataNotFetched);
 }
function dataFetched(result)
{
 var panelID = '<%=divExtensiveData.ClientID %>';
 $("#"+panelID).html(result);
}
function dataNotFetched()
{
 var panelID = '<%=divExtensiveData.ClientID %>';
 $("#"+panelID).html("<h1>Error Occured.</h1>");
}
</script>

Now explaining the page method call from script. In our call to page method, I have given three parameters whereas the page method takes only one. The second one is just a reference of the method that will be executed after successfully page method call and the third one is the reference of the method that will be called if the page method encounters some error.

Just use this concept and be a magician of JQuery in ASP.NET!!!

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)


Written By
Software Developer (Senior) Vizrt Bangladesh
Bangladesh Bangladesh
I am truly versatile and 360 degree Engineer having wide range of development experience in .NET and Java Platform. I am also proficient in system level programming in C++. To me technology is not at all a problem, it’s the client requirement that matters! That is I am ready and comfortable to use any technology to make the business of my client a success.

In my five years of experience I have the opportunities to work for fortune 500 companies of US and many renowned clients from Europe.

My Linkedin Profile: http://bd.linkedin.com/in/mahmudazad

Comments and Discussions

 
GeneralMy vote of 2 Pin
robinparriath28-Jul-11 20:40
robinparriath28-Jul-11 20:40 
GeneralMy vote of 1 Pin
VMAtm31-Jan-11 22:45
VMAtm31-Jan-11 22:45 
Generalcontact Pin
Paralias10-Jan-11 8:20
Paralias10-Jan-11 8:20 
GeneralMy vote of 2 Pin
Pooya Paridel9-Jan-11 22:47
Pooya Paridel9-Jan-11 22:47 
Generalthanks for sharing Pin
Pranay Rana7-Jan-11 10:34
professionalPranay Rana7-Jan-11 10:34 
QuestionHi Pin
Shrimali, Labhesh18-Jan-10 17:12
Shrimali, Labhesh18-Jan-10 17:12 
AnswerRe: Hi Pin
Shayne P Boyer19-Jan-10 4:48
Shayne P Boyer19-Jan-10 4:48 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="CP_JQuery_ASPNET._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div id="divExtensiveData"></div>
<asp:Button ID="btnFetchData" Text="Fetch Data" runat="server" OnClientClick="fetchData('this is a test of the CP Article'); return false;" />
</div>

<script type="text/javascript">
function fetchData(parameter)
{
PageMethods.fetchData(parameter,dataFetched,dataNotFetched);
}
function dataFetched(result)
{
$("#divExtensiveData").html(result);
}
function dataNotFetched()
{
$("#divExtensiveData").html("<h1>Error Occured.</h1>");
}
</script>

</form>
</body>
</html>
<pre>


'Code Behind
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{

[WebMethod()]
public static string fetchData(string someParameter)
{
string result = string.Format("{0} - {1}", DateTime.Now.ToString, someParameter);
return result;
}

}

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.