1. T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 31 Bookstore Application: Middle Tier Introducing Code-Behind Files, Session State and ASP.NET Ajax

2.  2009 Pearson Education, Inc. All rights reserved. 2 Outline 31.1 Reviewing the Bookstore Web Application 31.2 Programming the Books Page’s Code-Behind File 31.3 Coding the BookInformation Page’s Code-Behind File and Data Binding to the DetailsView 31.4 ASP.NET Ajax 31.5 Internet and Web Resources

3.  2009 Pearson Education, Inc. All rights reserved. 3 In this tutorial you will learn: ■Write the functionality for the middle tier, using Visual Basic code. ■Modify code-behind files in a web application. ■Pass information between ASPX pages using session handling. ■Use partial page updates. Objectives

4.  2009 Pearson Education, Inc. All rights reserved. 4 When the Books page is requested Retrieve the book titles from the database Display book titles in a ListBox When the user selects a book title from the ListBox Display the book’s cover image below the ListBox in an Image When the user clicks the View Information Button If the user did not select a book from the ListBox Display an error message Otherwise Store the selected book’s product ID Redirect the browser to the BookInformation page 31.1 Reviewing the Bookstore Web Application

5.  2009 Pearson Education, Inc. All rights reserved. 5 When the BookInformation page is requested Retrieve the selected book’s information from the database Display the book title in a Label Display the authors in a Label Display the cover art in an Image Display the remaining information in a DetailsView When the user clicks the Return to Book List Button on the BookInformation page Redirect the browser back to the Books page 31.1 Reviewing the Bookstore Web Application (Cont.)

6.  2009 Pearson Education, Inc. All rights reserved. 6 ■Review the ACE table for the application (Fig. 31.1). Figure 31.1 | ACE table for the Bookstore web application. (Part 1 of 3.) Action/Control/Event (ACE) Table for the Bookstore Web Application

7.  2009 Pearson Education, Inc. All rights reserved. 7 Figure 31.1 | ACE table for the Bookstore web application. (Part 2 of 3.) Action/Control/Event (ACE) Table for the Bookstore Web Application (Cont.)

8.  2009 Pearson Education, Inc. All rights reserved. 8 Figure 31.1 | ACE table for the Bookstore web application. (Part 3 of 3.) Action/Control/Event (ACE) Table for the Bookstore Web Application (Cont.)

9.  2009 Pearson Education, Inc. All rights reserved. 9 Changing the Class Name in Books.aspx.vb ■Re-open the Bookstore application. ■Click the Nest Related Files Button (Fig. 31.2) in the Solution Explorer toolbar. ■Expand the Books.aspx node to display Books.aspx.vb (Fig. 31.2). Figure 31.2 | Code-behind files for the Books.aspx and BookInformation.aspx pages in the Solution Explorer. Nest Related Files Button Code-behind files

10.  2009 Pearson Education, Inc. All rights reserved. 10 ■Figure 31.3 displays Books.aspx.vb —the code- behind file for Books.aspx. ■ASPX pages have corresponding classes written in a.NET language, such as Visual Basic. –The Visual Basic file that contains this class is called the code- behind file. –Visual Web Developer generates this code-behind file when the project is created. Changing the Class Name in Books.aspx.vb (Cont.) Figure 31.3 | Code-behind file for Books.aspx.

11.  2009 Pearson Education, Inc. All rights reserved. 11 ■Change the class name from _Default to Books (Fig. 31.4). ■The Page class defines the basic functionality for an ASPX page. –The Page class provides properties, methods and events that are useful for creating web applications. Changing the Class Name in Books.aspx.vb (Cont.) Figure 31.4 | Changing the Books.aspx page’s class name. Class name changed to Books

12.  2009 Pearson Education, Inc. All rights reserved. 12 Good Programming Practice For clarity, give an ASPX page’s class the same name as the page (e.g., Books for Books.aspx ).

13.  2009 Pearson Education, Inc. All rights reserved. 13 ■In Source view, change the Inherits attribute (line 2) to Inherits="Books" (Fig. 31.5). ■This ensures that the code from the ASPX page markup will become part of the Books class. Changing the Class Name in Books.aspx.vb (Cont.) Figure 31.5 | Changing the Books.aspx Inherits attribute.

14.  2009 Pearson Education, Inc. All rights reserved. 14 ■Double click the View Information Button to create its event handler (Fig. 31.6). ■Using ASP.NET’s session tracking features allows you to maintain data for a user. –Line 9 adds a key-value pair to the Session object. –A key/value pair associates a value with a corresponding name. –The Session object is a pre-defined part of the Page class. Defining the Click Event Handler for the View Information Button

15.  2009 Pearson Education, Inc. All rights reserved. 15 Figure 31.6 | informationButton_Click event handler definition. Defining the Click Event Handler for the View Information Button (Cont.) Creating a Session item to store the selected book’s id Redirecting the client browser to another web page

16.  2009 Pearson Education, Inc. All rights reserved. 16 ■In this case, the key is the name productID, and the value is the selected book’s ProductID. ■Storage of key/value pairs across web pages is made possible by session state, which is ASP.NET’s built-in support for tracking data. –Session state enables the current user’s information to be maintained throughout a browser session. –Session state is maintained until the user closes the browser or until the user does not interact with the website for 20 minutes. ■The Response object provides methods for responding to clients. Defining the Click Event Handler for the View Information Button (Cont.)

17.  2009 Pearson Education, Inc. All rights reserved. 17 ■Use Windows Explorer to locate the book cover images’ directory. ■Copy the images directory to the project directory, then click the Refresh Button in the Solutions Explorer ’s toolbar. Displaying the Selected Book’s Cover Image

18.  2009 Pearson Education, Inc. All rights reserved. 18 Figure 31.7 | Displaying the selected book’s cover image. Displaying the Selected Book’s Cover Image (Cont.) Double click the bookTitlesListBox to create its event handler (Fig. 31.7).

19.  2009 Pearson Education, Inc. All rights reserved. 19 ■Method Single returns one item in the query’s result. –In this case, Single returns one String from Coverart. ■Click the small black triangle in the upper-right corner of bookTitlesListBox to open the ListBox Tasks menu. –Click the Enable AutoPostBack CheckBox (Fig. 31.8). –When the selected index changes, the browser reregisters the page automatically. Displaying the Selected Book’s Cover Image (Cont.)

20.  2009 Pearson Education, Inc. All rights reserved. 20 Figure 31.8 | Enabling AutoPostBack on the bookTitlesListBox. Displaying the Selected Book’s Cover Image (Cont.)

21.  2009 Pearson Education, Inc. All rights reserved. 21 ■Right click BookInformation.aspx in the Solution Explorer, and select View Code (Fig. 31.9). Defining the Page_Load Event Handler for BookInformation.aspx Figure 31.9 | BookInformation class definition.

22.  2009 Pearson Education, Inc. All rights reserved. 22 ■An ASPX page’s Page_Load event handler is invoked when the page is loaded. ■Select (Page Events) for the Class Name and Load for the Method Name (Fig. 31.10). Defining the Page_Load Event Handler for BookInformation.aspx (Cont.) Figure 31.10 | Creating the BookInformation Page_Load event. Class Name drop-down list Method Name drop-down list Select Load from Method Name drop-down list

23.  2009 Pearson Education, Inc. All rights reserved. 23 ■The Page_Load event handler (Fig. 31.11) creates a DataContext object used to retrieve information from the database. Defining the Page_Load Event Handler for BookInformation.aspx (Cont.) Figure 31.11 | Page_Load event handler modified to set a parameter value and open a database connection. Retrieving the product id from the Session object Retrieving the selected book Displaying the selected book’s title, authors, and cover image

24.  2009 Pearson Education, Inc. All rights reserved. 24 ■Double click the Return to Book List Button to create its event handler (Fig. 31.12). Defining the bookListButton_Click Event Handler Figure 31.12 | Definition of the bookListButton_Click event handler. Redirecting to the Books.aspx page

25.  2009 Pearson Education, Inc. All rights reserved. 25 ■Select the bookDetailsView control and click the small black arrow in its upper-right corner (Fig. 31.13) to display its DetailsView Tasks menu. ■Select and choose a LINQ data source type. ■Name it linqDataSource. Click OK. Creating a Data-Bound DetailsView Using a LinqDataSource Figure 31.13 | Select in the Choose Data Source: ComboBox.

26.  2009 Pearson Education, Inc. All rights reserved. 26 ■Select the BookInformationDBDataContext object, then click Next >. ■In the next screen, ensure that the Products table is selected. ■Check the Copyright, Edition, ISBN and Description CheckBox es (Fig. 31.14). Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.)

27.  2009 Pearson Education, Inc. All rights reserved. 27 Figure 31.14 | Configuring the LinqDataSource ’s fields. Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.) Selecting table fields retrieved by the LinqDataSource

28.  2009 Pearson Education, Inc. All rights reserved. 28 ■Click the Where... Button. –Select ProductID from the Column: ComboBox, then select == from the Operator: ComboBox. –Select Session from the Source: ComboBox (Fig. 31.15). –In Parameter properties enter productID in the Session field: –Click the Add Button, OK, then Finish. Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.)

29.  2009 Pearson Education, Inc. All rights reserved. 29 Figure 31.15 | Configuring the LinqDataSource ’s Where expression. Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.)

30.  2009 Pearson Education, Inc. All rights reserved. 30 ■The fields have been updated to display the column names selected in the Configure Data Source dialog. ■Open the bookDetailsView Tasks menu and select Edit Fields... (Fig. 31.16). ■To reorder, select a field in Selected fields: and click the up- and down-arrow Button s to move the field. Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.)

31.  2009 Pearson Education, Inc. All rights reserved. 31 Figure 31.16 | Modifying the displayed fields in the DetailsView. Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.) Available fields Fields displayed in DetailsView Click to remove a field

32.  2009 Pearson Education, Inc. All rights reserved. 32 ■Run your web application. ■Select a book title and click the View Information Button. –If no book title is selected, the RequiredFieldValidator tells the user to Please select a book. ■Notice that the browser reloads the Books.aspx page every time you select a book. Testing Your Completed Bookstore Web Application

33.  2009 Pearson Education, Inc. All rights reserved. 33 ■In a traditional web application (Fig. 31.17): –The user fills in the form’s fields, then submits the form. –The browser makes a request to the server. –The server sends a response containing the exact page that the browser renders, which causes the browser to load the new page. ■While such a synchronous request is being processed on the server, the user cannot interact with the web page. 31.4 ASP.NET Ajax

34.  2009 Pearson Education, Inc. All rights reserved. 34 Figure 31.17 | Classic web application reloading the page for every user interaction. 31.4 ASP.NET Ajax (Cont.)

35.  2009 Pearson Education, Inc. All rights reserved. 35 ■Ajax web applications add a layer between the client and the server to manage communication between the two (Fig. 31.18): –The client requests information from the server. –The request is intercepted by the ASP.NET Ajax controls and sent as an asynchronous request. –The user continues interacting with the application. –Once the server responds, the control that issued the request calls a client-side function to process the data. –This function uses partial page updates to display the data without reloading the entire page. 31.4 ASP.NET Ajax (Cont.)

36.  2009 Pearson Education, Inc. All rights reserved. 36 Figure 31.18 | Ajax-enabled web application interacting with the server asynchronously. 31.4 ASP.NET Ajax (Cont.)

37.  2009 Pearson Education, Inc. All rights reserved. 37 ■Every ASP.NET Ajax-enabled web application has a ScriptManager. –Drag the ScriptManager from the AJAX Extensions tab in the Toolbox and place it above all other controls (Fig. 31.19) Using ASP.NET Ajax to Enhance the Books.aspx Page Figure 31.19 | Adding a ScriptManager to the Books.aspx page.

38.  2009 Pearson Education, Inc. All rights reserved. 38 Common Programming Error A ScriptManager must appear before any controls that use the scripts it manages.

39.  2009 Pearson Education, Inc. All rights reserved. 39 Common Programming Error Putting more than one instance of the ScriptManager control on an ASPX page results in an Invalid­ Operation­Exception when the page is initialized.

40.  2009 Pearson Education, Inc. All rights reserved. 40 ■The UpdatePanel control isolates a section of a page for a partial page update. –Drag the UpdatePanel control from the AJAX Extensions tab in the Toolbox and place it to the left of the bookTitlesListBox. –Add lines 60–61 of Fig. 31.20 into the UpdatePanel element to create the UpdatePanel ’s ContentTemplate. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

41.  2009 Pearson Education, Inc. All rights reserved. 41 Figure 31.20 | Adding an UpdatePanel to the Books.aspx page. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

42.  2009 Pearson Education, Inc. All rights reserved. 42 ■Cut and paste the tags for the bookTitlesListBox, linqDataSource and coverImage controls (lines 63–72 of Fig. 31.21) into the UpdatePanel ’s ContentTemplate tag. ■The bookTitlesListBox initiates the asynchronous request and the coverImage control is updated when the UpdatePanel performs a partial page update. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

43.  2009 Pearson Education, Inc. All rights reserved. 43 Figure 31.21 | Pasting controls into the UpdatePanel ’s ContentTemplate. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

44.  2009 Pearson Education, Inc. All rights reserved. 44 ■When the response from the server is received, the UpdatePanel performs a partial page update (Fig. 31.22). Figure 31.22 | UpdatePanel containing the controls to be updated. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

45.  2009 Pearson Education, Inc. All rights reserved. 45 ■Run the web application. ■Select a book title from the ListBox. –Notice that only the area of the browser containing the ListBox, LinqDataSource and Image is refreshed. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

46.  2009 Pearson Education, Inc. All rights reserved. 46 ■Figures 31.23 and 31.24 display the complete code for the Bookstore web application. Outline (1 of 2 ) Creating a Session item Redirecting client browsers to BookInformation.aspx page

47.  2009 Pearson Education, Inc. All rights reserved. 47 Outline (2 of 2 ) Returning a single element from a LINQ query

48.  2009 Pearson Education, Inc. All rights reserved. 48 Outline (1 of 2 ) Using a Session item to determine the ProductID of the selected book. Returning a single element from a LINQ query

49.  2009 Pearson Education, Inc. All rights reserved. 49 Outline (2 of 2 )