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:
Note: All code samples and learning materials above were provided by InnerWorkings.