Home

Introduction to Web Controls

 

ASP.NET Web Page Design

 

Introduction

When creating your applications, you will use a set of windows that each accomplishes a specific purpose. In order to use the web controls and make them available to your web page, you must display your form in design view. To do that, in the bottom section of the page, you can click the Design button.

Practical LearningPractical Learning: Introducing Web Design

  1. Start Microsoft Visual Studio 2005 if necessary and, to create a web site, on the main menu, click File -> New -> Web Site...
  2. Make sure ASP.NET Web Site is selected.
    Make sure the Language combo box is set to Visual C#.
    Click the combo box on the left side of Browse, press End, and press Delete a few times to delete the default name of the web site
  3. Change it to geometry2  
  4. Click OK
  5. In the Solution Explorer, right-click C:\...\geometry\ and click New Folder
  6. Type images as the name of the new folder and press Enter
  7. Copy each of the following pictures to your My Documents folder:
     
  8. On the main menu, click Web Site -> Add Existing Item...
  9. Locate the folder where you saved the pictures, select each and press Enter
  10. In the Solution Explorer, right-click Default.aspx and click Rename
  11. Change the name to index.aspx and press Enter
  12. To create a CSS file, on the main menu, click Web Site -> Add New Item...
  13. In the Templates list, click Style Sheet
  14. Set the name to geometry and press Enter
  15. Enter the following code in the file:
     
    body
    {
    	font-size: 11pt;
    	color: black;
    	font-family: Verdana, Tahoma, Arial, Sans-Serif;
    }
    
    hr { color: #0000ff }
    
    .maintitle
    {
    	color: blue;
    	font-family: 'Times New Roman' , Garamond, Georgia, Serif;
    	text-align: center;
    	font-size: 24pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .parajust
    {
    	font-family: Verdana, Tahoma, Arial, Sans-Serif;
    	font-size: 10pt;
    	font-weight: normal;
    	text-align: justify;
    }
    
    .centeredtext
    {
    	font-family: Verdana, Tahoma, Arial, Sans-Serif;
    	font-size: 10pt;
    	font-weight: normal;
    	text-align: center;
    }
    
    .centered
    {
    	text-align: center;
    }
    
    .formula
    {
    	font-weight: bold;
    	font-size: 10pt;
    	color: blue;
    	font-family: Verdana, Helvetica, Tahoma, Sans-Serif;
    }
    
    a:link       {
      font-family: Verdana, Helvetica, Arial, Sans Serif;
      color: #0000FF;
      font-size: 10pt;
      font-weight: bold;
      text-decoration: none }
    
    a:alink {
      font-family: Verdana, Helvetica, Arial, Sans Serif;
      color: #FF00FF;
      font-size: 10pt;
      font-weight: bold;
      text-decoration: none }
    
    a:visited
    {
    	font-family: Verdana, Helvetica, Arial, Sans Serif;
    	color: Green;
    	font-size: 10pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    a:hover
    {
    	font-family: Verdana, Helvetica, Arial, Sans Serif;
    	color: #FF0000;
    	font-size: 10pt;
    	font-weight: Bold;
    	text-decoration: none;
    }
  16. To add a new web page, on the main menu, click Web Site -> Add New Item...
  17. Make sure Web Form is selected.
    Set the Name to rectangle and click Add
  18. Change the file as follows:
     
    <%@ Page Language="C#" 
             AutoEventWireup="true" 
             CodeFile="rectangle.aspx.cs" 
             Inherits="rectangle" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    
    <link rel="Stylesheet" type="text/css" href="geometry.css" />
    <title>Geometry: Rectangle</title>
    
    </head>
    <body>
    
        <form id="form1" runat="server">
        <div>
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="maintitle">Geometry: Rectangle</p>
        </td>
      </tr>
    </table>
        
     &nbsp;
     
    <table border="0" width="660">
      <tr>
        <td>
          <p class="parajust">A rectangle is a geometric figure made 
          of 4 sides connected to produce four right angles. The 
          horizontal measurement of the rectangle, the base, is its 
          length. The vertical measurement of the figure is referred 
          to as its height. In geometry, a rectangle can be 
          represented as follows:</p>
            
          <p class="centered">
            <img src="images/rectangle1.gif" alt="Rectangle" />
          </p>        
    
          <p class="parajust">To process a rectangle, you usually 
          must provide, or must be given, the length and the height. 
          You can then calculate the perimeter and the area. To 
          assist you with these calculations, you can use some 
          pre-established formulas. Suppose the values are 
          represented as follows:</p>
        </td>
      </tr>
    </table>
        
    &nbsp;
            
    <table style="width: 660px">
      <tr>
        <td style="width: 660px">
          <strong>L: length</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>H: height</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>P: perimeter</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>A: area</strong>
        </td>
      </tr>
    </table>
                
    &nbsp;
    
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="parajust">Based on these, the following 
          calculations can be made</p>
        </td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">P = (L + H) * 2</p>
        </td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">A = L * H</p>
        </td>
      </tr>
    </table>
    
    <hr />
    
    <table>
      <tr>
        <td style="width: 100px"></td>
        <td style="width: 121px">&nbsp;</td>
        <td style="width: 100px"></td>
      </tr>
      <tr>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 121px">
                    </td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 121px">
                    </td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                    </td>
                    <td style="width: 121px">
                    </td>
                    <td style="width: 100px">
                    </td>
                </tr>
            </table>
    
    <table border="0" width="660">
      <tr>
        <td colspan="2">
          <hr />
          
            &nbsp;</td>
      </tr>
      <tr>
        <td align="center" style="height: 18px">
          <a href="index.aspx">Home</a>
        </td>
        <td align="center" style="height: 18px">
          <p class="centered">Copyright © 2007 NetConsulting, Inc.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr />
        </td>
      </tr>
    </table>
        
        </div>
        </form>
    </body>
    </html>
  19. To add a new web page, on the main menu, click Web Site -> Add New Item...
  20. Make sure Web Form is selected.
    Set the Name to square and click Add
  21. Change the file as follows:
     
    <%@ Page Language="C#"
             AutoEventWireup="true" 
             CodeFile="square.aspx.cs" 
             Inherits="square" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    
    <link rel="Stylesheet" type="text/css" href="geometry.css" />
    
    <title>Geometry: Square</title>
    </head>
    <body>
    
        <form id="frmSquare" runat="server">
        <div>
        
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="maintitle">Geometry: Square</p>
        </td>
      </tr>
    </table>
    
    &nbsp;
    
    <table border="0" width="660">
      <tr>
        <td>
          <p class="parajust">A square is a type of 
          <a href="rectangle.aspx">rectangle</a> 
          for which all 4 sides are equal. This means that the horizontal 
          measurement, the base or length and the height are equal. The 
          length of each side is then called the side of the square. A 
          square can be represented as follows:</p>
                    
          <p class="centered"><img src="images/square1.gif" /></p>
                    
          <p class="parajust">To process a square, you must have the 
          measure of the side. This would allow you to calculate the 
          perimeter and the area. To do this, you can use simple 
          geometric formulas. Consider the following:</p>
          </td>
      </tr>
    </table>
    
    &nbsp;
    
    <table>
      <tr>
        <td style="width: 660px">
          <strong>S: side</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>P: perimeter</strong>
        </td>
      </tr>
      <tr>
        <td style="width: 660px">
          <strong>A: area</strong>
        </td>
      </tr>
    </table>
    
    &nbsp;
    
    <table border="0" style="width: 660px">
      <tr>
        <td style="width: 100%">
          <p class="parajust">To calculate the values of a square, you can 
          use the following formulas:</p></td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">P = S * 4</p>
        </td>
      </tr>
      <tr>
        <td style="width: 100%">
          <p class="formula">A = S * S</p>
        </td>
      </tr>
    </table><hr color="#0000ff" /><table>
                <tr>
                    <td style="width: 100px">
                        </td>
                    <td style="width: 121px">
                        &nbsp;</td>
                    <td style="width: 100px">
                        </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        </td>
                    <td style="width: 121px">
                        </td>
                    <td style="width: 100px">
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        </td>
                    <td style="width: 121px">
                        </td>
                    <td style="width: 100px">
                    </td>
                </tr>
            </table>
    </div>
    </form>
    
    <table border="0" width="660">
      <tr>
        <td colspan="2">
          <hr color="#0000ff" />
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="index.aspx">
            <strong><span style="font-size: 10pt">Home</span></strong>
          </a>
        </td>
        <td align="center">
          <p class="centered">Copyright © 2007 NetConsulting, Inc.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr color="#0000ff" />
        </td>
      </tr>
    </table>
    
    </body>
    </html>
    
  22. In the bottom section of the default page, click the Design button

Introduction to the Toolbox

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

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 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 Auto Hide. If clicked, the Auto Hide button changes from pointing left to pointing down .

When Microsoft Visual Studio 2005 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 Studio 2005 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.

Using 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 Standard.

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 2005 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
  • 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. You can then right-click the button of a control and click either Move Up or Move Down.

Visual Control Addition

In order to make a web control available to your visitors, you must add it to your web page. 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. 
  • You can 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 on 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.

Practical LearningPractical Learning: Using the Toolbox

  1. Click the square.aspx tab to access its file and click the Design button
  2. Click the top-left empty cell of the table under the first blue line
  3. To use it, position the mouse on the Toolbox word and wait for the Toolbox to expand. Then click the Auto Hide button Auto Hide
  4. In the Toolbox, click the Standard button to display its controls.
    Double-click Label
  5. On the from, click the empty cell under the previously added Label
  6. To add another control, on the Toolbox, double-click Label
  7. Once again, on the from, click the empty cell under the secondly added Label
  8. On the Toolbox, double-click Label
  9. On the Toolbox, click and hold the mouse on TextBox
  10. Drag and drop it on the form in the top-middle empty cell of table that contains the previously added labels
  11. From the Toolbox, drag a TextBox and drop it on the form in the middle-center empty cell of table that contains the previously added controls
  12. Once again, from the Toolbox, drag a TextBox and drop it on the form in the bottom-center empty cell of table that contains the previously added controls
  13. On the form, click the top-middle empty cell of the table that contains the other added controls
  14. On the Toolbox, double-click the Button
     
  15. Save the file
  16. Click the rectangle.aspx tab to select it and clic the Design button
  17. Click the top-left empty cell of the middle table
  18. In the Standard section of the Toolbox, double-click Label
  19. On the form, right-click the newly added label and click Copy
  20. Right-click each of the empty cells under it and click Paste each time
  21. From the Standard section of the Toolbox, drag the TextBox and drop it in the top-center empty cell of the table
  22. On the form, click the newly added TextBox and press Ctrl + C
  23. Click each of the empty cells under it and press Ctrl + V each time
  24. From the Standard section of the Toolbox, drag the Button and drop it in the second empty cell from right column of the table
     
  25. Save the file

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 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.

Practical LearningPractical Learning: Identifying the Web Controls

  1. On the form of the rectangle.aspx file, click the TextBox in the top-center cell of the table
  2. In the Properties window, click (ID) and type txtLength
  3. On the form, click the second TextBox and, in the Properties window, change its (ID) to txtHeight
  4. On the form, click the third TextBox and, in the Properties window, change its (ID) to txtPerimeter
  5. On the form, click the fourth TextBox and, in the Properties window, change its (ID) to txtArea
  6. On the form, click the Button and, in the Properties window, change its (ID) to btnCalculate
  7. Click the square.aspx tab to access its code
  8. On the form, click the top TextBox and, in the Properties window, change its (ID) to txtSide
  9. On the form, click the second TextBox and, in the Properties window, change its (ID) to txtPerimeter
  10. On the form, click the second TextBox and, in the Properties window, change its (ID) to txtArea
  11. On the form, click the Button and, in the Properties window, change its (ID) to btnCalculate
  12. Save the files

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>

Practical LearningPractical Learning: Specifying the Captions of Web Controls

  1. On the form of the square.aspx file, click the Label in the top-left cell of the table
  2. In the Properties window, click Text and type Side:
  3. On the form, click the Button and, in the Properties window, change its Text to Calculate
  4. On the form, click the second label and, in the Properties window, change its Text to Perimeter:
  5. On the form, click the third Label and, in the Properties window, change its Text to Area:
  6. Click the square.aspx tab to access its code
  7. On the form, click the top-left Label and, in the Properties window, change its Text to Length:
  8. On the form, click the second Label and, in the Properties window, change its Text to Height:
  9. On the form, click the Button and, in the Properties window, change its Text to Calculate
  10. On the form, click the third Label and, in the Properties window, change its Text to Perimeter:
  11. On the form, click the fourth Label and, in the Properties window, change its Text to Area:
  12. Save the files

Web Controls and Cascading Style Sheet

Everything you know about Cascading Style Sheet (CSS) formatting can be applied to web controls. In fact, ASP.NET heavily depends on it to control the positions of its web controls.

As seen in Lesson 4, 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 inline formatting 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. We saw an example in Lesson 4. 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. We saw an example in Lesson 4.

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. 

The Code Editor

 

Introduction

If you are using Microsoft Visual Studio 2005 to create your ASP.NET application, it provides its own and very useful editor, referred to as the Code Editor. To display the code editor, after creating a new ASP.NET Application, in the bottom section of the window, you can click the Design 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 2005 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 four sections.

The Tabs Bar

The top section of the Code Editor displays the tabs of the web 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 Object Combo Box

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 Event Combo Box

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

The Events Combo Box

The content of the Events 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 Code Area

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.

The Design and Source Buttons

When using a form, there is a bar under the form and it displays two buttons: Design and Source. 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 Source 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.

Design and Run Times

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.

Controls Events

 

Introduction

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 code. 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:

Handling of a Dynamic Control

 

Practical LearningPractical Learning: Generating Code for Web Controls

  1. Click the square.aspx file to access its form.
    On the form, double-click the Calculate button
  2. Click the rectangle.aspx file to access its form
  3. On the form, double- click the Calculate button

Taking Action on Web Controls

 

The OnClientClick Property

In the previous lesson, we saw that you could integrate JavaScript code your web page. This code runs on the user's computer while interacting with your web page. For example, if a user is filling out a form on your web page, before that form can be sent to your server, you can validate it and assist the user in filling it out to make sure it is right before submitting it.

To take local action in response to the user performing a task, such as clicking a button or navigating among the web controls on your page, you can use the OnClientClick property. For example, you can assign a call to the alert() function of the JavaScript language. Here is an example:

<asp:Button
    ID="btnShowIt" 
    runat="server" 
    OnClientClick="javascript:window:alert('Your time sheet has been received');"
    Text="Received"></asp:Button>

The alert() function is used to create a message that displays only an OK button and you don't expect a particular feedback from the user. If you want the user to make a decision, you can call the confirm() method of the window object of JavaScript. Here is an example:

<asp:Button ID="btnMsgBox"
	    runat="server"
	    OnClientClick="return confirm('Are you OK?');"
	    Text="Message Box" />

A call to confirm() displays a message box equipped with a message, an icon, a Yes, and a No buttons.

 

 
 

Previous Copyright © 2005-2007 FunctionX, Inc. Next