Module 4: Separating Code from Content

Contents Overview 1 Advantages of Partitioning an Creating and Using Code-Behind Pages 3 Creating and Using Page controls 10 Creating and Using Components 16 Lab 4: Separating Code

Contents

Overview 1

Advantages of Partitioning an

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

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

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

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

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

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

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

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

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

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"%>

ds = data.getData()

datagrid.vb Page.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

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

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 dataPublic Function getData() As DataSet

…End FunctionEnd Class

Public Class dataPublic Function getData() As DataSet

…End FunctionEnd Class

Imports SystemImports System.Web

Imports SystemImports System.Web

Public Class dataInherits System.Web.UI.Page

…End Class

Public Class dataInherits 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

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

! 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 data, and one public function named getData The function reads data from a database and returns it

to the user interface page as a DataSet object

Imports System Imports System.Web Imports System.Data Imports System.Data.SQL Public Class data Inherits System.Web.UI.Page Public Function getData() As DataSet Dim ds As DataSet

Dim conn As SQLConnection Dim cmdAuthors As SQLDataSetCommand conn = New SQLConnection _

("server=nononotnow;uid=sa;pwd=;database=pubs") cmdAuthors = New SQLDataSetCommand _

("select * from Authors", conn)

ds = new DataSet() cmdAuthors.FillDataSet(ds, "Authors") return (ds)

End Function End Class

Demonstration: Creating a Code-Behind Page

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

In this demonstration, you will see how to create a code-behind page and use it from an ASP.NET page

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

5 Add the Inherits

statement to the class

6 Copy the body of the

Page_Load event to a new

function named data that

returns a DataSet Delete

the lines that interact with

the DataGrid directly, and

return the DataSet

7 In before.aspx, add the

Inherits attribute to the

@Page directive

8 Edit the Page_Load event

to call the new function:

data.getData(), then use the

returned DataSet to fill the

datagrid

9 Save all your changes

and run the page

# Creating and Using Page controls

! Creating a Page Control

! Using a Page Control in an ASP.NET Page

! Demonstration: Creating a Page Control

! Advantages of Page Controls

A page control is an ASP.NET page that is imported as a server control by another ASP.NET page Page controls provide an easy way to partition and reuse simple and common user interface (UI) functionality across a Web application Page controls are not precompiled However, because all ASP.NET pages are compiled as soon as they are requested, page controls are compiled on demand 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

Topic Objective

To introduce the topics in

this section

Lead-in

In this section, you will learn

about page controls You

will learn the advantages of

page controls and how they

work

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

Creating a Page Control

! A page control is a user-defined server control with an ascx extension

! Public properties and methods are promoted to properties and methods of the control in the host page

Public Property pNum As StringGet

Return txtNum.TextEnd Get

End Property

Public Property pNum As StringGet

Return txtNum.TextEnd Get

End Property

Page controls are ASP.NET pages used as server controls Page controls have

an ascx extension This file extension ensures that the page control's page cannot be executed as a standalone ASP.NET page Page controls largely

replace include files They are used to address the same problems that were

solved by using include files, such as headers, navigation bar, repeating blocks

of code, and so on

A page control consists of HTML and code But because page controls are included in existing pages, they do not contain <head>, <body>, or <form> tags Those tags are included in the host ASP.NET page Page controls participate in the complete execution lifecycle of every request and can handle their own events, encapsulating some of the page logic from the containing ASP.NET page For example, a page control can handle its own post-back in its Page_Load event procedure

The following code is the HTML part of a page control that combines a text box and two input validation controls:

<asp:textbox id=txtNum runat=server />

<asp:RequiredFieldValidator id=txtNumValidator runat=server controlToValidate=txtNum

errorMessage="You must enter a value"

Page controls are ASP.NET

pages used as server

controls