Demystifying AJAX and Creating ASP.NET AJAX Applications using VS2008

19 06 2009

asp-net-ajax copyThis post was created after I have realized that most people gives me a blank (O.o) look when I first tell them about AJAX technologies on the web. In Malaysia, most people will mistakenly think that AJAX is a floor cleaning soap named Ajax Fabuloso due to its really cheesy advertisement on Malaysian TV. Football fans on the other hand always links AJAX to a famous Dutch based football club thus causing even more confusion. In this post, I will be highlighting what AJAX is (in the web development world) and how you can start creating your very own AJAX applications on ASP.NET using Visual Studio 2008 in 5 minutes.

What is AJAX!?
Simply speaking in layman terms, AJAX (shorthand word for Asynchronous Javascript and XML) is basically Javascript with the addition of XML involved as data passes through. In other words, a page can have its content changed dynamically without doing a page refresh or by going to another page. As a result, what you get is a really cool, desktop like experience on your web application because the page does not require any form of postback (refresh) to obtain/show new data.

If you have been wondering how AJAX is being used today, just refer to Facebook.  Facebook is one of the popular websites to advocate AJAX and uses it frequently in almost every page. From adding your friends, chatting, checking out pictures in a gallery, getting updated news feeds and doing quizzes, most of the time, a page refresh is never used there.

As a result, your web server will also get better performance because all that is being downloaded by the client browser is just parts of the page, not the entire chunk unlike what is being done in non-AJAX pages. It also provides a more responsive and easy to use website for your visitors.

I am Interested! So how do I Create my AJAX Page?
One way to use AJAX on your web page is to use type the relevant Javascript into your HTML files. But if you are a ASP.NET developer, you can rejoice because AJAX controls and functions have already been built in into Visual Studio 2005 and 2008. This means that you can create cool AJAX applications really quickly and easily. The only thing that will stand in your way is creativity in how you want to develop your applications. In this tutorial, I will be working on Visual Studio 2008 to create a AJAX RSS Reader to get most read most read RSS news from The Star Online, a Malaysian newspaper portal. If you are doing it on Visual Studio 2005, the process should be similar.

Step 1 – Startup Visual Studio and create a New Web Application

Step-01 Dialog Box OptionsThe first part should be pretty straightforward… Just open up Visual Studio and click to File->New->Web Site to get the “New Web Site” dialog box. In the dialog box, ensure that ASP.NET Web Site is selected and then give your site’s folder a name.

After doing so, you should be getting your empty page called Default.aspx. Please ensure that you switch to Design View by clicking on the “Design” button on the bottom left of the code editor so that we can add AJAX controls into it.

Step 2: Adding your ASP.NET and AJAX Controls

Step-02 - ToolboxAJAX controls are available inside your toolbox by default under the category “AJAX Extensions”. In order to use AJAX on your ASP.NET web application, it is COMPULSORY for you to insert a ScriptManager into your web page. This is because the script manager will be used to handle all AJAX calls or functionality by doing the necessary javascript conversion for the functions on your page.

The next control that you should have in your page should be the “UpdatePanel“. The update panel is the location of your web page where you would like functions to run without doing a page refresh. This is where I will place a GridView (a table to show the news details) and a Button which will be clicked in order for the news to be displayed on the GridView. Note: Make ensure that both your Gridview and Button is placed inside the UpdatePanel! Your design view should resemble the following:

Step-02 - Your Design View

Step 3: Add your Code Behind

Now we need to tell the button to download the news from The Star Online and place the details into the GridView. To do so, double click on your button in Design view to trigger the click event. The code should mirror the following:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
     Dim reader As XmlTextReader = New XmlTextReader("http://thestar.com.my/rss/mostview/nation.xml")

     'return a new DataSet
     Dim ds As DataSet = New DataSet()
     ds.ReadXml(reader)

     GridView1.DataSource = ds.Tables(3)
     GridView1.DataBind()
 End Sub

If you want, you can basically try running your application by clicking on the debug button or pressing F5. If you get a dialog box requesting for debugging, just enable it. What you should get would be a page which will download latest news from The Star without any reloading or page refresh once you press on the button!

Step 4: Add Loading Effects

Usually in AJAX pages, you will be shown with a loading animated GIF while the data is being fetched from the server. These animated GIFs are useful to show your visitor that the site is currently fetching data. Currently in our web application, the data is being fetched asynchronously but the visitors may not be too sure whether the news is being fetched or not. But firstly, you will need to get an animated GIF for displaying the progress. You can generate and download dynamic and interesting loading GIFs from www.ajaxload.info. In this site, you can create dynamic loading animated GIFs that you want to place in your site really easily.

Since you have already got it, lets place it into our ASP.NET web page. Go back to your design view of your web page and add the control under AJAX Extensions called UpdateProgress. Place it into wherever you want the animated GIF to show when the page loads. Lastly, you must insert your animated GIF that you would like to display into the UpdateProgress Control. Your Design view for your web form should now resemble the following:

Step-04 - Design View with UpdateProgress

Step 5: Test your Application

Congratulations! You have successfully created your first AJAX web site. Now you can test it by debugging the application or right clicking on the Default.aspx file and clicking on “View in Browser”. You will notice the animated GIF appearing while it is fetching data from The Star, and the best part is, the page does not refresh one single bit.

News Details Loading upon Pressing the Button

News Details Loading accompanied by your animated GIF upon the click of the Button

The Star News Showing on your Page without Page Refresh/Reload

The Star News Showing on your Page without Page Refresh/Reload

But of course, your journey for AJAX does not end here. There are also many other cool AJAX features that you can play with by downloading the AJAX Control Toolkit

This toolkit is an add in to Visual Studio and contains plenty of other AJAX controls for you to try. To learn more about AJAX Control Toolkits, please head over to www.asp.net’s AJAX mini site.

Conclusion
So that is it. I hope you enjoyed this tutorial and start your own ASP.NET AJAX web application soon. If you want to get the source code without trying, please get it here. Be back for more about tech at Derek’s Tech Blog.

Source Code: AJAXSite.zip (6.82 KB)


Actions

Information

10 responses

19 06 2009
unrealweapon

hmmmm. how do u create an Ajax .. which can directly connects to my from anywhere in the universe ?
Ajax not friendly for my weakest pc at my home, 256 mb ram , p4 2GHZ.

no doubt ajax is darn cool.

19 06 2009
unrealweapon

and with nice fragrance ~ Ajax Fabuloso !

21 06 2009
derekchan84

Yeah, it won’t run well on slower PCs. But with the advent and demand for web 2.0 applications, AJAX seems to be kicking in on high gear.

Hope my next web app will maximize the use of AJAX

6 07 2009
flashplayer

Great post!

5 04 2010
joul

———————————————————————
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Button1.Click
Dim reader As XmlTextReader = New XmlTextReader(“http://thestar.com.my/rss/mostview/nation.xml”)

‘return a new DataSet
Dim ds As DataSet = New DataSet()
ds.ReadXml(reader)

GridView1.DataSource = ds.Tables(3)
GridView1.DataBind()
End Sub
———————————————————————
why i cant use this code in Microsoft Visual Studio 2008?
this code seems like VB’s code..am i rite?
im a beginner user of visual studio.im sorry for not understanding.but i really interested in AJAX

5 04 2010
derekchan84

Hi joul,
Yes, it is in VB. Which line is giving you an error?

6 04 2010
joul

the error starts from
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
.
.
.
.
End Sub

how to run VB code in VS?
————
this how my button in Design view look like..

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{

}
}

where to put that code actually?

6 04 2010
derekchan84

Oh… I can see that you actually created the website in C# language.
What you should do is to ensure that you select a Visual Basic template first when you are creating a new website. The codes should then work.🙂

6 04 2010
joul

owh ok.ive selected the VB templete now.but there still some errors.

——————–
.
.
Dim reader As XmlTextReader = New XmlTextReader(“http://thestar.com.my/rss/mostview/nation.xml”)
.
.

Dim ds As DataSet = New DataSet()
.
.
.
End Sub

————-

its says… ” Type ‘XmlTextReader’ is not defined.” and ” Type ‘DataSet’ is not defined.”
how to define it?

7 04 2010
derekchan84

ok, to use it, you need to put in the following codes at the top:
Imports System.Xml
Imports System.Data

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




%d bloggers like this: