Getting Started with ASP.NET AJAX

I have been doing AJAX in ASP.NET for a while using frameworks like Anthem.Net and AJAX.net. I did not use Atlas as Atlas was still in development and more over our client has not upgraded to .Net 2.0 yet.

I have started playing with Microsoft ASP.NET AJAX (formerly Atlas) for a week now. At first I was really overwhelmed with the whole Atlas documentation but felt a little comfortable after watching the Ajax videos on ASP.NET website .

Here I will go through the process of getting started with Microsoft ASP.NET AJAX. You can access this post here on Google docs.
http://docs.google.com/View?docid=dd8p9vd3_7dzckx7

Install MS AJAX
Download and install Atlas from here.(http://ajax.asp.net/downloads/default.aspx?tabid=47)

Visual Studio Tool Box
After installing MS AJAX, you should see AJAX Extensions tab in the visual studio tool box.

New ASP.NET project template
A new project template that allows you to create ASP.NET AJAX enabled Web applications is also installed on installing Atlas.

Programming with Atlas
Atlas offers you two ways of building AJAX functionality into your website.
1) Using Update Panel Control to do partial rendering
2) Ability to place calls to remote endpoints.

Update Panel
Using Update Panel greatly simplifies AJAX programming. All you have to do is wrap the controls that need to be updated partially and asynchronously inside the update panel. The Update panel intercepts any form submissions and data being sent and routes them through XMLHttpRequest to the server. When the response is ready, the update panel updates the DOM tree by updating only the controls which are part of the update panel. The beauty of the update panel lies in the fact that it takes care of placing AJAX calls, updating the ViewState and doing partial rendering with out us having to write a single piece of javascript.

To drive home the point, let us create a simple ASP.NET project.
The project will have have one webform (Default.aspx) with a GridView control in it.
The GridView will display a list of customers from a database (ShoppinCart).

Create the Database
Please create a database with the name ShopoingCart and a table called Customer in that database. The customer table will have the following columns. Add those columns and populate the table with some data. (CustomerId, FirstName, LastName, Phone, Email)

Create the Project
Open Visual Studio 2005 and create a new project of type ASP.NET AJAX-Enabled Web Application. Name the project AJAXTest.

Add the connection string to Web.config (Modify the connection string accordingly)
<connectionstrings><br /> <add name="ShoppingCartConnString" connectionstring="data source=Kode-Cruncher\SQLEXPRESS;database=ShoppingCart;integrated security=true"><br /></connectionstrings>

Add UpdatePanel to the webform
On to your Default.aspx page, drag and drop an UpdatePanel control from the tool box (under AJAX Extension tab)

Drag and drop GridView
Drag and drop a gridview into the updatepanel. Also drag and drop SqlDataSource control inside the update panel. If you created the database and customer table as directed above, your can replace your update panel with the code below.

<contenttemplate><br /> <asp:gridview id="grdCustomers" autogeneratecolumns="false" runat="server" datakeynames="CustomerId" datasourceid="sdsCustomers"> <columns> <br /> <asp:boundfield datafield="CustomerId" headertext="Customer Id" readonly="true"> <asp:boundfield datafield="FirstName" headertext="First Name"> <asp:boundfield datafield="LastName" headertext="Last Name"> <asp:boundfield datafield="Phone" headertext="Phone"> <asp:boundfield datafield="Email" headertext="Email"> <asp:commandfield headertext="Edit" showeditbutton="true"> <asp:commandfield headertext="Delete" showdeletebutton="true"><br /> </columns><br /></asp:GridView> <br /><br /><asp:sqldatasource id="sdsCustomers" runat="server" providername="System.Data.SqlClient" connectionstring="">" SelectCommand="SELECT * FROM [Customer]"UpdateCommand="UPDATE [Customer] SET FirstName=@FirstName,LastName=@LastName,Email=@Email,Phone=@Phone WHERE CustomerId=@CustomerId"DeleteCommand="DELETE FROM [Customer] WHERE customerId=@CustomerId"> <br /></asp:SqlDataSource><br /></contenttemplate> <br /></asp:UpdatePanel>

Test the Page
Set default.aspx as your start page and run the project. As you click edit, updata and delete controls in the grid, you should
notice that your page does not do a full refresh, only the grid is updated.

Conclusion
We have seen how easy it is to add AJAX functionality to your webform with update panel contro. In the next article I will demonstrate
how to call web services with Atlas.