tutorial 121 creating a new web forms page you will find that creating web forms is similar to...
TRANSCRIPT
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