AJAX-enabling an ASP.NET website

• Download solution files - 6 KB

Solve an ASP.NET AJAX Coding Challenge from InnerWorkings

Objective: To use the ScriptManager and UpdatePanel controls to enable AJAX-style partial page updates.

Scenario Description: Using Microsoft ASP.NET AJAX Extensions, this task demonstrates how to convert an existing ASP.NET web page to one with Asynchronous JavaScript and XML (AJAX) functionality. It leverages the features of the Microsoft ASP.NET AJAX Extensions' ScriptManager and UpdatePanel controls to allow sections of the page to perform partial page rendering.

In this sample application, Default.aspx presents a web form for a bug-tracking website where users can view a list of bugs displayed in a paged GridView control. Users can also enter a tester's name in the Reported By text box and click the Search button to display only those bugs reported by the tester.

Currently, every time the user clicks the Search button or moves to another page of the GridView control, a full page postback occurs and the entire page is rendered after each request. Once complete, however, the application must refresh only the GridView control when the user clicks the Search button or navigates to another page of the GridView control.

To achieve this, you are required to add a ScriptManager control that enables partial page rendering. You must place the GridView control and one of the Label controls in a new UpdatePanel control, and ensure that the application refreshes only this UpdatePanel control when the Click event of the Search button fires or the user moves to another page of the GridView control.

Problem Statement: To complete this task, you should modify the sample application to meet the requirements listed below.

Modify the website project to ensure the following:

• The website project references the Microsoft.Web.Extensions.dll that comes with the Microsoft ASP.NET AJAX Extensions.

Modify the Default.aspx page to ensure the following:

• The Default.aspx page contains a ScriptManager control that allows partial page rendering.
• The BugView GridView control and the PanelUpdateTimeLabel Label control in the Default.aspx page are encapsulated inside an UpdatePanel control called BugListUpdatePanel.
• The BugListUpdatePanel UpdatePanel control in the Default.aspx page defines a trigger that asynchronously refreshes the contents of this UpdatePanel control when the Click event of the SearchButton button control is raised.

You should build the application and run it. To test your application, enter a user's name in the Reported By text box and click the Search button. Ensure that the page does not flicker due to a full page refresh when the application updates the details in the GridView control. Also, ensure that the browser's progress bar does not appear. Ensure that paging through the GridView has the same effect, and monitor the labels showing the times that the UpdatePanel and the page were last refreshed.

Hints: To add the ASP.NET AJAX Extensions controls to the Visual Studio 2005 Toolbox, right-click an existing Toolbox tab, select Add Tab from the pop-up menu, and name the tab as appropriate—"AJAX Extensions", for example. Right-click the new tab, and select Choose Items from the pop-up menu. In the Choose Toolbox Items dialog box that opens, click the Browse button and navigate to the location of the Microsoft.Web.Extensions.dll file on your machine (this file is usually located in C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025). Click the OK button to close the Choose Toolbox Items dialog box, and add the controls to the new tab.

When you try to add a reference to Microsoft.Web.Extensions.dll, the .NET tab of the Add Reference dialog box may not display that assembly. If this happens, click the Browse tab, navigate to the correct location as described previously, and add the assembly manually.

Additional Reading: The following links contain information that is relevant to completing this task:

• ASP.NET AJAX Overview
• ScriptManager Class
• UpdatePanel Class
• Triggers Property
• AsyncPostBackTrigger Class
• ASP.NET AJAX 1.0 Beta 2 Download

Note: All code samples and learning materials above were provided by InnerWorkings.