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.

Slides:



Advertisements
Similar presentations
ASP.NET Ajax Supplementary Tutorial. Why Use ASP.NET AJAX? - I ASP.NET AJAX enables you to build rich Web applications that have many advantages over.
Advertisements

11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6.
Chapter 10 Database Applications Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill.
© by Pearson Education, Inc. All Rights Reserved.
Visual Basic 2010 How to Program. © by Pearson Education, Inc. All Rights Reserved.2.
Visual Basic 2010 How to Program Reference: Instructor: Maysoon Bin Duwais slides Visual Basic 2010 how to program by Deitel © by Pearson Education,
 2006 Pearson Education, Inc. All rights reserved Introduction to the Visual C# 2005 Express Edition IDE.
Internet Technologies 1 Master of Information System Management Java Server Faces Model/View/Controller Design Pattern for Web Development Slides.
Chapter 12: ADO.NET and ASP.NET Programming with Microsoft Visual Basic.NET, Second Edition.
Chapter 28 Use ASP.net development server to test web applications Use a web browser to request documents from a webserver Expecute an asp.net web application.
Computer Science 101 Web Access to Databases Overview of Web Access to Databases.
ASP.Net, Web Forms and Web Controls 1 Outline Introduction Simple HTTP Transaction System Architecture Creating and Running a Simple Web Form Example Web.
Chapter 9 Web Applications Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill.
9-1 aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf.
Tutorial: Introduction to ASP.NET Internet Technologies and Web Application 4 th February 2010.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Bookstore Web Application Introducing Visual Web Developer 2008 Express and the.
Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls.
1 Web-Enabled Decision Support Systems Introduction to ASP.NET Prof. Name Position (123) University Name.
Databases and LINQ Visual Basic 2010 How to Program 1.
Programming with Microsoft Visual Basic 2012 Chapter 13: Working with Access Databases and LINQ.
 2008 Pearson Education, Inc. All rights reserved Ajax-Enabled Rich Internet Applications.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
IT533 Lectures Session Management in ASP.NET. Session Tracking 2 Personalization Personalization makes it possible for e-businesses to communicate effectively.
10-1 aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Introducing Web Controls Outline 29.1 Analyzing the.
Chapter 9 Programming with Web Forms Programming In Visual Basic.NET.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 30 – Bookstore Application: Client Tier Introducing.
Web Programming: Client/Server Applications Server sends the web pages to the client. –built into Visual Studio for development purposes Client displays.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Typing Application Introducing Keyboard Events, Menus, Dialogs and the Dictionary.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 2 Welcome Application Introducing the Visual Basic 2008 Express Edition IDE.
1 Data Bound Controls II Chapter Objectives You will be able to Use a Data Source control to get data from a SQL database and make it available.
1 Web-Enabled Decision Support Systems Database Connectivity in Web Applications Don McLaughlin IE 423 (304) West.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 30 – Bookstore Application: Client Tier Examining.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. Programming with Visual Web Developer Chapter 9.
Murach’s ASP.NET 4.0/VB, C1© 2006, Mike Murach & Associates, Inc.Slide 1.
Microsoft Visual Basic 2005 CHAPTER 7 Creating Web Applications.
CSCI 6962: Server-side Design and Programming AJAX Tools in JSF and ASP.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 32.1 Reviewing the Bookstore Application 32.2.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 3 Welcome Application Introduction to Visual Programming.
1 Chapter 12 – Web Applications 12.1 Programming for the Web, Part I 12.2 Programming for the Web, Part II 12.3 Using Databases in Web Programs.
ASP.NET The Clock Project. The ASP.NET Clock Project The ASP.NET Clock Project is the topic of Chapter 23. By completing the clock project, you will learn.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 17 – Flag Quiz Application Introducing One-Dimensional.
Chapter Thirteen Working with Access Databases and LINQ Programming with Microsoft Visual Basic th Edition.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 31.1 Reviewing the Bookstore Application 31.2.
Visual C# 2012 How to Program © by Pearson Education, Inc. All Rights Reserved.
1 Chapter 20 – Data sources and datasets Outline How to create a data source How to use a data source How to use Query Builder to build a simple query.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 2.1 Test-Driving the Welcome Application 2.2.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 25.1 Test-Driving the ATM Application 25.2.
BlackBerry Applications using Microsoft Visual Studio and Database Handling.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 7 1 Microsoft Office FrontPage 2003 Tutorial 8 – Integrating a Database with a FrontPage.
INSERT BOOK COVER 1Copyright © 2012 Pearson Education, Inc. Publishing as Prentice Hall. Exploring Getting Started with VBA for Microsoft Office 2010 by.
Chapter 5 Introduction To Form Builder. Lesson A Objectives  Display Forms Builder forms in a Web browser  Use a data block form to view, insert, update,
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Bookstore Web Application: Client Tier Introducing Web Controls.
IT533 Lectures ASP.NET AJAX.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Student Grades Application Introducing Two-Dimensional Arrays and RadioButton.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Address Book Application Introducing Database Programming.
11 Getting Started with ASP.NET Beginning ASP.NET in C# and VB Chapters 1 and 2.
CSCI 3327 Visual Basic Chapter 13: Databases and LINQ UTPA – Fall 2011.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
111 State Management Beginning ASP.NET in C# and VB Chapter 4 Pages
Dive Into® Visual Basic 2010 Express
 2009 Pearson Education, Inc. All rights reserved.
ASP.NET Forms.
Visual Basic 2010 How to Program
Chapter 10 Accessing Database Files
Presentation transcript:

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

 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

 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

 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

 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.)

 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

 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.)

 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.)

 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

 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.

 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

 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 ).

 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.

 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

 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

 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.)

 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

 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).

 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.)

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

 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.

 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 ). Defining the Page_Load Event Handler for BookInformation.aspx (Cont.) Figure | Creating the BookInformation Page_Load event. Class Name drop-down list Method Name drop-down list Select Load from Method Name drop-down list

 2009 Pearson Education, Inc. All rights reserved. 23 ■The Page_Load event handler (Fig ) creates a DataContext object used to retrieve information from the database. Defining the Page_Load Event Handler for BookInformation.aspx (Cont.) Figure | 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

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

 2009 Pearson Education, Inc. All rights reserved. 25 ■Select the bookDetailsView control and click the small black arrow in its upper-right corner (Fig ) 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 | Select in the Choose Data Source: ComboBox.

 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 ). Creating a Data-Bound DetailsView Using a LinqDataSource (Cont.)

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

 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 ). –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.)

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

 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 ). ■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.)

 2009 Pearson Education, Inc. All rights reserved. 31 Figure | 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

 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

 2009 Pearson Education, Inc. All rights reserved. 33 ■In a traditional web application (Fig ): –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 ASP.NET Ajax

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

 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 ): –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 ASP.NET Ajax (Cont.)

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

 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 ) Using ASP.NET Ajax to Enhance the Books.aspx Page Figure | Adding a ScriptManager to the Books.aspx page.

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

 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.

 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 into the UpdatePanel element to create the UpdatePanel ’s ContentTemplate. Using ASP.NET Ajax to Enhance the Books.aspx Page (Cont.)

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

 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 ) 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.)

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

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

 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.)

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

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

 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

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