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
Module 4: Separating Code from Content 7

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

8 Module 4: Separating Code from Content

BETA MATERIALS FOR MICROSOFT CERTIFIED TRAINER PREPARATION PURPOSES ONLY

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 page and use it
from an ASP.NET page.