Web Forms

When creating your applications, you will use a set of windows that each accomplishes a specific purpose. Some windows are represented with an icon that hides the rest of the body. For example, by default, on the left of the screen, you may see an icon made of two computers . To display such a window, you can position the mouse on it. This would expand the window. If you expand a window, it would display a title bar with two 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 Visual Studio 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, Visual Studio 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.

The items of this window display in a tree. To expand a node, you can click its + button. To collapse it, click its - button. Later on, you will see that you can drag some items to add to your application.

Introduction to the Toolbox

A web control is a graphical object that allows the user to interact with a web page. Because there are so many controls for various purposes, their insertion to an application and their configuration are left to the computer programmer. The Toolbox is the accessory that provides most of the controls used in an application. The regular controls recognized by HTML are listed in a section labeled HTML:

The controls used on an ASP.NET application are listed in a section labeled Web Forms.

By default, the Toolbox is positioned on the left side of the IDE. To change that position, you can drag its title bar away and dock it to another side of the IDE. The Toolbox also uses a default width to show the items on it. If the width is too small or too large for you, you can change it. To do this, position the mouse to its right border and drag left or right.

When Microsoft Visual Studio .NET is installed, it adds the buttons in a somewhat random order. In the beginning, this can make it difficult to find a particular control when you need it. If you find it more convenient, you can arrange the list of controls in any order of your choice. You have two main options. To change the position of an item in the list, right-click it and click either Move Up or Move Down. Alternatively, you can arrange the items in alphabetic order. To do that, right-click anywhere in the HTML or Web Forms section and click Sort Items Alphabetically. Once you have rearranged items alphabetically, the Toolbox forgets the previous arrangement and you cannot restore it. Alternatively, you can right-click the button of a control and click either Move Up or Move Down.

To add a control to your application, you can drag it from the Toolbox and drop it in the desired area on the web form. Once added, the control is positioned where your mouse landed. In the same way, you can add other controls as you judge them necessary for your application. Alternatively, to add a control, you can also double-click it from the Toolbox and it would be added to the top-left section of the web form.

If you want to add a certain control many many times, before selecting it on the Toolbox, press and hold Ctrl. Then click it in the Toolbox. This permanently selects the control. Every time you draw the form, the control would be added. Once you have added the desired number of this control, on the Toolbox, click the Pointer button to dismiss the control.

1. To use it, position the mouse on the Toolbox word and wait for the Toolbox to expand.
   In the Toolbox, click the HTML button to display its controls
2. Double-click Label
3. In the Toolbox, click Web Forms
4. To add another control, click TextBox
5. On the form, click and draw a rectangle then release the mouse
6. To execute the application, on the Standard toolbar, click the Start Without Debugging button
7. This opens the browser and, after a few seconds, displays the result
   After viewing it, return to your project

In the first and second lessons, we wrote all our code using Notepad. If you are using Microsoft Visual Studio .NET to create your ASP.NET application, it provides it own and very useful editor, referred to as the Code Editor. To display the code editor, after creating a new ASP.NET Application, you can right-click the form and click View HTML Source. Alternatively, in the left section of the bar under the form, you can click the HTML button. This would display the HTML code that holds the regular HTML tags associated with the form.

In the previous lessons, we saw that an ASP.NET file was primarily a normal text file with an .aspx extension. In the same way, when you create an ASP.NET Appication, Microsoft Visual Studio .NET creates a form whose file has the .aspx extension. This is one of the files you would customize in accordance with you particular type of application.

The Code Editor is divided in 5 sections.

The top section of the Code Editor displays tabs of property pages. Each tab represents a file that contains code. To add a new file to the project, on the main menu, you can click File -> New -> File or the Project menu item and select an option. If you use the File -> New -> File menu item to create a new file, you can add it to any project of your choice, including the current one. To do this, you would have to save the file and select a folder. If you create the file using the Project menu group, you would be prompted to enter a name for it. You can also open a file that belongs to another project or even doesn't belong to another project at all.

Once a file is opened, the Code Editor displays its tab using the file's name and its extension. As implied in the previous description, you could be working on files that belong to different projects and the label that the tab displays doesn't indicate whose project or folder the file belongs to. To know the folder in which the file was created, you can position the mouse on its tab. A tool tip would displays the path of the file:

To access one of the files currently opened, you can click its corresponding tab. By default, the tabs display in the order their files were created, added to the project, or opened, from left to right. If you don't like that arrangement, click and drag a tab either left or right beyond the next tab.

The top-left section of the Code Editor displays a combo box named Object. As its name indicates, the Object combo box holds a list of the objects (classes and structures) that are used in the current project. You can display the list if you click the arrow of the combo box:

To select an item from the list, you can click it.

The top-right section of the Code Editor displays a combo box named Event as its tool tip displays:

The content of the Event combo box depends on the item that is currently selected in the object combo box. This means that, before accessing the members of a particular object, you must first select that object in the Object combo box. Then, when you click the arrow of the Event combo box, the members of only that object display. If you select an item in the Event combo box, the Code Editor jumps to its code and positions the caret there.

The files of most of your web forms will contain two types of code, regular HTML or script. By default, the Code Editor shows both. Some times, you will want to work on only one category while ignoring, because not changing, the other. Because it could take a great deal of coding, in some cases, you may want to hide the regular HTML code when you want to concentrate on only the scripting side of your page. You can temporarily hide the HTML code that is not needed at a certain time. To support this, the Code Editor is equipped with two buttons on the right side of the Event combo box: .

As mentioned already, by default, the Code Editor displays both HTML and script codes:

If you want to hide the HTML code sections and concentrate on script only, you can click the Script Only View button . This causes the Code Editor to hide HTML specific code:

To display both HTML and script codes, you can click the Full HTML View button .

Code is written in a wide area with a white background that is actually referred to as the code editor. This is the area you use the keyboard to insert code with common readable characters.

To manage its contents, the Code Editor uses some techniques to display its code. Colors are used to differentiate categories of words or lines of text. The colors used are highly customizable. To change the colors, on the main menu, you can click Tools -> Options... In the Options dialog box, in the Environment section, click Fonts and Colors. To set the color of a category, in the Display Items section, click the category. In the Item Foreground combo box, select the desired color. If you want the words of the category to have a colored background, click the arrow of the Item Background combo box and select one:

In both cases, the combo boxes display a fixed list of colors. If you want more colors, you can click a Custom button to display the Color dialog box that allows you to "create" a color.

When using a form, there is a bar under the form and it displays two buttons: Design and HTML. The Design button allows you to display the design view of a form. With this view, you can visually add HTML and/or web controls to a form.

The HTML button allows you to access code related to the form and its contents. You can use this view to write new code or to maintain existing sections. If you programmatically add a control, when you click the Design button, it would show on the form.

Application programming primarily consists of populating a web form with objects called web controls. These controls are what the users of your pages use to interact with the computer. As the application developer, one of your jobs will consist of selecting the necessary objects, adding them to your page, and then configuring their behavior.

If a control is displaying on the screen and you are designing it, this is referred to as Design Time. This means that you have the ability to manipulate the control. You can visually set the control’s appearance, its location, its size, and other necessary or available characteristics. The design view is usually the most used and the easiest because you can glance at a control, have a realistic display of the control and configure its properties. The visual design is the technique that allows you to visually add a control and manipulate its display. This is the most common, the most regularly used, and the easiest technique. The other technique you will be using to control a window is with code, writing the program. This is done by typing commands or instructions using the keyboard. This is considered, or referred to, as Run Time.

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 Class View displays the various classes, including their ancestry, used by your project

The Resource View displays an organized tree list of the resources used on a project

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 2005 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:

The items in the Properties window display in a list set when installing Microsoft Visual Studio .NET. In the beginning, you may be regularly lost when looking for a particular property because the list is not arranged in a strict order of rules. 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.

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.

Controls Events

Properties Categories

A web form can be made of various web objects that allow a user or visitor to submit values to a server. While interacting with a web page, a user can click a button, type in a control or select a value from a list. These and many other actions cause the web control to create messages and thus fire events. Because there are different types of messages that a control can send and various controls can send the same or different messages, each control must be able to "decide" when to send a message and specify what that message.

Event Implementation

Although there are different means of implementing an event, there are two main ways you can initiate its coding. If the control has a default event and if you double-click it, the studio would initiate the default event and open the Code Editor. The cursor would be positioned in the body of the event, ready to receive your instructions. Alternatively, while displaying a form, you can click the HTML button. In the Object combo box, select an object. In the Event combo box, select the desired event: