Getting started with AJAX in ASP.Net:

 

As a prerequisite you would require to have Microsoft Visual Studio 2008 installed on your system. Alternatively you can also have Microsoft Visual Studio 2005 with AJAX extensions for ASP.Net installed. This would be a very basic example just to get you started and will touch the basics of writing AJAX enabled web applications using Visual Studio and ASP.Net.

 

So What is AJAX  and what is the use ?

 

AJAX is the abbreviation of “Asynchronous JavaScript and XML”. It is a technique in web development that is used to greatly improve the responsiveness and performance of a web application thus resulting in a great user experience. To understand how it works you should understand how the old web applications worked, how it all started, what is java script and what do we exactly mean by AJAX?

 

As web applications were hosted and running on a web server, the browser simply accessed the application on a server and rendered the html produced for the user.

 

Ever wondered why it took a long time after you clicked a button and when you look at the status bar its slowly moving and after some time it comes back with the response”.

 

This was mostly the case not with static websites but web applications where a lot of processing was done on the server side based on events like pressing a button. The page would “postback” and provide the server the necessary input. On the event handler there would be some validations and then some processing and then typically another “postback” updating the user. As more users complained that the application was not responsive enough or too slow, more techniques evolved to process minor data on the client side using javascript. Typically these would be tasks like client side input validations, dynamic menus and conversions displaying time and things like that.

The end user liked the experience as the application was much more responsive and wont go back to the server to process each and every piece of information (postback) .

 

So this idea was refined and the AJAX technologies were introduced and including in all the major web development frameworks. If you are reading this off course you are not an AJAX Expert , you just want to know how you can use AJAX in your application to make it more responsive or just for the heck of it J .

 

So here is how you do it with ASP.Net using Visual Studio 2008.

 

1/  Create a new website and name it as AJAXExample. This can be achieved by File -> New -> Website and selecting ASP.Net Website from the installed templates.

 

2/  Visual Studio .Net will generate the basic skeleton application by generating the following files (pages):

 

Default.aspx

Default.aspx.cs

 

Default.aspx is the actual page where all the controls or (html elements are). The Visual Studio IDE enables you to switch between Design View and Source View. Design view is where you can look how the page looks like and the source view is the html view of the page.

 

3/ Be in the design view and the first control to be dragged and dropped on the page must be “ScriptManager”. This is located under “AJAX Extensions”. Visual studio will rename it as ScriptManager1 and will add the following code when you switch to source view:

 

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

</asp:ScriptManager>

 

Note: This should be the first control in the page. It tells the asp.net worker process that this application or page uses AJAX and the required “dlls” have to be loaded in memory.

 

4/ Add the controls whatever is required in your application. For the sake of simplicity I will add a textbox and 2 buttons in the design view. The visual studio will generate the following code in the source view.

 

<asp:Button ID=”Button1″ runat=”server” Text=”Hello” onclick=”Button1_Click” />

 

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

 

<asp:Button ID=”Button2″ runat=”server” onclick=”Button2_Click” Text=”Clear” />

 

5/ Define the event handlers in “Default.aspx.cs”.

 

protected void Button1_Click(object sender, EventArgs e)

{

    TextBox1.Text = “Hello”;

}

 

protected void Button2_Click(object sender, EventArgs e)

{

    TextBox1.Text = “”;

}

 

6/  Add the following code in your html before and after your controls code. So the controls you want to process without postbacks has to be wrapped around this block:

 

 

<asp:UpdatePanel id=up1 runat=server>

    <ContentTemplate>

 

// Controls here

 

</ContentTemplate>

</asp:UpdatePanel>

 

7/  Run the application and Enjoyeee ! In the same way you can put more controls in a page like gridViews comboboxes and list boxes or even databound controls and use it without causing the application to postback.

 

I am copying and pasting the contents of my code files:

 

 

Default.aspx

 

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

 

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

    <title>Untitled Page</title>

</head>

<body>

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

    <div style=”height: 295px”>

    <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

    </asp:ScriptManager>

    <asp:UpdatePanel id=up1 runat=server>

    <ContentTemplate>   

        <asp:Button ID=”Button1″ runat=”server” Text=”Hello” onclick=”Button1_Click” />

        <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

        <asp:Button ID=”Button2″ runat=”server” onclick=”Button2_Click” Text=”Clear” />

    </ContentTemplate>

    </asp:UpdatePanel>

    </div>

   

    </form>

</body>

</html>

 

Default.aspx.cs:

 

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

 

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        TextBox1.Text = “Hello”;

    }

    protected void Button2_Click(object sender, EventArgs e)

    {

        TextBox1.Text = “”;

    }

}

 

 

 

Advertisements

1 Comment

Filed under C#

One response to “Getting started with AJAX in ASP.Net:

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