Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Web Controls: Text and Graphics Controls - ASP.NET

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - ASP.NET 2.0 and ASP.NET Ajax

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Web Controls: Text and Graphics Controls - ASP.NET

This section introduces some of the web controls located in the Standard section of the Toolbox (Fig. 25.6).

Web Controls


This section introduces some of the web controls located in the Standard section of the Toolbox (Fig. 25.6). Figure 25.12 summarizes some of the web controls used in the chapter examples.


Web control : Description


Label : Displays text that the user cannot edit.

TextBox : Gathers user input and displays text.

Button : Triggers an event when clicked.

HyperLink : Displays a hyperlink.

DropDownList : Displays a drop-down list of choices from which you can select an item.

RadioButtonList : Groups radio buttons.

Image : Displays images (e.g., GIF and JPG).


1. Text and Graphics Controls

Figure 25.13 depicts a simple form for gathering user input. This example uses all the con-trols listed in Fig. 25.12, except Label, which you used in Section 25.2. The code in Fig. 25.13 was generated by Visual Web Developer in response to dragging controls onto the page in Design mode. To begin, create an ASP.NET website named WebControls. [Note: This example does not contain any functionality—i.e., no action occurs when the user clicks Register. We ask you to provide the functionality as an exercise. In subsequent examples, we demonstrate how to add functionality to many of these web controls.]

1    <%-- Fig. 25.13: WebControls.aspx --%>


2    <%-- Registration form that demonstrates Web controls. --%>


3    <%@ Page Language="VB" AutoEventWireup="false"


4          CodeFile="WebControls.aspx.vb" Inherits="WebControls" %>


6    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


7          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


9    <html xmlns="http://www.w3.org/1999/xhtml">


10   <head runat="server">


11           <title>Web Controls Demonstration</title>


12   </head>


13   <body>


14         <form id="form1" runat="server">


15         <div>


16                <h3>This is a sample registration form.</h3>

17                <p>


18                      <em>Please fill in all fields and click Register.</em></p>

19                <p>


20                      <asp:Image ID="userInformationImage" runat="server"

21                            EnableViewState="False" ImageUrl="~/Images/user.png" /> &nbsp;


22                      <span style="color: teal">

23                            Please fill out the fields below.</span>

24                </p>


25                <table id="TABLE1">


27        <td style="width: 230px; height: 21px" valign="top">

28        <asp:Image ID="firstNameImage" runat="server"

29                    EnableViewState="False" ImageUrl="~/Images/fname.png" />

30                    <asp:TextBox ID="firstNameTextBox" runat="server"          

31                    EnableViewState="False"></asp:TextBox>    

32        </td>

33        <td style="width: 231px; height: 21px" valign="top">

34        <asp:Image ID="lastNameImage" runat="server"

35                    EnableViewState="False" ImageUrl="~/Images/lname.png" />

36        <asp:TextBox ID="lastNameTextBox" runat="server"

37                    EnableViewState="False"></asp:TextBox>

38        </td>


39        </tr>

40        <tr>



41        <td style="width: 230px" valign="top">

42        <asp:Image ID="emailImage" runat="server"

43        EnableViewState="False" ImageUrl="~/Images/email.png" />

44        <asp:TextBox ID="emailTextBox" runat="server"

45        EnableViewState="False"></asp:TextBox>

46        </td>

47        <td style="width: 231px" valign="top">         

48        <asp:Image ID="phoneImage" runat="server"          

49        EnableViewState="False" ImageUrl="~/Images/phone.png" />

50        <asp:TextBox ID="phoneTextBox" runat="server"    

51        EnableViewState="False"></asp:TextBox>    

52        Must be in the form (555) 555-5555.

53        </td>


54        </tr>


55        </table>

56        <p>


57        <asp:Image ID="publicationsImage" runat="server"

58        EnableViewState="False"


59        ImageUrl="~/Images/publications.png" /> &nbsp;


60        <span style="color: teal">

61        Which book would you like information about?</span>

62        </p>

63        <p>


64        <asp:DropDownList ID="booksDropDownList" runat="server"




66        <asp:ListItem>Visual   Basic 2005 How to Program 3e                     

67        </asp:ListItem>                                  

68        <asp:ListItem>Visual   C# 2005 How to Program 2e             

69        </asp:ListItem>                                  

70        <asp:ListItem>Java How to Program 6e</asp:ListItem>                   

71        <asp:ListItem>C++ How to Program 5e</asp:ListItem>        

72        <asp:ListItem>XML How to Program 1e</asp:ListItem>


73        </asp:DropDownList>

74        </p>

75        <p>


76        <asp:HyperLink ID="booksHyperLink" runat="server"


EnableViewState="False" NavigateUrl="http://www.deitel.com"                


78        Target="_blank">       

79        Click here to view more information about our books


80        </asp:HyperLink>

81        </p>

82        <p>


83        <asp:Image ID="osImage" runat="server" EnableViewState="False"

84        ImageUrl="~/Images/os.png" /> &nbsp;


85        <span style="color: teal">

86        Which operating system are you using?</span>

87        </p>

88        <p>


89        <asp:RadioButtonList ID="operatingSystemRadioButtonList"


runat="server" EnableViewState="False">                


91        <asp:ListItem>Windows XP</asp:ListItem>               

92        <asp:ListItem>Windows 2000</asp:ListItem>                       

93        <asp:ListItem>Windows NT</asp:ListItem>              

94        <asp:ListItem>Linux</asp:ListItem>  

95        <asp:ListItem>Other</asp:ListItem>


96        </asp:RadioButtonList>

97        </p>

98        <p>


                        <asp:Button ID="registerButton" runat="server"      

100      EnableViewState="False" Text="Register" />

101      </p>

102      </div>


103      </form>


104      </body>


105      </html>

Fig. 25.13 | Web Form that demonstrates web controls

Before discussing the web controls used in this ASPX file, we explain the XHTML that creates the layout seen in Fig. 25.13. The page contains an h3 heading element (line 16), followed by a series of additional XHTML blocks. We place most of the web controls inside p elements (i.e., paragraphs), but we use an XHTML table element (lines 25–55) to organize the Image and TextBox controls in the user information section of the page. In the preceding section, we described how to add heading elements and paragraphs visually without manipulating any XHTML in the ASPX file directly. Visual Web Developer allows you to add a table in a similar manner.

Adding an XHTML Table to a Web Form


To create a table with two rows and two columns in Design mode, select the Insert Table command from the Layout menu. In the Insert Table dialog that appears, select the Custom radio button. In the Layout group box, change the values of Rows and Columns to 2. By default, the contents of a table cell are aligned vertically in the middle of the cell. We changed the vertical alignment of all cells in the table by clicking the Cell Properties… but-ton, then selecting top from the Vertical align combo box in the resulting dialog. This caus-es the content of each table cell to align with the top of the cell. Click OK to close the Cell Properties dialog, then click OK to close the Insert Table dialog and create the table. Once a table is created, controls and text can be added to particular cells to create a neatly orga-nized layout.


Setting the Color of Text on a Web Form


Notice that some of the instructions to the user on the form appear in a teal color. To set the color of a specific piece of text, highlight the text and select Format > Foreground col-or…. In the Color Picker dialog, click the Named Colors tab and choose a color. Click OK to apply the color. Note that the IDE places the colored text in an XHTML span element (e.g., lines 22–23) and applies the color using the span’s style attribute.


Examining Web Controls on a Sample Registration Form

Lines 20–21 of Fig. 25.13 define an Image control, which inserts an image into a web page. The images used in this example are located in the chapter’s examples directory. You can download the examples from  www.deitel.com/books/iw3htp4. Before an image can be displayed on a web page using an Image web control, the image must first be added to the project. We added an Images folder to this project (and to each example project in the chapter that uses images) by right clicking the location of the project in the Solution Explor-er, selecting New Folder and entering the folder name Images. We then added each of the images used in the example to this folder by right clicking the folder, selecting Add Existing Item… and browsing for the files to add. You can also drag a folder full of images onto the project’s location in the Solution Explorer to add the folder and all the images to the project.


The ImageUrl property (line 21) specifies the location of the image to display in the Image control. To select an image, click the ellipsis next to the ImageUrl property in the Properties window and use the Select Image dialog to browse for the desired image in the project’s Images folder. When the IDE fills in the ImageUrl property based on your selec-tion, it includes a tilde and forward slash (~/) at the beginning of the ImageUrl—this indi-cates that the Images folder is in the root directory of the project.

Lines 25–55 contain the table element created by the steps discussed previously. Each td element contains an Image control and a TextBox control, which allows you to obtain text from the user and display text to the user. For example, lines 30–31 define a TextBox control used to collect the user’s first name.


Lines 64–73 define a DropDownList. This control is similar to the XHTML select control. When a user clicks the drop-down list, it expands and displays a list from which the user can make a selection. Each item in the drop-down list is defined by a ListItem element (lines 66–72). After dragging a DropDownList control onto a Web Form, you can add items to it using the ListItem Collection Editor. This process is similar to customizing a ListBox in a Windows application. In Visual Web Developer, you can access the ListItem Collection Editor by clicking the ellipsis next to the Items property of the DropDownList, or by using the DropDownList Tasks menu. You can open this menu by clicking the small arrowhead that appears in the upper-right corner of the control in Design mode (Fig. 25.14). This menu is called a smart tag menu. Visual Web Developer displays smart tag menus for many ASP.NET controls to facilitate common tasks. Clicking Edit Items... in the DropDownList Tasks menu opens the ListItem Collection Editor, which allows you to add ListItem elements to the DropDownList.


The HyperLink control (lines 76–80 of Fig. 25.13) adds a hyperlink to a web page. The NavigateUrl property (line 77) of this control specifies the resource (i.e.,  http://  www.deitel.com) that is requested when a user clicks the hyperlink. Setting the Target property to _blank specifies that the requested web page should open in a new browser window. By default, HyperLink controls cause pages to open in the same browser window.


Lines 89–96 define a RadioButtonList control, which provides a series of radio but-tons from which the user can select only one. Like options in a DropDownList, individual radio buttons are defined by ListItem elements. Note that, like the DropDownList Tasks smart tag menu, the RadioButtonList Tasks smart tag menu also provides an Edit Items… link to open the ListItem Collection Editor.


The final web control in Fig. 25.13 is a Button (lines 99–100). A Button web control represents a button that triggers an action when clicked. This control typically maps to an XHTML input element with attribute type set to "submit". As stated earlier, clicking the Register button in this example does not do anything.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.