Click here to Skip to main content
Click here to Skip to main content

AJAX-enabling an ASP.NET website

, 13 Dec 2006
Rate this:
Please Sign up or sign in to vote.
To use the ScriptManager and UpdatePanel controls to enable AJAX-style partial page updates.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

bfinnerty
Web Developer
United States United States
I've worked in the learning software industry for 10+ years, with a background in product development and product marketing. At present, I'm a co-founder and director at InnerWorkings, where we help software developers learn .NET by writing code and solving programming challenges in Visual Studio. I was born in Dublin, Ireland but my family lives in the San Francisco Bay Area.

Comments and Discussions

 
GeneralCant find web assembly [modified] PinmemberGrant Gussie21-Apr-10 12:01 
Generalajax-enabled GridView PinmemberJoaoSilva200729-May-07 14:32 
GeneralThe project/web file cannot be found Pinmemberdonrajah28-Nov-06 17:34 
GeneralRe: The project/web file cannot be found Pinmemberbfinnerty28-Nov-06 19:22 
GeneralRe: The project/web file cannot be found Pinmemberandyytang9-Dec-06 10:08 
GeneralRe: The project/web file cannot be found Pinmemberbfinnerty13-Dec-06 12:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 13 Dec 2006
Article Copyright 2006 by bfinnerty
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid