As readers of the site know, I like to monkey around from time to time with various UI frameworks. Last month I ran a 3 part series on the YUI that was really well received (thanks!), and continues to be some of the most visited articles on the site (I even have a postback from Yahoo!…kinda cool).

To continue with that success, I bring you a series on ASP.NET AJAX. In the next few articles I will be breaking down the framework and provide some examples of how I used it while building a site for a client. Keep in mind, that this series won’t be able to cover everything, but it will give enough detail so you will know how to tackle something that isn’t directly covered here.

So lets get started shall we?

The first thing you need to do is get the framework itself. You can do that at the ASP.NET AJAX homepage. There is even a nice video that goes over how to install it and setup your first project.

Right out of the box
The past few weeks I have been building a site for a client and I decided early on to use ASP.NET AJAX (formerly Atlas…which, of course is a better name) as the underlying framework. The site is pretty standard stuff. Maintain some data, show some data, make it look pretty. Nothin’ too fancy, but it really was a great jumping off point and allowed me to get my hands dirty with the 1.0 version of AJAX .NET.

I have learned from people emailing me and by reading articles that a lot of people are nervous about jumping into Ajaxland because they are afraid of javascript. I can’t really blame them. Even though I have worked with it for years, javascript can be quite a bear. However, the best thing about AJAX.NET (at least for me) is that, unless you are going off the beaten path, you don’t have to write any custom javascript to get your stuff working asynchronously.

As the last series went over, the YUI is all about the custom scripts, which can be disheartening to the newbies. Ajax.NET takes pretty much the opposite approach…just about everything is server rather than client driven. This is standard practice for MS web technologies, but if you are new to it, then it can be quite a shock. However, the good news is you can get a simple ajax site up in literally a few minutes.

The UpdatePanel
So how does the ajax stuff happen? Simple…put your stuff inside an UpdatePanel. Done.

Any postbacks done inside of an UpdatePanel are “seemless”. What is really sweet about this is, anything outside of the UpdatePanel is not refreshed. This can shrink down the traffic caused by the site considerably because you only have to pass what you want to change and the rest of the page doesn’t do a thing.

So lets take a “typical” example:

<asp:UpdatePanel ID="upMaintain" runat="server">
    <ContentTemplate>
       Name: <asp:TextBox id="txtName" runat="server" CssClass="textbox" />
       Address: <asp:TextBox id="txtAddress" runat="server" CssClass="textbox" />
       <asp:Button 
           runat="server" 
           ID="btnDoIt" 
           Text="Do It."
           CssClass="button" 
           OnClick="btnDoIt_Click" />
     </ContentTemplate>
</asp:UpdatePanel>

Ok, that is about as simple as it gets, but it shows you how easy it is to get ajax.net to work right out of the box. All you need to remember is that everything you want to refresh needs to be inside the ContentTemplate. Kinda cool eh?

So what is up with that button? Its gotta few parts, and if you are new to ASP.NET it is all new, so lets take a closer look. The button replaces the old <input /> tag from HTML. It basically is the same thing, and actually you can use an <input /> tag if you really want to (just give it a runat=”server” and you are good to go), but the .NET control is much simpler. If you are walking on the “dark side” might as well go all the way…

So our little button has some properties:

• runat=”server” - This little guy tells the framework that this control is handled on the server.
• ID=”btnDoIt” - This is what the button is referred to server side. If you are using Visual Studio, this will come up on intellisense.
• Text=”Do It.” - The text on the button itself.
• CssClass=”button” - ASP.NET has things like skins and themes, but honestly, I still use CSS. I know it, I understand it, and the skins stuff ain’t that special to begin with.
• OnClick=”btnDoIt_Click” - While it looks familiar, this is not a standard client side javascript onclick. This tells the button what server side method to call when a user clicks on it.

So what happens when our button gets clicked? Well behind the scenes .NET does a lot of javascript…and I mean a lot…but basically the typical XHttpRequest is fired off which is what gives the magic to ajax. What you really need to know is that when you click the button you are goin’ server side.

Unlike PHP and other more procedural languages, the code is that is run server side is separate from the client side stuff. In Visual Studio Professional it is actually a completely separate file, but in the free versions they are all together. Either way, it all works the same. Lets take a gander.

Whenever a page first comes up in .NET the Page_Load method is the first to get called….

always

…no matter what. So if you click a button, first Page_Load, then your click event. This can get a bit confusing when you are first starting out because it makes logical sense that the button handler would go first.

So in our example you click “Do It” and you travel back to the server. So lets say you want to change the text of the button when you click it…and you want to do it asynchronously…no problem.

protected void btnDoIt_Click(object sender, EventArgs e)
    {
        btnDoIt.Text = "Changed!";
    }

Its that simple. The AJAX stuff is completely hidden, and yet no flickers. Nice.

Triggers
Now, what if, for some reason, you didn’t want your button to be inside your UpdatePanel. Realistically this is a design thing. You want to put your button where you want it to go…you don’t want ASP.NET to tell you where you have to put it. Couldn’t agree more. This is where triggers come in.

<asp:UpdatePanel ID="upMaintain" runat="server">
    <ContentTemplate>
       Name: <asp:TextBox id="txtName" runat="server" CssClass="textbox" />
       Address: <asp:TextBox id="txtAddress" runat="server" CssClass="textbox" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnDoIt" />
    </Triggers>
</asp:UpdatePanel>

<asp:Button runat="server" ID="btnDoIt" Text="Do It." CssClass="button" 
OnClick="btnDoIt_Click" />

This looks almost exactly like our other little snippet except our button is outside of our UpdatePanel completely, and there is this:

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnDoIt" />
</Triggers>

The triggers tells the update panel that our “Do It” button is what sends the information to the server for processing. This allows us to put our button anywhere on the page.

I have to admit, I have been pretty impressed with the ASP.NET AJAX implementation. It takes a lot of the grunt work out of AJAX development. As I mentioned before, I am not a huge fan of custom javascript. I love what the language does for me, but I hate wrestling it to the ground.

Tomorrow I will go over Extenders, and there is some pretty sweet stuff in there, but some things you should watch out for as well.