1.  2009 Pearson Education, Inc. All rights reserved.
Chapter 29
Web App Development
with ASP.NET:
A Deeper Look
 2009 Pearson Education, Inc. All rights reserved.
© by Pearson Education, Inc. All Rights Reserved.

2. A fair question should be followed by a deed in silence.
Dante Alighieri
Rule One: Our client is always right Rule Two: If you think our client is wrong, see Rule One.
Anonymous

3. OBJECTIVES In this chapter you will learn:
To control user access to web applications using forms authentication and ASP.NET login controls.
To use databases in ASP.NET applications.
To design a master page and content pages to create a uniform look-and-feel for a website.
To use ASP.NET AJAX to improve the user interactivity of your web applications.
Outline 29.1 Introduction
29.2 Case Study: Secure Books Database Application
29.3   ASP.NET AJAX

4. 29.2 Case Study: Secure Books Database Application
29.2.1 Examining the Completed Secure Books Database Application
This example uses a technique known as forms authentication to protect a page so that only users known to the website can access it.
Website visitors must log in before they are allowed to view the publications in the Books database.
The first page that a user would typically request is Login.aspx (Fig. 29.41).

5. 29.2 Case Study: Secure Books Database Application (Cont.)
Fig | Login.aspx page of the secure books database application.

6. 29.2 Case Study: Secure Books Database Application (Cont.)
A first-time visitor must click the link below the Log In button to create a new user before logging in, which redirects the visitor to CreateNewUser.aspx (Fig. 29.42).
Fig | CreateNewUser.aspx page of the secure books database application.

7. 29.2 Case Study: Secure Books Database Application (Cont.)
After creating the account, the user is automatically logged in and shown a success message (Fig. 29.43).
Fig | Message displayed to indicate that a user account was created successfully

8. 29.2 Case Study: Secure Books Database Application (Cont.)
Clicking the Continue button on the confirmation page sends the user to Books.aspx (Fig. 29.44), which provides a drop-down list of authors and a table containing the ISBNs, titles, edition numbers and copyright years of books in the database.
Fig | Books.aspx displaying books by Harvey Deitel (by default).

9. 29.2 Case Study: Secure Books Database Application (Cont.)
When the user chooses an author, a postback occurs, and the page is updated to display information about books written by the selected author (Fig. 29.45).
Fig | Books.aspx displaying books by Greg Ayer.

10. 29.2 Case Study: Secure Books Database Application (Cont.)
Clicking the Click here to log out link logs the user out, then sends the user back to Login.aspx (Fig. 29.46).
Fig | Logging in using the Login control.

11. 29.2 Case Study: Secure Books Database Application (Cont.)
If the user’s login attempt fails, an appropriate error message is displayed (Fig. 29.47).
Fig | Error message displayed for an unsuccessful login attempt.

12. 29.2 Case Study: Secure Books Database Application (Cont.)
We use a master page to achieve the common header. A master page defines common GUI elements that are inherited by each page in a set of content pages.
Content pages inherit visual elements from master pages—this is known as visual inheritance.

13. 29.2 Case Study: Secure Books Database Application (Cont.)
Examining the ASP.NET Web Forms App Template p.29-3
Create a new ASP.NET Web Site with a folder named Bug2Bug.
Test-Driving the Completed App p.29-6
29.2.3 Creating the Secure Books Database Application – Configuring the Website p.29-8

14. a) b)
Outline c)
Fig | Register.aspx page that provides a user registration form. (Part 3 of 3.)

15. a) b)
Fig | Login.aspx content page using a Login control. (Part 2 of 2.)

16. 29.3.1 Traditional Web Applications
29.3  ASP.NET AJAX
29.3.1 Traditional Web Applications
Figure 29.19 presents the typical interactions between the client and the server in a traditional web application.
Fig | Traditional web application reloading the page for every user interaction.

17. 29.3  ASP.NET AJAX (Cont.)
The user first fills in the form’s fields, then submits the form (Step 1).
The browser generates a request to the server, which receives the request and processes it (Step 2).
The server generates and sends a response containing the page that the browser renders (Step 3).
The browser to loads the new page (Step 4) and temporarily makes the browser window blank.
While such a synchronous request is being processed on the server, the user cannot interact with the web page.
If the user interacts with and submits another form, the process begins again (Steps 5–8).

18. 29.3 ASP.NET AJAX (Cont.) 29.3.2 Ajax Web Applications
Ajax web applications add a layer between the client and the server to manage communication between the two:
Fig | Ajax-enabled web application interacting with the server asynchronously.

19. 29.3  ASP.NET AJAX
In an Ajax application, when the user interacts with a page
Client creates an XMLHttpRequest object to manage a request
XMLHttpRequest object sends the request to and awaits the response from the server
3, 4 Requests are asynchronous, allowing the user to continue interacting with the application while the server processes the request concurrently
5,7 When the server responds, the XMLHttpRequest object that issued the request invokes a callback function,
6, 8 which typically uses partial page updates to display the returned data in the existing web page without reloading the entire page
Callback function updates only a designated part of the page
Partial page updates help make web applications more responsive, making them feel more like desktop applications
Fig | Ajax-enabled web application interacting with the server asynchronously.

20. 29.3  ASP.NET AJAX (Cont.)
When the user interacts with the page, the client requests information from the server (Step 1).
The request is intercepted by the ASP.NET AJAX controls and sent to the server as an asynchronous request (Step 2)
The user can continue interacting with the application in the client browser while the server processes the request.
Other user interactions could result in additional requests to the server (Steps 3 and 4).

21. 29.3  ASP.NET AJAX (Cont.)
Once the server responds to the original request (Step 5), the ASP.NET AJAX control calls a client-side function to process the data returned by the server.
This function—known as a callback function -uses partial-page updates (Step 6) to display the data without reloading the entire page.
At the same time, the server may be responding to the second request (Step 7) and the client browser may be starting another partial-page update (Step 8).

22. Traditional Web Applications vs. Ajax Applications
If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or
retrieving new data — the engine makes
those requests a·syn'chro·nously (-ā-sĭng‘…), usually using XML, without stopping a user’s interaction with the application.
An HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation the engine handles on its own.

23. Traditional Web Applications vs. Ajax Applications
Summary of using AJAX +’s:
Immediate gratification
Faster interaction
Fast responsiveness
Partial refreshing
Browser agnostic
Platform agnostic

24. 29.3  ASP.NET AJAX (Cont.)
The callback function updates only a designated part of the page.
Such partial-page updates help make web applications more responsive, making them feel more like desktop applications.
The web application does not load a new page while the user interacts with it.

25. 29.3.3 Examining an ASP.NET AJAX Application
29.3  ASP.NET AJAX (Cont.)
29.3.3 Examining an ASP.NET AJAX Application
The AJAX Extensions package that implements basic Ajax functionality comes preinstalled in Visual Web Developer 2008/2012
There is a tab of basic AJAX Extensions controls in the Toolbox.
Microsoft also provides the ASP.NET AJAX Control Toolkit, which contains rich, Ajax-enabled GUI controls, which you can download.

26. To add the controls to the Toolbox in Visual Web Developer:
29.3  ASP.NET AJAX (Cont.)
To add the controls to the Toolbox in Visual Web Developer:
Right click the Toolbox and choose Add Tab.
Type AJAX Control Toolkit as the name of the new tab.
Right click the tab and select Choose Items.
Click Browse... and select AjaxControlToolkit.dll from the SampleWebSite\Bin subfolder.
Finally, click OK, and a list of available Ajax controls will appear under the AJAX Control Toolkit tab when you are in Design mode.

27. To demonstrate ASP.NET AJAX capabilities we’ll enhance the Validation application from Section 19.6.
The only significant modifications to this application appear in its .aspx file.
We’ll use Ajax-enabled controls to add Ajax features to this application.
Figure below is a modified Validation.aspx file that enhances the application by using several ASP.NET AJAX controls.
Outline
Validation.aspx
(1 of 10)
Associate the AjaxControlToolkit assembly with a tag prefix, allowing us to use AJAX Control Toolkit elements.
Fig | Validation application enhanced by ASP.NET AJAX. (Part 1 of 10.)

28. Outline Validation.aspx (2 of 10)
Load the ToolkitScriptManager on the page.
Fig | Validation application enhanced by ASP.NET AJAX. (Part 2 of 10.)

29. Outline Validation.aspx (3 of 10)
Fig | Validation application enhanced by ASP.NET AJAX. (Part 3 of 10.)

30. Outline Validation.aspx (4 of 10)
ValidatorCalloutExtender controls display error messages in small yellow callouts next to the input fields.
Fig | Validation application enhanced by ASP.NET AJAX. (Part 4 of 10.)

31. Outline Validation.aspx (5 of 10)
Fig | Validation application enhanced by ASP.NET AJAX. (Part 5 of 10.)

32. Outline Validation.aspx (6 of 10)
Fig | Validation application enhanced by ASP.NET AJAX. (Part 6 of 10.)

33. Validation.aspx
(7 of 10)
Fig | Validation application enhanced by ASP.NET AJAX. (Part 7 of 10.)

34. Validation.aspx
(8 of 10)
Fig | Validation application enhanced by ASP.NET AJAX. (Part 8 of 10.)

35. Outline Validation.aspx (9 of 10)
a) The user enters his or her first and last name and proceeds to the Contact tab.
Outline
Validation.aspx
(9 of 10)
b) The user enters an address in an incorrect format and presses Tab to move to the next input field. A callout appears informing the user to enter an address in a valid format.
Fig | Validation application enhanced by ASP.NET AJAX. (Part 9 of 10.)

36. Outline Validation.aspx (10 of 10)
c) After the user fills out the form properly and clicks the Submit button, the submitted data is displayed at the bottom of the page with a partial-page update.
Fig | Validation application enhanced by ASP.NET AJAX. (Part 10 of 10.)

37. ScriptManager Control
29.3  ASP.NET AJAX (Cont.)
ScriptManager Control
The ScriptManager control manages the client-side scripts that enable asynchronous Ajax functionality.
There can be only one ScriptManager per page.
To incorporate controls from the AJAX Control Toolkit, use the ToolkitScriptManager, which derives from ScriptManager, instead.
Drag the ToolkitScriptManager from the AJAX Control Toolkit tab in the Toolbox to the top of the page.
A script manager must appear before any controls that use the scripts it manages.

38. Common Programming Error 29.1
29.3  ASP.NET AJAX (Cont.)
Common Programming Error 29.1
Putting more than one instance of the ScriptManager control on a Web Form causes the application to throw an InvalidOperationException when the page is initialized.

39. Grouping Information in Tabs Using the TabContainer Control
29.3  ASP.NET AJAX (Cont.)
Grouping Information in Tabs Using the TabContainer Control
The TabContainer control enables you to group information into tabs that are displayed only if they are selected.
To create multiple tabs, drag the TabContainer control from the AJAX Control Toolkit tab in the Toolbox to your form.
To add a tab, open the TabContainer Tasks smart-tag menu and select Add Tab Panel. This adds a TabPanel object to the TabContainer.

40. 29.3  ASP.NET AJAX (Cont.)
In Design view, you can navigate between tabs by holding Ctrl and clicking the tab header, and you can drag and drop elements into the tab.
The content of a TabPanel must be defined inside its ContentTemplate element.

41. Partial-Page Updates Using the UpdatePanel Control
29.3  ASP.NET AJAX (Cont.)
Partial-Page Updates Using the UpdatePanel Control
The UpdatePanel control eliminates full-page refreshes by isolating a section of a page for a partial-page update.
To implement a partial-page update, drag the UpdatePanel into your form, and place controls to be updated inside it.
To specify when an UpdatePanel should update, you need to define an UpdatePanel trigger.

42. 29.3  ASP.NET AJAX (Cont.)
Adding Ajax Functionality to ASP.NET Validation Controls Using Ajax Extenders
Several controls in the Ajax Control Toolkit are extenders— components that enhance regular ASP.NET controls.
ValidatorCalloutExtender controls display error messages in small yellow callouts next to the input fields.
To create a ValidatorCalloutExtender, you can drag and drop it, or you can select the Add Extender option in a validator’s smart-tag menu.
In the Extender Wizard dialog that displays (Fig. 29.70), choose ValidatorCalloutExtender, specify its ID, and click OK.

43. Fig. 29.15 | Creating a control extender using the Extender Wizard.
29.3  ASP.NET AJAX (Cont.)
Fig | Creating a control extender using the Extender Wizard.

44. 29.3  ASP.NET AJAX (Cont.)
ValidatorCalloutExtender’s TargetControlID property indicates the validator control from which the extender should obtain the error message.
This is automatically determined if you created the extender through the Extender Wizard.
The ValidatorCalloutExtenders display error messages with a nicer look-and-feel.

45. New ASP.NET 3.5 Data Controls
ASP.NET 3.5 introduces two new server-side data controls, the ListView and the DataPager.
The ListView is highly customizable control for displaying data. Its implementation is similar to that of a WPF ListView.
You can define an assortment of templates such as ItemsTemplate, SelectedItemTemplate, ItemSeparatorTemplate, and GroupTemplate to customize how to display data.

46. New ASP.NET 3.5 Data Controls
The DataPager control works alongside a data control, such as GridView or ListView, and customizes how it pages through data.
With a data pager, you can customize the combination of page-navigation buttons (such as next, previous, or page numbers) that are displayed.