Solve an ASP.NET AJAX Coding Challenge from InnerWorkings
Objective: To use the
UpdatePanel controls to enable AJAX-style partial page updates.
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
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
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.
BugView GridView control and the
PanelUpdateTimeLabel Label control in the Default.aspx page are encapsulated inside an
UpdatePanel control called
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.