.Net Hive

A blog about Microsoft .Net Platform & other industry happenings

Integrating jQuery in ASP.NET

Almost all of you have tried ASP.NET AJAX for Ajax related operations. But there are times when you need something more from ASP.NET AJAX, and unfortunately you cannot. These are the times you ask for alternatives.

The available alternatives for AJAX behavior in your application belong to open source community. Some of the open source frameworks for AJAX are

My personal favorite is jQuery. There are many reasons for that. One very important one is related to the UI flexibility provided by jQuery.

So, I have decided to run down a simple example for all of you where we will utilize jQuery in ASP.NET application to fetch the Server Side DateTime. Note that we will be developing this demo application in ASP.NET 1.1, to prove a point that how easy it is to integrate jQuery in already deployed application as compare to ASP.NET AJAX.

Some of the Pre-requisites, you should care about is the one and only jQuery library itself. You can get the library from here jQuery Download [http://jqueryui.com/download]. One great thing you will notice, when you will go to download section; it allows you to select/deselect different features of the framework along with theme selection as well. This feature helps the developer to avoid bulky packages and be functionality centric. You should also bookmark the website, as you will need it later on for different knowledge base articles regarding the framework. Also, the forums and discussion boards are very active and usually you get the response to your questions quite quickly.

Coming to the demo, first we have to include the jQuery library in the default.aspx

<script type=”text/javascript” src=”jquery-1.1.js”>

First we will define the action which will get triggered when user will click on “Get Server Time”

$(function() {
    $(“a#runSample1”).click(function() {
        $.get(“GetServerTime.aspx”, function(response) {
            alert(response);
         });
    });
});

For your reference, let’s take a look at when we just did.

This code will be executed on page onload event.

$(function() {

This  code, we are binding an event with the “onclick” event of the hyperlink. Which user will click?

$(“a#runSample1”).click(function() {

The above code allows us to define that, when user clicks the link “Get Server Time”, the action will get fired and will call a proxy page which we will create later on. That proxy page will return the server time into the response object which we just mentioned in the above code. And it will be displayed in message box.

$.get(“GetServerTime.aspx”, function(response) {
    alert(response);
});

Now proceeding to the proxy page “GetServerTime.aspx”. On this page, we don’t need the HTML. Therefore, we will only keep the top declaration and will remove rest of the HTML

<%@ Page Codebehind=”GetServerTime.aspx.cs” AutoEventWireup=”false” Inherits=”AJAXJQuerySample.GetServerTime” %>

The code behind of the proxy page will be

private void Page_Load(object sender, System.EventArgs e)
{
    Response.Expires = -1;
    //required to keep the page from being cached on the client’s browser
    Response.ContentType = “text/plain”;
    Response.Write(DateTime.Now.ToString());
    Response.End();
}

In the page_load method, Response.Expires = -1, allowes us to make sure that page wont get cached in the browser.

Response.ContentType = “text/plain”;
Response.Write(DateTime.Now.ToString());
Response.End();

The above code just set the content of the response to plain text and writes the current time to the response stream.

This is it. Now, we can run our sample application and click the “Get Server Time” link, this should give us the current time in an alert box:

 

Demo Screenshot

Demo Screenshot

Hope this will be hlpful to get you started. Let me know about it.

Waqas Ahmed

Advertisements

Filed under: ASP.NET, , , ,

Pages

Categories

Archives