Tutorial 12 1

Creating a New Web Forms Page

You will find that creating Web Forms is similar to creating traditional Windows applications in Visual Basic

The Visual Studio.NET environment gives the programmer the ability to create both desktop applications, as well as Web applications

In this tutorial, you will create two Web Forms applications for Pets Online: a welcoming Web page and a data page

Tutorial 12 2

Creating a New Web Forms Page

With Visual Studio.NET and Web Forms, you can rapidly develop Web applications that can be used across computing platforms and with various Web browsers

In Web programming, as in all programming, keep in mind that an application is only a software program

Your Web server must have Microsoft Internet Information Server (IIS), Version 4 or later, and the .NET Framework installed on it

Tutorial 12 3

Creating a New Web Forms Page

Be sure to verify that the default Web access mode for the project is set to FrontPage and that the project folder at the URL that you specified when you created the project can be opened with FrontPage. From the Windows taskbar, select Start, Settings, Control Panel, Administrative Tools, and Internet Services Manager. Select the Default Web Site and run the Check Server Extensions task

Tutorial 12 4

Creating a New Web Forms Page

Tutorial 12 5

Creating a New Web Forms Page

Tutorial 12 6

Adding HTML Text to the Web Forms Page

HTML tags format Web Forms so they can be accurately created and displayed by Web browser programs

HTML tags are enclosed in angled brackets (<>)

These tags are divided into two broad categories:

Those that define how the body of the document is to be displayed by the browser

Those that define information about the document, such as the title or relationships to other documents

Tutorial 12 7

Adding HTML Text to the Web Forms Page

Tutorial 12 8

Setting HTML Text Attributes

Just as you formatted and set attributes for text in Windows Forms, you will use the Formatting toolbar to set the HTML text attributes for your Web Forms application

Tutorial 12 9

Creating Web Forms HTML Server Controls

A server control is a type of control that acts as a communications link between client applications and the server

Server controls have properties, events, and methods that are specifically tailored to perform the tasks associated with the server

Server controls in Visual Basic.NET can be Web or HTML controls

The Web Forms HTML controls exist within the System.Web.HtmlControls namespace

Tutorial 12 10

Creating Web Forms HTML Server Controls

Tutorial 12 11

Creating Web Forms Server Controls

Visual Basic.NET Web Forms server controls have several new features that simplify development efforts

Web Forms server controls automatically detect the capabilities of the client browser and can customize the form properties and appearance to make the best use of that browser’s capabilities

This feature is called Automatic Browser Detection

Tutorial 12 12

Web Forms Controls

The Visual Basic.NET code used to include the Web Forms server control in your application follows each control’s description

Notice that each control’s code is enclosed in the < and > brackets used to enclose HTML tags

Tutorial 12 13

The Label Control

The Label control is used to display

either read-only unchanging (static) text

or data-bound dynamic text in the page

Tutorial 12 14

The TextBox Control

Similar to the Label control, the TextBox

control is used to allow editing of text

on a form and can be data bound

Tutorial 12 15

The CheckBox Control

The CheckBox control is used to create

a check box on a Web Forms application

Tutorial 12 16

The RadioButton Control

The RadioButton control, also called an Option Button, is similar to the CheckBox control

However, it is used when you want to display a group of choices which only one can be selected at a given time

Tutorial 12 17

The DropDownList Control

The DropDownList control is used to

create selections for a series of choices

Tutorial 12 18

The Button Control

The Button control generates a button

icon used to submit a Web Forms page

to the server for processing

Tutorial 12 19

The LinkButton Control

The LinkButton control is used to create

a link that, once clicked, displays a

hyperlinked page

Tutorial 12 20

The ImageButton Control

The Image Button control is used to

submit pages from the Web client to the

server and back

Tutorial 12 21

The Calendar Control

The Calendar control allows navigating

between dates on the calendar

Tutorial 12 22

Adding Web Forms ServerControls to Your Project

When Pets Online publishes the Web

Forms page as part of its Web site, the

Button control generates a button icon

that can be used by a Pets Online visitor

to submit the page from his or her

computer (the client) back to the server

on the button’s Click event

Tutorial 12 23

Adding Web Forms ServerControls to Your Project

Tutorial 12 24

Creating an Event Handler

Server controls on Web Forms can handle many different types of events, such as Click or Load

The code to handle a Web Forms event is executed as server code, which means that the code is executed on the server rather than on the client

Tutorial 12 25

Running the Web Forms Application

You cannot run the Web Forms application until the class file has been compiled

However, you can view the page in your browser by clicking the PreviewWebForm1.aspx tab at the top of your IDE

Tutorial 12 26

Saving and Exiting the Web Forms Application

Before exiting Visual Basic.NET, you should save all the components of your Web Forms application

In Visual Basic.NET an application’s executable file is created automatically when you save all files

Tutorial 12 27

The Pets Online Web Application Data Project

Pets Online, like most businesses, stores data in many different places

These may include spreadsheets, databases, word processing documents, and even HTML Web pages

Accessing the information in each of these data stores requires different methods

The UDA approach uses many complex interfaces, called Object Linking and Embedding Database (OLE DB), and cannot be accessed directly from Visual Basic

Tutorial 12 28

Learning More About Web Application Projects

This type of project is used for creating

an application with a Web-user interface

As with the projects you created in

Visual Basic 6.0, the Web application

project serves as a container

Tutorial 12 29

Technical Requirements for Your Web Applications Project

Web applications in Visual Basic.NET

require that you run Microsoft Internet

Information Server (IIS) on your

computer

IIS is the Microsoft Web server software

program

Tutorial 12 30

The Visual Studio.NET Cache

When you create a Web application project, the files in your Web application will be stored in two different places

The primary location is the Web server, where the application is stored; however, Visual Studio.NET also keeps files in a local cache on the programmer’s computer

The cache is a temporary directory used by Visual Studio.NET for storing your Web application project files

Tutorial 12 31

Files Created with Web Applications

When you create a Web application project in Visual Basic.NET, a project structure is automatically set up in the file system on your computer

Visual Basic.NET also sets up a Web application on the target Web server

Tutorial 12 32

Creating the PetProj Web Application Project

Before you begin to create your Web application project, verify that the computer on which you are working is running IIS with FrontPage Server Extensions installed

If your operating system is Microsoft Windows 2000 Professional, you will find the IIS and FrontPage Server Extension components on your installation disk

Your computer must also be running Microsoft Access 2000 to run the PETS database

Tutorial 12 33

Creating the PetProj Web Application Project

Tutorial 12 34

Creating a Data-Access Component

You will create the component in Visual Basic.NET and also write the necessary code to fill the data control component with data from your PETS database found in your Tut12 folder

To add and configure a data source, refer to the steps outlined on pages 866 and 867 of the textbook

Tutorial 12 35

Creating a Data-Access Component

Tutorial 12 36

Creating a Data-Access Component

Tutorial 12 37

Creating a Data-Access Component

Tutorial 12 38

Binding the DataGrid

The way Visual Basic.NET handles data binding in Web Forms differs from how previous versions of Visual Basic handled the task

Visual Basic.NET data binding even differs from the methods used in Windows applications

In Visual Basic.NET Web Forms, the page accesses data in the form of classes

The strength of Web Forms is that they can take advantage of almost any publicly available information, such as information accessible on the Web

Tutorial 12 39

Binding the DataGrid

Tutorial 12 40

Binding the DataGrid

Tutorial 12 41

Binding the DataGrid

Tutorial 12 42

Binding the DataGrid

Tutorial 12 43

Adding a Details Panel to Your Web Forms Application

You can access additional information about the animals in the Pets Online database without cluttering the DataGrid with unwanted information from your database

The Details Panel allows you to view this additional information by filtering the Main table in the PETS database so that only the currently selected row is displayed

To add Label controls perform the procedures shown on page 875 of the textbook

The last step in adding the Details Panel to the Web Forms page is to add the necessary code to show only the information you filtered from your database

Tutorial 12 44

Adding a Details Panel to Your Web Forms Application

To activate the Details Panel follow the instructions outlined on page 876 of the textbook

Tutorial 12 45

Adding a Details Panel to Your Web Forms Application

Tutorial 12 46

Deploying the Web Forms Application Project

The last step needed to complete your Web Forms application project is to deploy the project

The term deploy literally means “to spread out”

You will spread the Pets Online application project to the Internet

Deployment involves uploading all the individual pages, graphics, and programmatic elements of your Web Forms application project to the Internet and fully testing the Web Forms page for functionality