ASP.NET With Visual Basic - Lesson 02: Types of Applications

	ASP.NET: Types of Applications

Types of Applications

Introduction

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 various types of files. You can create a complete application using a text editor and IIS only or using a programming environment.

You can use Microsoft Visual Studio 2008 to create your application. Just as Notepad supports all these types of applications, Microsoft Visual Studio 2008 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.

HTML-Based Applications

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 Studio 2008 to create this folder. To do this, 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 2008 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 2008, 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. In the Name text box, accept or change the suggested name of the file. You can include the .htm extension but if you don't, it would be added for you:

Once you are ready, you can click Add. A web page would some skeleton code would be created for 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 Source 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 2008 and you want to add a new HTML file to it, on the main menu, you can click Web Site -> Add New Item... In the Add New Item dialog box, make sure that HTML Page is selected. Accept the suggested or change it. Once you are ready, you can click Add. A new file with .htm extension would be added to your project.

The difference between an ASP file you create using a Text File and and you create using Microsoft Visual Studio 2008 is that you can design the latter. This means that, after creating an ASP file in Microsot Visual Studio, you can click the Design button in the bottom section, and use the HTML button on the Toolbox to populate the web page.

Active Server Pages Applications

At one time, 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 web 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. After creating the necessary folder for your project or the ASP.NET Application, you can create the necessary files. The next non-required step for an ASP application consists 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 2008, you can create an ASP.NET Application, give it a name and click Open. To add a Global.asax file to it, on the main menu, you can click Web Site -> Add New Item... In the Templates list, click Global Application Class and accept the suggested name of the file:

Once you are ready, you can click Add.

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 2008, on the main menu, you can click Web Site -> Add New Item (or File -> New -> File...) In the Templates section of the New File dialog box, you can click Text File. To make it an ASP file, when specifying the name of the file, type the name of the file and include the .asp extension:

Add New Item

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

After the ASP web page has been created, you can design it using the controls from the HTML section of the Toolbox.

ASP.NET Applications

An ASP.NET project is an enhanced version of an Active Server Pages application and you can create it using Notepad. As we saw earlier with IIS, to start, you would create a folder that can hold the files of your application. You can then add the necessary files. If you exclusively use Notepad, you would (manually) type all your code. This is why Microsoft Visual Studio 2008 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.

Using Microsoft Visual Web Developer 2008

Introduction

Notepad's simplicity is well suited if you are just writing code. If you are developing a graphically intensive application, Notepad presents some limitations because everything would have to be typed (manually). To accelerate ASP.NET application development, Microsoft provided complete support in Microsoft Visual Studio 2008. This environment allows you to create an application and have a better view of where items are positioned on the web page. This can be a tremendous help if your application includes "graphical" controls.

Besides Microsoft Visual Studio 2008, you can download and use Microsoft Visual Web Developer 2008 Express Edition. To get it, go to the Microsoft web site and look for Visual Studio Express or Visual Studio Express Editions. Once on the page, locate Microsoft Visual Web Developer 2008, select your language, and click Download:

Microsoft Web Developer 2008 Express Edition

When the download starts, click Run. The Setup will start. Then you will be presented with the first page of a wizard:

Microsoft Web Developer 2008 Express Edition

You can click Next and follow the instructions. Make sure you accept to install Microsoft SQL Server.

Microsoft Web Developer 2008 Express Edition

The install will start and it can take a while. When the installation is over, you will be asked to register the product within 30 days:

Microsoft Web Developer 2008 Express Edition

Which you should do.

ASP.NET Visually

The techniques we introduced above, including creating a folder, a virtual directory, and the necessary file(s) require that you follow those steps to get the project ready. This is perfectly fine if you have time to create and write all necessary tags required in a web page. To make it a little easier, there are various tools you can use to visually design your ASP.NET web pages.

Microsoft Visual Web Developer 2008 Express Edition is a programming environment that allows you to create an ASP.NET application as a project.

Creating an ASP.NET Project

The lessons on this site assume that you have Microsoft Visual Web Developer 2008 Express Edition installed in your computer. To start Microsoft Visual Web Developer 2008 Express Edition, on the Taskbar, you can click Start (All) Programs -> Microsoft Visual Web Developer 2008 Express Edition

To create an ASP.NET application in Microsoft Visual Web Developer 2008 Express Edition, on the main menu, you can click File -> New Web Site... In the New Web Site dialog box, make sure ASP.NET Web Site is selected. In the Language combo box, select Visual Basic. Specify a name and location in the combo box on the left side of the Browse button or click the Browse button to specify a folder:

New Web Site

Once you are ready, click OK. Microsoft Visual Developer 2008 Express Edition would create the necessary starting folders and files.

Application Windows

In the Microsoft Visual Studio interface, some windows are represented with an icon that hides the rest of the body. An example is the Toolbox button (by default positioned on the left side of the interface:

Toolbox

To display such a window, you can position the mouse on it. This would expand the window:

Toolbox

If you expand a window, it would display a title bar with three buttons. One is called Auto Hide and the other is the classic Close button.

If you expand a window but find out you don't need it any more, you can just move the mouse away from it. The window would return to its previous state. Based on this functionality, if you are working with a window and move the mouse away from it, it would retract. If you need it again, you would have to reopen it using the same technique. If you are going to work with a certain window for a while, you can keep it open even if you move the mouse away. To do this, click the Auto Hide button . If clicked, the Auto Hide button changes from pointing left to pointing down .

When Microsoft Visual Web Developer 2008 Express Edition opens, it makes some windows necessary. These are the most regularly used windows. If you think that one of them is not usually used in your types of assignments, you can remove it from the screen by clicking its Close button. All of the windows you can use are listed in the View menu. Therefore, if a window is not displaying, you can click View on the main menu and click a window of your choice.

By its default installation, Microsoft Visual Web Developer 2008 Express Edition installs some windows to the left and some others to the right of the screen. You can change this arrangement if you want. To do this, expand a window, then drag its title bar to another location on the screen. Windows can then be "coupled", that is, docked together to one side of the screen. When windows are grouped, they automatically create tabs, allowing you to select the desired one by clicking its tab.

The options available in windows display differently depending on the window and the items in it. Some item are organized in a tree list equipped with + or – buttons. To expand a list, you can click its + button. To collapse a list, click its – sign. Some other items appear as button.

Compiling and Executing a Project

The instructions created for an ASP.NET project are written in plain text including HTML tags and script sections. In previous ASP applications, the code simply had to be interpreted by the browser. With ASP.NET, you must compile the project.

To compile and execute an ASP.NET project in one step, on the main menu, you can click Debug -> Start Without Debugging. Although there are other techniques or details in compiling (or debugging) and executing a project, for now, this is the technique we will use.

Opening a Project

As opposed to creating a new project, you can open a project that either you or someone else created.

To open an existing project:

If you had just created or used a web site, in the Start Page, if you see its name, you can click it
If you had just previously used the project, on the main menu, you can click File -> Recent Projects and click the project in the list displayed
If the project is not in the list of Recent Projects under the File main menu but you know that it exists, on the main menu, you can click File -> Open Web Site... The action would display the Open Web Site dialog box. By default, each ASP.NET application you create receives a new folder in your local Drive:\Documents and Settings\Usernane\My Documents\Visual Studio 2008\Projects folder (an additional folder is created in Drive:\Documents and Settings\Usernane\My Documents\Visual Studio 2008\Web Sites). When opening an ASP.NET project, if you don't know where it is located, you should first navigate to this folder. Once you have located the folder that contains the project, select the folder and click Open

Fundamentals of Web Coding

Introduction

An ASP.NET application is a series of files that contain code. To write this code, you can use one or more languages. The primary language used in most web pages is HTML. To enhance the behaviors of your web pages, you can add scripted code to them. The code you write must be an appropriate language. ASP.NET supports various languages, including Visual Basic.

Code Delimiters

When developing your web pages, you can include HTML and scripting code in the same file but you must distinguish them. While HTML uses its own tags, to show the beginning of an Active Server Pages script, you must type <%, which is called a delimiter. To show the end of that section, you must type %>, which is also called a delimiter. Here is an example:

<html>
<head>

<title>Exercise</title>

</head>
<body>

<%    %>

</body>
</html>

most of the time, you will write each delimiter on its own line. Here is an example;

<html>
<head>

<title>Exercise</title>

</head>
<body>

<%

%>

</body>
</html>

This technique is not a rule. Sometimes it simply makes your code easier to ready. Everything between <% and %> is part of the script and is reserved only for the script.

Although we created only one delimiting section, you can create as many delimiting sections as you want. Here are examples:

<html>
<head>

<title>Exercise</title>

</head>
<body>

<% %>

<% %>

<% %>

</body>
</html>

Of course, you can create the sections where each delimiter is on its own line:

<html>
<head>

<title>Exercise</title>

</head>
<body>

<% %>

<%

%>

<% %>

<%

%>

</body>
</html>

Between an opening delimiter <% and a closing delimiter %>, you can add the necessary ASP code, which can consist of ASP code, HTML code, and others. Before an opening delimiter <% or after a closing delimiter %>, you can add HTML code as you want but no ASP code:

<html>
<head>

<title>Exercise</title>

</head>
<body>

HTML Code

<%
    ASP Code, HTML Code, Scripting Code
%>

HTML Code

<%
    ASP Code, HTML Code, Scripting Code
%>

HTML Code

<%
    ASP Code, HTML Code, Scripting Code
%>

HTML Code

</body>
</html>

Your Language of Choice

By default, ASP.NET is primarily supported with Microsoft Visual Basic, Visual C#, VBScript, and JavaScript. Many other languages are supported also. To specify the language of your choice, in the first line of your page, you can use the following formula:

<%@ Page Language="FavoriteLanguage" %>

The FavoriteLanguage factor must be the name of the language you use for your code. It can be VB or C#. For example, if you will be using VB, you can write this line as:

<%@ Page Language="VB" %>

Here is an example:

<%@ Page Language="VB" %>
<html>
<head>
<title>ASP.NET Tutorials</title>
</head>
<body>
<h1>Lesson 2: Active Pages</h1>

<p>This lesson shows different ways of displaying items on a 
web page. The instructions involve both HTML and scripts</p>
<h3>Enjoy</h3>
</body>
</html>

In the same way, you can replace VB with C# or JScript.

As you may be aware, each language has its own rules that you must follow when programming in it. Just changing the name of the language from the above line and leaving the rest of the code unchanged doesn't complete the job; in fact, simply changing the name of the language is a guaranty that some of the code on the page would not work anymore.

In our lessons, we will mostly use VB.

Accessories For Code Writing

Code Comments

In the programming world, a comment is text that the compiler would not consider when reading the code. As such a comment can be written any way you want. In Visual Basic, the line that contains a comment can start with a single quote. Here is an example:

' This line will not be considered as part of the code

Alternatively, you can start a comment with the Rem keyword. Anything on the right side of rem, Rem, or REM would not be read. Here is an example:

Rem I can write anything I want on this line

Comments are very useful and you are strongly suggested to use them regularly. They can never hurt your code and they don't increase the size of your application. Comments can help you and other people who read your code to figure out what a particular section of code is used for, which can be helpful when you re-visit your code after months or years of not seeing it.

Line Continuation: _

You will regularly need to expand your code on more than one line. This happens if you are writing an expression that involves many entities that must belong to a group.

To continue a line of code to the next, type an empty space followed by an underscore symbol, then continue your code on the next line.

Application Management Windows

The Solution Explorer

The Solution Explorer is a window that displays the "physical" items used in your project.

The items of this window display in a tree. To expand a node, you can click its + button. To collapse it, click its - button. To explore an item, you can double-click it. The result depends on the item you double-clicked.

The Properties Window

A property is a piece of information that characterizes or describes a control. It could be related to its location or size. It could be its color, its identification, or any visual aspect that gives it meaning. The properties of an object can be changed either at design time or at run time. You can also manipulate these characteristics both at design and at run times. This means that you can set some properties at design time and some others at run time.

To assist you with setting the properties of a web control, Microsoft Visual Studio 2008 provides the Properties window. By default, it displays in the lower right section of the interface. If it is not available, on the main menu, you can click View -> Properties Window.

To manipulate the properties of a control at design time, first add the desired object from the Toolbox to the web form. To change the properties of a control at design time, on the form, click the control to select it. Then use the Properties window:

Properties Windows

The items in the Properties window display in a list set when installing Microsoft Visual Studio 2008. In the beginning, you may not be familiar with the properties because the list is not arranged in a strict order. You can rearrange the list. For example, you can cause the items to display in alphabetical order. To do this, in the title bar of the Properties window, you can click the Alphabetic button . To restore the list, you can click the Categorized button .

When a control is selected, the Properties window displays only its characteristics. When various controls have been selected, the Properties window displays only the characteristics that are common to the selected controls.

Properties Categories

Each field in the Properties window has two sections: the property�s name and the property's value. The name of a property is represented in the left column. This is the official name of the property. The names of properties are in one word. You can use this same name to access the property in code.

The box on the right side of each property name represents the value of the property that you can set for an object. There are various kinds of fields you will use to set the properties. To know what particular kind a field is, you can click its name. To set or change a property, you use the box on the right side of the property�s name: the property's value, also referred to as the field's value.