Applications and Files Supported

There are three main categories of applications you can create for your web-based project: HTML only, Active Server Pages, and ASP.NET. This also means that, in your applications, you may deal with three types of files. As featured in lessons 1 and 2, you can create a complete application using only a text editor and IIS. As seen in Lesson 3, you can also use Microsoft Visual Studio 2005 to create your application. Just as Notepad supports all these types of applications, Microsoft Visual Studio 2005 also is completely equipped to create, handle, and maintain HTML-only applications, Active Server Pages, or ASP.NET. Everything will depend on what you are trying to do as long as you know that the choice is yours (Microsoft Visual Studio 2005 is that powerful).

An HTML-based application is a web-based project that mostly includes regular pages with HTML tags, optional Cascading Style Sheet formatting, and optional scripts to perform some tasks that are difficult or impossible with only HTML. You can also use other formatting languages like XML to support some type of data in your application but an HTML-based application is primarily meant to use HTML tags to present text and graphics to a visitor. With this type of application, you usually don't expect any back-and-forth interaction between the visitor and you.

To create an HTML-based application, there is no special thing to do in Microsoft Visual Studio because the structure of this type of application lies on its use of web-oriented files. There are only two primary requirements. To start, you must create a folder with a name of your choice. You can create this folder using a utility such as Windows Explorer or My Computer. If you want, you can also use Microsoft Visual Stutio 2005 to create this folder. To do this, as we saw in the previous lesson, you can create an ASP.NET Application. This would prompt you to accept the suggested name of the folder or to give a new name of a folder.

The string you accept or provide on the left side of the Browse button would be the folder that contains your web application. Once you click OK, Microsoft Visual Studio 2005 would create the folder for you and get it ready to receive your files.

After creating the folder of your web-based application, you can create the necessary files for it. The most regularly used files are text-based but they have the .htm or .html extension. This type of file is called an HTML file. You can create the file using Notepad. Otherwise, if you had created the folder using Windows Explorer or My Computer, to create an HTML file in Microsoft Visual Studio 2005, on the main menu, you can click File -> New -> File... In the Templates list of the New File dialog box, you can click HTML Page and click Open:

A blank web page would be presented to you. You can start writing in it and populating it as you see fit. To manually edit the file's code, in the bar under the page, you can click the HTML button and edit the existing code. At any time, to save the file, on the main menu, you can click File -> Save, locate the folder you created for your web site and save the file.

If you had created an ASP.NET Application using Microsoft Visual Studio 2005 and you want to add a new HTML file to it, on the main menu, you can click Project -> Add HTML Page... In the Add New Item dialog box, accept the suggested and change it:

Once you click Open, a new file with .htm extension would be added to your project. You can then populated and edit it as you see fit.

Once the limitations of HTML were made obvious, Microsoft developed Active Server Pages, which was a technique of using Microsoft Internet Information Server (4.0) and scripting languages such as VBScript or JavaScript to create interactive pages, more structured that traditional HTML files. An Active Server Pages application is a web site that includes HTML and optional files that have an .asp extension. In fact, the essence of an ASP-based application is to have at least one file with that extension.

You can create an Active Server Pages application without using any formal programming environment. To start, you should create a folder that would hold the files of your application. You can use Windows Explorer or My Computer to do this. If you want, the next non-required step would consist of creating a simple text-based file named Global and that has the .asax extension (Global.asax). This file would be used later on to process files at the application level.

In Microsoft Visual Studio 6.0, to support Active Server Pages, Microsoft created Visual Interdev. The Visual Interdev development environment is the ancestor of ASP.NET. To create an Active Server Pages application using Microsoft Visual Studio 2005, you can create an ASP.NET Application, give it a name and click Open. After creating the application, Microsoft Visual Studio 2005 would create the necessary folder and, among many other files, it would create a file named Global.asax.

After creating the necessary folder for your project or the ASP.NET Application, you can create the necessary files. Besides HTML files, css files, and/or script-based files we mentioned for an HTML-based application, you can add special active pages. An Active Server Pages file, also called an ASP file, is a text-based document that has the .asp extension. You can use Notepad to create the file as long as you remember to add the .asp extension when you decide to save it. To create an ASP file, if you had created the folder for your application, in Microsoft Visual Studio 2005, on the main menu, you can click File -> New -> File... In the Templates section of the New File dialog box, you can select Text File and click Open. You would be presented with a blank page that you can edit as you see fit. To make it an ASP file, you must save it, which you can do by clicking File -> Save from the main menu. When saving the file, you must make sure you add the .asp extension. As alternative, you should create an HTML Page (File -> New -> File -> HTML Page) and populate it as you see fit. When saving the file, in the Save As Type combo box, select ASP Files (*.asp) and provide the desired name

Once you click Save, a new ASP file would be added to the folder you selected.

The difference between a file you create using a Text File and an HTML Page options is that the second would include a design and an HTML sections while the first would provide only a text editor.

If you had created an ASP.NET Application and you want to add an ASP file to it, on the main menu, you can click Project -> Add HTML Page... When specifying the name of the file, enter its name and the .asp extension and then click Open.

Remember that, besides ASP files, you can also add HTML, CSS, and other script related files to your ASP application.

An ASP.NET project is an enhanced version of an Active Server Pages application. As we reviewed in previous lessons, you can create it using Notepad. To start, you would create a folder that would hold the files of your application. Then, you can add the necessary files. If you exclusively use Notepad, you would (manually) type all your code. This is why Microsoft Visual Studio 2005 can be very helpful.

Besides ASP.NET own files, you can also create ASP, HTML, CSS, and other script related files to add to your ASP.NET application.

Processing Web Controls

Introduction

As mentioned previously, you can create HTML, Active Server Pages, or ASP.NET applications. If you create an HTML-only application, you may not need web controls because HTML can only create them but cannot process them. To process web controls, you would need to include scripts in your code. Even then, you must use a web server to handle the interaction with your visitors.

If you are creating a graphical application, the .NET Framework provides the controls you would need.

If you create an Active Server Pages application and you add ASP pages to it, you can (should) use the controls of the HTML section of the Toolbox. The HTML controls are defined in the System.Web.UI.HtmlControls namespace of the System.Web.dll assembly.

If you create an ASP.NET Application, you can (should) use the controls in the Web Forms section of the Toolbox. The controls you will use in your ASP.NET applications are defined in the System.Web.UI.WebControls namespace of the System.Web.dll assembly. Each control is created from asp: followed by the name of the object. For example, to create a button, you would start the tag with <asp:Button>. Of course, the tag must be closed as it is traditionally done in HTML: <asp:Button></asp:Button>.

Client and Server Processing

A control you add to your web page would be configured to help the user interact with your web site. For example, you may want a visitor to place an order on a web page, submit a credit card number, and get a receipt. To process this type of transaction, you would have to validate some values at various levels. Some processing can be done on the computer that the visitor is using. This computer is referred to as a client. Some other processing can be performed only after the user has submitted some values. This type of processing is done at the server.

After adding a control to a web page, you must specify where its value(s) would be processed. This is done by using the Runat attribute. It can have one of two values: client or server. Here is an example:

<asp:Button Runat="server"></asp:Button>

Characteristics of Web Controls

The Identifier of a Control

When writing code for your web pages that contain web controls, you always need a way to identify each control so you can refer to it. To support this, in HTML, every tag used to create a control has an attribute called id. To identify a control, assign a string to this attribute. Here is an example:

<asp:Button id="button" Runat="server"></asp:Button>

If you add a control from the HTML or the Web Forms section of the Toolbox, it would automatically receive a default identifier. To change it, select the control on the form. In the Properties window, click (ID) and type the desired identifier.

The Text of a Control

Some controls are text-based: they are meant to display or sometimes request text from the user. For such controls, this text is referred to as caption while it is simply called text for some others. This property is not available for all controls.

If a control displays text, then it has a Text property in the Properties window. After adding such a control to a form, its Text field may hold a string, such as its HTML name; that's the case for a Button. At design time, to change the text of the control, click its Text field in the Properties window and type the desired value. For most controls, there are no strict rules to follow for this text.

To specify the text of a control in your code, assign the desired string to the text attribute of the control's tag. Here is an example:

<asp:Button id="btnSend" text="Send Now" Runat="server"></asp:Button>

Web Controls and Cascading Style Sheet

Cascading Style Sheet (CSS) is a technique of assisting HTML with some formatting applied to a control on a web page. If you have studied Cascading Style Sheet, everything you know about this formatting language can be applied to web controls. In fact, ASP.NET heavily depends on it to control the positions of its web controls.

As you may know, there are three main ways CSS is used in a web page. To apply it on a control, you create a style attribute in the HTML tag and assign the necessary values to it. It would start as follows:

<asp:Button id="btnSend" text="Send Now" style="" Runat="server"></asp:Button>

This can be referred to as local style because it affects only the tag in which the style is created. If you use this technique, each (HTML or ASP.NET) tag must have its own style.

What goes inside of the double-quotes of the style attribute depends on what formatting you want to apply. If you are manually creating your web page, you can then specify the necessary style. If you are using Microsoft Visual Studio 2005 and creating a form, every time you add a web control to your form, the control automatically receives a style attribute with the primary values that the studio judged necessary. To change some of the styles of the control, after clicking it on the form, you can change their values in the Properties window. The Properties window doesn't display all possible styles that can be applied to a given web control. If a certain style is not available, you can open the HTML code of the form and type the desired style in the style attribute. You must respect the rules of Cascading Style Sheet when adding a style.

The second technique used to apply Cascading Style Sheet to your web page consists of creating the necessary styles in the <head> tag of the HTML file. Here is an example from an ASP file:

This can be referred to as file level style because the style created in the head section affects or can be applied to any tag of the page. If you use this technique, each (HTML or ASP.NET) tag that is tied to the HTML tag defined, such as <body> in this case would be affected.

As you probably know already, Cascading Style Sheet also supports a type of pseudo-object-oriented-programming where you create classes and define their characteristics using existing CSS keywords. Here is an example:

The third technique used to integrate CSS in your web page consists of creating a separate CSS file and referencing it in your (HTML, ASP, or ASP.NET) web page. After creating and saving the file with .css extension, you can reference it by its name. For example if you create a file named Example.css, to use its formats in your web page, in the head section of the page, you would type:

<link rel="stylesheet" type="text/css" href="Example.css">

The advantage of this application-level style is that the same style can be applied to different pages of your web site, as long as you remember to reference the CSS file.

ASP.NET supports all three techniques of using CSS in your web pages. You can create your CSS formatting using Notepad or any text editor. You can also use any commercial application of your choice, such as Microsoft FrontPage, to create the CSS code. Microsoft Visual Studio 2005 provides its own tools to create CSS code.

If you create an ASP.NET Application using Microsoft Visual Studio 2005, every time you add a new control from the Web Forms section of the Toolbox, the studio adds a local style to that control. Here is an example from a newly added Button:

To change the values of this local style, you can first display the Design of the form, click the control, find the name of the style in the Properties window, and edit the value.

As mentioned earlier, you can also create file-level CSS code by typing it in the <head></head> section of the file. Here is an example:

If you don't know most CSS formats as most of us, Microsoft Visual Studio 2005 can assist you with creating the necessary styles. To start, on the main menu, you can click Format -> Build Style... This would open the Style Builder dialog box:

This dialog box allows you to visually select a style and format it.

As mentioned earlier, you can also create a CSS file. To do this, you can use Notepad and enter the necessary code. You should then save the file with a .css extension. Microsoft Visual Studio 2005 provides its own means of creating a CSS file you can use in any application or to create and add a CSS file to the current project.

To create an independent CSS file, on the main menu, you can click File -> New -> File..., select General in the Categories list, select Style Sheet in the Templates list and click OK. After creating the file, you must save it and add it to any folder of your choice.

To create a CSS file and add it to the current project, on the main menu, you can click Project -> Add New Item. In the Templates section, click Style Sheet. Accept the suggested name and give a name of your choice (recommended) and click Open.

When you start a new Style Sheet, you get a screen divided in two sections. The left section displays the already created tags or classes of your files. The right frame displays the formats (tags, classes) that have already been created in the file.