Contents Overview 1 Presentation Tier Architecture 2 Overview of ASP.NET 12 ASP.NET Server Controls 19 ASP.NET Web Controls 25 Lab 4: Controlling the Presentation Tier with ASP.NET 43 Review 51 Module 4: Designing the Client Experience Information in this document is subject to change without notice. The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted. Complying with all applicable copyright laws is the responsibility of the user. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation. If, however, your only means of access is electronic, permission to print one copy is hereby granted. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.  2001 Microsoft Corporation. All rights reserved. Microsoft, Active Directory, ActiveX, BizTalk Server, FoxPro, FrontPage, Hotmail, Jscript, Outlook, PowerPoint, Visio, Visual Basic, Visual C#, Visual C++, Visual Studio, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries. Other product and company names mentioned herein may be the trademarks of their respective owners. Module 4: Designing the Client Experience iii Instructor Notes This module explains how the Microsoft ® .NET Framework can be used to help in building the presentation tier of an e-business Web site. Specifically, this module focuses on the challenges facing presentation tier development, and it then introduces new features of ASP.NET that can be used to ease the development process and improve the client experience. Special emphasis is placed on ASP.NET Web controls and validation controls because these offer significant development time saving over traditional Active Server Pages (ASP) development. After completing this module, students will be able to:  Identify the requirements of a well-designed presentation tier from the user’s perspective.  Explain the ASP.NET object model.  Describe the features of ASP.NET.  Describe how ASP.NET server controls and Web controls simplify client development. Materials and Preparation This section provides the materials and preparation tasks that you need to teach this module. Required Materials To teach this module, you need the following materials:  Microsoft PowerPoint ® file 2260A_04.ppt  Module 4, “Designing the Client Experience”  Lab 4, “Controlling the Presentation Tier with ASP.NET”  Animation “ASP.NET Execution Model” in file 2260A_04A005.exe Preparation Tasks To prepare for this module, you should:  Read all of the materials for this module.  Complete the lab.  View the animation.  View the example ASP.NET pages that are mentioned in the module. Presentation: 115 Minutes Lab: 35 Minutes iv Module 4: Designing the Client Experience Multimedia Presentation This section provides multimedia presentation procedures that do not fit in the margin notes or are not appropriate for the student notes. ASP.NET Execution Model Present the animation titled “ASP.NET Execution Model” by using the instructions provided in the following table. Action Say this Click First Request This is what happens when an .aspx is requested for the first time. The client sends a request for a page to the ASP.NET server. (The request is in the Hypertext Transfer Protocol (HTTP) GET form). In this animation, the client is requesting the Hello.aspx page. The server checks to see whether there is an existing output cache for the requested page or if the requested page is already compiled. If there is no output cache or compiled code, the source code for the page is interpreted by a parser, and a compiler is invoked. The compiler loads the page and compiles the code into Microsoft intermediate language (MSIL). The compiled MSIL code is used for returning the requested page to the client. Click Second Request When the client requests the same page the second time, the server again checks for an existing output cache or the compiled code. If the server finds the compiled code, notice how the compiler step is omitted and the compiled code is used immediately for returning the request. Click Output Cache This is the other case, when the server finds the requested page in the output cache. In this case, notice how all of the other steps are bypassed and the requested page is directly returned from the output cache. Module 4: Designing the Client Experience v Module Strategy Use the following strategy to present this module:  Presentation Tier Architecture Discuss the technologies that can be used to create the presentation tier and the requirements for a well-designed client experience. Do not go into any more detail than what is covered in the section because various technologies are expanded in the rest of the sections in this module.  Overview of ASP.NET Provide an overview of ASP.NET in terms of its role in the .NET Framework, execution model, and new features. The most important concept to convey to the students is that ASP.NET makes the development of Web applications a lot easier and a lot more manageable than ASP.  ASP.NET Server Controls Explain the role of server controls in developing the presentation tier and the different types of server controls. Explain that the aim of server controls is to allow developers to create applications in a way similar to how they would use compiled language tools, like Microsoft Visual Basic ® . Stress that, because their code executes on the server, the controls are not browser dependent.  ASP.NET Web Controls Describe the types of Web controls in ASP.NET and how to add controls to pages. Emphasize the benefits of using ASP.NET validation controls.  Lab 4, “Controlling the Presentation Tier with ASP.NET” In this lab, students will use ASP.NET to enhance the presentation tier of the LitWare Books e-business application. They will write list-bound code to retrieve products from a database and then display them on a page. Students will also use validation controls in the .aspx pages to ensure that the data submitted by the shoppers is valid. Module 4: Designing the Client Experience 1 Overview  Presentation Tier Architecture  Overview of ASP.NET  ASP.NET Server Controls  ASP.NET Web Controls *****************************I LLEGAL FOR N ON -T RAINER U SE ***************************** This module describes the key issues associated with the design and development of the presentation tier of an e-business Web site. In this module, special emphasis is placed on Microsoft ® ASP.NET technology and how it can be used to simplify the development of the presentation tier. After completing this module, you will be able to:  Identify the requirements of a well-designed presentation tier from the user’s perspective.  Explain the ASP.NET object model.  Describe the features of ASP.NET.  Describe how ASP.NET server controls and Web controls simplify client development. Topic Objective To provide an overview of the module topics and objectives. Lead-in This module discusses the design and development of the presentation tier of an e-business site by using ASP.NET. 2 Module 4: Designing the Client Experience    Presentation Tier Architecture  Presentation Tier Technologies  Architectural Requirements  Site Design Considerations  Improving Presentation Tier Performance  Using Forms *****************************I LLEGAL FOR N ON -T RAINER U SE ***************************** To design the presentation tier of an e-business application, you must know the requirements of the presentation tier and the technologies that can be used to create the presentation tier. Also, you must be able to address all of the architectural issues that are involved in delivering the usability, performance, and scalability that is expected in a professional e-business Web site. This section focuses on the requirements of a well-designed presentation tier that can enrich the user’s experience. Topic Objective To describe the presentation-tier components and design requirements. Lead-in In this section, you will learn about the requirements of a well-designed presentation tier that can enrich the user’s experience. Module 4: Designing the Client Experience 3 Presentation Tier Technologies *****************************I LLEGAL FOR N ON -T RAINER U SE ***************************** The presentation tier in e-business applications consists of a number of technologies, ranging from the Web browser to the Web server. All of these technologies are involved in creating the interface that is presented to the user. Browsers There are currently several browsers and browser versions available in the software market. The two most popular browsers are Microsoft Internet Explorer and Netscape Navigator. Despite the differences caused by the products being manufactured by two different companies, the most critical difference for a developer is the version of the browser software. The versions can be divided into three groups:  Version 3 Version 3 browsers include Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0. In situations in which developers are targeting these clients, they must assume that the client is capable of rendering only standard Hypertext Markup Language (HTML) and that any scripting capability is very limited. Scripts inevitably lead to more processing on the server.  Version 4 Version 4 browsers include Microsoft Internet Explorer 4.0 and Netscape Navigator 4.5 and 4.7. These browsers support client-side scripting and Dynamic HTML (DHTML).  Versions 5 and 6 Version 5 and 6 browsers include Microsoft Internet Explorer 5 and 5.5 and Netscape Navigator 6. These browsers have Extensible Markup Language (XML) support. Topic Objective To describe the technologies available to the developer of the presentation tier. Lead-in The presentation tier consists of various technologies. 4 Module 4: Designing the Client Experience HTML The Web browser is responsible for rendering HTML. A basic Web page starts with an <HTML> tag and ends with a corresponding </HTML> close tag. Within these tags are additional tags that are nested to produce the final document. The browser translates these tags into what is shown when the page is displayed to the user. Recent browser versions that have support for XML enable client-side script to process the data intelligently at the client, without requiring a round-trip to the server. You can write client-side scripts to filter an XML data document, sort the data into a different order, perform calculations on the data, and add new XML content. For example, you can write scripts that generate client-side XML to represent the new items in a shopping cart as the user adds items to it. Web Servers Microsoft’s Web server is called Internet Information Services (IIS), and it is a core part of the Microsoft Windows ® operating system. The operation of a Web server has developed from one in which the server simply delivered static HTML pages to one in which dynamic content is built on the server before the request from the Web browser is serviced. This dynamic content can be built from information retrieved from other servers, both within the data center and elsewhere on the Internet. IIS allows dynamic content to be created in several ways:  Common Gateway Interface (CGI) applications CGI is a Web programming interface that allows access to the Hypertext Transfer Protocol (HTTP) stream. CGI executes a new process every time a script is accessed, which can lead to performance issues on large sites.  Internet Services Application Programming Interface (ISAPI) applications ISAPI is a low-level programming interface for Web application developers. ISAPI applications are written in languages such as Microsoft Visual C++ ® . These applications are compiled and are run on the Web server. ISAPI applications are more scalable than CGI, thereby requiring the application to be loaded into the Web server’s memory once for all clients that are using it.  ASP/ASP.NET Pages Active Server Pages (ASP) are Web pages that contain scripting elements that are run on the server. Common tasks for ASP pages are retrieving data from a database and generating subsequent HTML or XML pages. ASP.NET offers several improvements over ASP. ASP.NET is discussed in the following sections of this module.  COM objects Applications that are running on IIS can call Component Object Model (COM) objects that have been written in more powerful languages, such as Microsoft Visual Basic ® and Visual C++. COM objects allow for the encapsulation of programming logic and allow the calling application to concentrate on invoking the correct method, properties, or events, without requiring an understanding of how the object works internally. [...]... ASP The features are numerous and many of them have an impact on how the client architecture is developed This section examines the ASP.NET execution model and explores the features of ASP.NET The latter sections in this module explain how ASP.NET can simplify the development of the Web presentation and, at the same time, enrich the user experience Module 4: Designing the Client Experience 13 The. .. OnServerClick="runcode" runat="server"> 22 Module 4: Designing the Client Experience The submit button is also running as a server control in the preceding example When clicked, it will run the code “runcode” on the server, which is included in the script tags The code disables the text box from accepting further input on the client side The resulting HTML that is sent to the client is: Result . herein may be the trademarks of their respective owners. Module 4: Designing the Client Experience iii Instructor Notes This module explains how the Microsoft. impact on the design of the site. 8 Module 4: Designing the Client Experience  What is the browse-to-buy ratio? This is a critical measure in the design