Recently, Microsoft released the commercial version of AJAX 1.0 as an extension of ASP.NET 2.0. That means you can develop AJAX enabled Web applications using ASP.NET 2.0.
After fruition of this article, you will have a better understanding of AJAX 1.0 extensions and learn how easy is to build AJAX enabled Web applications using ASP.NET 2.0 and Visual Studio 2005.
What do I need to build AJAX Enabled Applications?
You need ASP.NET 2.0 and Visual Studio 2005 to build AJAX enabled Web applications using Visual Studio.
Why AJAX?
This is probably one of the most asked questions about AJAX.
The main advantage of using AJAX enabled ASP.NET Web applications is improved efficiency and reduce the page refresh time. AJAX enables us to refresh only parts of a Web page that have been updated, rather refreshing the entire page.
For example, if you have four controls on a Web page say a DropDownList, a TextBox, a ListBox, and a GridView. The GridView control shows some data based on the selection in DropDownList and other controls. Now let's say GridView also has paging and sorting options. So whenever you move to next page or apply sort, the entire page and all four controls on the page will be refreshed and you will notice a page flicker because ASP.NET has to render the entire page on the client side and it happens once
In an AJAX-enabled Web page, you will see only the GridView data is being refreshed and rest of the page and controls do not. Doing so, we not only get better performance and faster refresh, we also get a better or should I say "smoother" user experience.
You may want to see a live example of AJAX enabled GridView on our www.mindcracker.com web site in Jobs section here: http://www.mindcracker.com/Jobs/. On this page, if you click on Next page link, you will see only GridView data is being refreshed. We are also implementing AJAX on C# Corner and other sites as well.
What Browsers AJAX Support?
AJAX is JavaScript based and supports most of the browsers including Internet Explorer, Mozilla Firefox, and Apple Safari.
How to Install AJAX 1.0?
You may download AJAX 1.0 from Microsoft's official AJAX website http://ajax.asp.net. This website also have articles, tutorials and source code samples. We also have an AJAX section on C# Corner here: http://www.c-sharpcorner.com/Articles/ArticleListing.aspx?SectionID=1&SubSectionID=176
What is ASP.NET AJAX Extensions?
ASP.NET AJAX is a combination of client-script libraries (JavaScript) and ASP.NET server components that are integrated to provide a robust development framework. If you look at your library folder, you will see following .js files listed in Figure 1.
Figure 1.
What are ASP.NET AJAX Server Controls?
The ASP.NET AJAX server controls consist of server and client code that integrate to produce AJAX-like behavior. The following controls are available in AJAX 1.0 library:
- ScriptManager - Manages script resources for client components, partial-page rendering, localization, globalization, and custom user scripts. The ScriptManager control is required in order to use the UpdatePanel, UpdateProgress, and Timer controls.
- UpdatePanel - Enables you to refresh selected parts of the page instead of refreshing the whole page by using a synchronous postback.
- UpdateProgress - Provides status information about partial-page updates in UpdatePanel controls.
- Timer - Performs postbacks at defined intervals. You can use the Timer control to post the whole page, or use it together with the UpdatePanel control to perform partial-page updates at a defined interval.
What is ASP.NET AJAX Control Toolkit?
The ASP.NET AJAX Control Toolkit is a collection of samples and components that show you some of the experiences you can create with rich client ASP.NET AJAX controls and extenders. The Control Toolkit provides both samples and a powerful SDK to simplify creating and reusing your custom controls and extenders. You can download the ASP.NET AJAX Control Toolkit from the ASP.NET Ajax Web site.
Building your first AJAX enabled ASP.NET Web Application
Now let's build a simple AJAX enabled Web application using Visual Studio 2005. In this application, I will load some data from a database in two GridView controls one using AJAX and one without AJAX.
After installation of AJAX 1.0, when you create a Web application using Visual Studio 2005, you will see ASP.NET AJAX-Enabled Web Site template in Templates list. See Figure 2.
Figure 2. ASP.NET AJAX-Enabled Web Site template
When you select this template and create the project, the default page looks like Figure 3 and AJAX Intensions controls are added to the Toolbox. As you can see from Figure 3, the Timer, ScriptManager, ScriptManagerProxy, UpdateProgress, and UpdatePanel controls are available in the Toolbox. The ScriptManager is required to use Timer, UpdateProgress, and UpdatePanel controls.
Figure 3. AJAX Extensions Controls
Now I add an UpdatePanel, a DropDownList, a ListBox, and two GridView controls to the page. I place on GridView on the UpdatePanel and other outside of the UpdatePanel. By simply placing a control on the UpdatePanel control adds AJAX support to that control. So by placing the GridView control on the UpdatePanel enables AJAX in the Gridview control.
I add a SqlDataSource and configure it to get data from a database table and bind it to both of the GridView controls. I also enable sorting and paging in the GridView controls.
After that I add some items to the DropDownList and ListBox controls.
The final page looks like Figure 4.
Figure 4.
Now when I run the application and click on page number or sort, the AJAX enabled GridView refreshes the data only but the other GridView refreshes the entire page including DropDownList and ListBox controls.
Summary
Finally, AJAX 1.0 for ASP.NET 2.0 is here. In this article, I talked answered some basic but important AJAX related questions and also showed how to create an AJAX enabled ASP.NET Web application using Visual Studio 2005.