Module 4: Separating Code from Content

Contents Overview 1 Advantages of Partitioning an ASP.NET Page 2 Creating and Using Code-Behind Pages 3 Creating and Using Page controls 10 Creating and Using Components 16 Lab 4: Separating Code from Content 23 Review 24 Module 4: Separating Code from Content BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY 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.  2000 Microsoft Corporation. All rights reserved. Microsoft, BackOffice, MS-DOS, Windows, Windows NT, <plus other appropriate product names or titles. The publications specialist replaces this example list with the list of trademarks provided by the copy editor. Microsoft is listed first, followed by all other Microsoft trademarks in alphabetical order. > are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries. <The publications specialist inserts mention of specific, contractually obligated to, third-party trademarks, provided by the copy editor> Other product and company names mentioned herein may be the trademarks of their respective owners. Module 4: Separating Code from Content iii BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Instructor Notes This module describes the different methods of separating code from content. In the first section, students learn about code-behind pages and learn how to create a code-behind class in Microsoft ® Visual Basic ® . The second section talks about page controls and how developers can reuse code with the use of page controls. Students also learn how to add these page controls to their ASP.NET pages. The last section covers components and describes how easily students can use these components in their ASP.NET applications. In the lab, students will create page controls and components, and use them in their ASP.NET application. After completing this module, students will be able to: ! Explain the need for code-behind pages. ! Create a code-behind page and use it with an ASP.NET page. ! Explain the advantages of page controls. ! Explain how page controls work. ! Create a component in Visual Basic. ! Use a component in an ASP.NET page. 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 2063A_04.ppt ! Module 4, “Separating Code from Content” (2063A_04.doc) ! Lab 4, “Separating Code from Content” (2063A_L04.doc) Preparation Tasks To prepare for this module, you should: ! Read all of the materials for this module. ! Complete all the demonstrations. ! Complete the lab. Presentation: 100 Minutes Lab: 60 Minutes iv Module 4: Separating Code from Content BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Module Strategy Use the following strategy to present this module: ! Advantages of Partitioning an ASP.NET Page This section discusses the advantages of partitioning code from content. Discuss with students about what happens in their work environment when two team members (a designer and a developer) want to work on the same application. Ask students about any techniques they might have previously used for separating code from content. ! Creating and Using Code-Behind Pages You can design your application in a manner such that the code resides in a separate file (referred to as the "code-behind" page), written in Visual Basic or C#. This section describes how to create and use code-behind pages. The section concludes with a demonstration. The demonstration shows the complete procedure for creating and using the code-behind page., Ensure that students understand every step. ! Creating and Using Page Controls A page control is an ASP.NET page that is imported as a server control by another ASP.NET page. In this section, students learn how to create and use a page control. You will then demonstrate how this is accomplished. After the demonstration, discuss the differences between using a code-behind page and a page control. At the end of the section, discuss the advantages of using page controls. ! Creating and Using Components This is the last section in the module and describes how to create and use components. Start the section by discussing the difference between components and code-behind pages. Then have a brief discussion with students about how they currently use components in their applications. Move on to the topic concerning how to deploy components, and tell them the advantages of deploying components using ASP.NET. Then talk about how to create and use components and use the demonstration to show them how they can do it. Module 4: Separating Code from Content 1 BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Overview ! Advantages of Partitioning an ASP.NET Page ! Creating and Using Code-Behind Pages ! Creating and Using Page Controls ! Creating and Using Components ASP applications contain a mix of HTML and script, making the code difficult to read, debug, and maintain. ASP.NET eliminates this problem by promoting the separation of code and content. That is, the user interface and the user interface programming logic need not necessarily be written in a single page. There are three ways in which you can separate code and content in ASP.NET: ! By using code-behind files that are pre-compiled modules written in any of the Microsoft .NET runtime-compliant languages. ! By creating page controlsfrequently used control sets and their logicand using them like controls in your ASP.NET pages. ! By moving business logic into components that can run on the server and calling those components from server-side code. After completing this module, you will be able to: ! Explain the need for code-behind pages. ! Create a code-behind page and use it with an ASP.NET page. ! Explain the advantages of page controls. ! Explain how page controls work. ! Create a component in Visual Basic. ! Use a component in an ASP.NET page. Topic Objective To provide an overview of the module topics and objectives. Lead-in In ASP, you had to intermingle code and HTML, but in ASP.NET there are a number of ways to separate the code in your application from the content. 2 Module 4: Separating Code from Content BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Advantages of Partitioning an ASP.NET Page ! Individual members of the development team can work on separate, individually owned parts ! Developers can work within environments that are familiar ! Web authors can use HTML development tools to build the interface Partitioning ASP.NET pages into code and content has several advantages. You avoid confusing pages where code and html are intertwined. Partitioned pages are easier to maintain and understand. ! Members of the development team can work on their own parts without disturbing the work of others. For example, the interface designer could be working on the interface files at the same time that the programmer is working on the source code files. ! Partitioning code and content allows developers to use environments that are familiar to them. For example, you can use separate editors for developing the code. ! Web authors can use other HTML development tools to build the visible interface part of an application. Topic Objective To describe the advantages of using code-behind pages, page controls, and components. Lead-in One of the problems facing Web developers and programmers is the increasing complexity in Web pages that makes it difficult to separate different parts of the development process. Module 4: Separating Code from Content 3 BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY # Creating and Using Code-Behind Pages ! Understanding How Code-Behind Pages Work ! Creating a Class File ! Demonstration: Creating a Code-Behind Page User interface logic for a Web forms relies on code that you create to interact with the form. You can design your application so that the code resides in a separate file known as the code-behind page, that is written in Visual Basic or C#. When you run the Web form, the code-behind class file runs and dynamically produces the output for your page. In this section, you will learn how code-behind pages work. You will also learn how to create a code-behind class file in Visual Basic. Topic Objective To introduce the topics included in this section. Lead-in In this module, you will learn about separating code from content by creating code- behind pages. 4 Module 4: Separating Code from Content BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Understanding How Code-Behind Pages Work ! Create separate files for user interface and user interface logic ! Use page directive to link the two files ! Call procedures in the code-behind page <%@ Page Inherits="data" Src="datagrid.vb"%> <%@ Page Inherits="data" Src="datagrid.vb"%> ds = data.getData() ds = data.getData() datagrid.vbPage.aspx <% @Page Src="datagrid.vb" %> Creating code-behind pages is relatively simple. It involves creating two separate files, one for the user interface and the other for the user interface logic. The interconnectivity between these two files is provided through the Page Directives, which are used to specify optional settings at the page level. Creating a User Interface File First, you create the HTML for the interface. The interface file is an ASP.NET page (.aspx extension). The first line of the interface ASP.NET page is a Page Directive that specifies the name of the code-behind file and the actual class name inside the code-behind file that will be used. In the following example, the ASP.NET page is linked to the datagrid.vb class file. The Inherits attribute specifies the class file to be used and the Src attribute indicates the path to the class file itself. <%@ Page Language="VB" Inherits="author" Src="datagrid.vb" %> Specifying the path to the class file is optional. If the path is omitted, ASP.NET looks for the class file in the /bin directory of the application. Creating a Code-Behind File Next you create a separate class file, in any of the supported languages, that provides the functionality required for the user interface page. A code-behind class file is identical to any other class file that you create in a particular language. In Visual Basic, the class file has a .vb extension, in C#, the code-behind page has a .cs extension. This ensures that the code-behind file is passed to the correct compiler when the page is first executed. Topic Objective To describe how code- behind pages work. Lead-in One of the ways of separating code and content is to create code-behind pages. Note Module 4: Separating Code from Content 5 BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Using Code-Behind Procedures To call a function or sub procedure in a code-behind page, preface the name of the procedure with the name of the code-behind page. For example, in the code- behind page data, there is a function named getData that returns a DataSet object. The following sample code calls getData() function and then displays the returned DataSet in a DataGrid control. Public Sub Page_Load (Src As Object, E As EventArgs) Dim ds As DataSet ds = data.getData() dgAuthors.DataSource=ds.Tables("Authors").DefaultView dgAuthors.DataBind() End Sub 6 Module 4: Separating Code from Content BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Creating a Class File in Visual Basic ! Class file ! Inheriting objects from the ASP.NET environment ! Inheriting from the ASP.NET Page class Public Class data Public Function getData() As DataSet … End Function End Class Public Class data Public Function getData() As DataSet … End Function End Class Imports System Imports System.Web Imports System Imports System.Web Public Class data Inherits System.Web.UI.Page … End Class Public Class data Inherits System.Web.UI.Page … End Class A code-behind class file is identical to any other class file that you might create in your chosen programming language. The basic structure of a Visual Basic class file looks like the following: Public Class class_name Public variable_name As variable_type Public Function function_name(parameters) As return_type … End Function Public Sub sub_name(parameters) … End Sub End Class Notice that in the above class declaration, the functions, sub procedures, and the class are all public. Public procedures are used to invoke code-behind pages from the user interface page. In order to convert the above class file structure into a code-behind class file, you need to perform two steps: ! Inherit the objects from the ASP.NET environment You inherit the objects from the ASP.NET environment that you need to use in a class file. By default, all objects in an .aspx page inherit the objects from the ASP.NET environment. However, this is not true for a class file. Therefore, a class file, at the minimum, needs to import the System and Web libraries from the ASP.NET environment. This is done as follows: Imports System Imports System.Web Topic Objective To explain how to create code-behind pages in Visual Basic. Lead-in As mentioned in the previous topic, you can create a class file for code- behind pages in any supported language, such Visual Basic and C#. Let’s look at how to create a class file in Visual Basic. Note [...]... PURPOSES ONLY Module 4: Separating Code from Content 23 Lab 4: Separating Code from Content Topic Objective To introduce the lab Lead-in In this lab, you will separate code from content by creating and using page controls and components BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY 24 Module 4: Separating Code from Content Review Topic Objective To reinforce module objectives... will see how to create a code- behind page and use it from an ASP.NET page BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Module 4: Separating Code from Content Delivery Tip 1 Show the page /module4 /before.aspx, which has code and content Note: you can either do the rest of the steps to create the code- behind file and call it from before.aspx, or just show the resulting files... * from Authors", conn) ds = new DataSet() cmdAuthors.FillDataSet(ds, "Authors") return (ds) End Function End Class BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY 8 Module 4: Separating Code from Content Demonstration: Creating a Code- Behind Page Topic Objective To demonstrate creating and using a code- behind page Lead-in In this demonstration, you will see how to create a code- behind... and cached in server memory The main difference between code- behind pages and page controls is that while code- behind pages mainly involve inheriting code classes into a page, page controls also you generate parts of the user interface as well BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Module 4: Separating Code from Content 11 Creating a Page Control Topic Objective To explain.. .Module 4: Separating Code from Content ! 7 Inherit from the ASP.NET Page class Your class must also inherit from the ASP.NET Page class so that it can be integrated into the ASP.NET page in which it is used This is done with the Inherits statement Public Class class_name Inherits System.Web.UI.Page … End Class The following is a code- behind page with one class named... Friend, or Private access BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Module 4: Separating Code from Content 19 Just like with code- behind pages, you need to import any libraries that you will be using in the page Imports System.Data Imports System.Data.SQL Example The following code is an example of a simple class called the ConferenceDB class This class has one public constructor... DataSet to fill the datagrid 9 Save all your changes and run the page 9 In this demonstration, you will see how to create a code- behind page and use it from an ASP.NET page BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY 10 Module 4: Separating Code from Content # Creating and Using Page controls Topic Objective To introduce the topics in this section Lead-in In this section,... to the /bin directory, so they need not be registered before use BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY Module 4: Separating Code from Content 25 6 How do you use a component from an ASP.NET page? 7 How do you use a page control from an ASP.NET page? BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES... No namespace conflicts Each component loaded from /bin is limited in scope to the application in which it is running This means that many applications could potentially use different components with the same class or namespace names, without conflict BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY 18 Module 4: Separating Code from Content Creating Components Topic Objective... display="dynamic"> BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY 12 Module 4: Separating Code from Content To expose values of controls to the containing page, create public properties For example, the following code creates a property named pNum that is the Text property of a text box control in the page control: . Lead-in In this module, you will learn about separating code from content by creating code- behind pages. 4 Module 4: Separating Code from Content BETA MATERIALS. Creating and Using Components 16 Lab 4: Separating Code from Content 23 Review 24 Module 4: Separating Code from Content BETA MATERIALS FOR MICROSOFT