Home > Articles

Using Standard Web Forms Controls

Designing a web page using Visual Basic.NET is very similar to designing a normal Visual Basic.NET application. The only difference is what happens behind the scenes. Rather than code being added to create the controls and set their properties, HTML tags are added to the ASP.NET page, and code is added to a Visual Basic.NET file that works 'behind the scenes'.

The controls available to you in creating a Web Application are similar to those available in Windows applications. They include all the common controls you're used to using (see Figure 10.3). Table 10.1 describes these controls in brief.

Figure 10.3 Standard controls for Web Forms.

Table 10.1 Standard Web Forms controls

Control Description

Label

Use to place text on the Web Form. Alternately, you can simply click on the Web Form and start typing. The Label gives you better control over formatting, and allows you to place the text where you want it. Finally, the Label control also allows you to dynamically change the contents inside of your application, something not possible with text added to the form.

TextBox

Use to give the user a field to enter information into. This will often be the most common control added for a Web application.

Button

Use to give the user something to click on to carry out some action.

LinkButton

Similar in action to the normal Button control, the LinkButton is something for your Web application's users to click on. The difference is that the Button looks like a button, while the LinkButton is a hyperlink. (that is, the user sees a nice blue, underlined pointer somewhere).

ImageButton

Similar in action to the normal Button control, the ImageButton is something for your users to click on to do some action. The difference is that the ImageButton is a graphic that your users can click on.

Hyperlink

Very similar to the LinkButton, the difference is that the LinkButton has a Click event, while the Hyperlink does not. This means that you can only write code to deal with LinkButton cClicks, while the Hyperlink can only be used to send the user elsewhere.

DropDownList

DropDownList controls are quite common in Web Forms. They are a list that initially only takes a single line. You can click on the 'Drop down arrow' to open them and see the full list. Once you select an item from the list, the list again closes and only a single line is shown, containing your selection. You would use these controls when your user needs to select a single item from a list, and when you want to save screen space. For example, when selecting a state or country code.

ListBox

ListBox controls allow the user to select one or more items from a list of choices. They differ from DropDownLists in that the list is always visible. One other difference is that it is possible to select multiple items in a ListBox. Use the ListBox either when you need this multiple selection ability (although see CheckBoxList, below), when you want the user to always see their choices, or when screen space is plentiful.

CheckBox

The CheckBox is a yes or no question. It is either checked, or unchecked, and therefore is used when you want the user to either select an option or not. It differs from the RadioButton, in that the CheckBox is independent of other CheckBox controls, while the RadioButton is generally one possible option out of many.

CheckBoxList

The CheckBoxList is a series of CheckBox controls. Each one is independent of the others, but the CheckBoxList control is a handy way of adding a number of CheckBox controls to a page. This control is especially useful if you have a collection of items (perhaps retrieved from a database) that you want the user to select from. The CheckBoxList is also a handy replacement for the ListBox when you might want to select a number of items. However, you should still use the ListBox if you have more than about 6 items.

RadioButton

The RadioButton is similar to the CheckBox in that it is either Ttrue or Ffalse. It differs in that RadioButton controls tend to travel in packs. While each CheckBox on a form can be set independently to either Ttrue or Ffalse, only one RadioButton in a set can be Ttrue. So, you can think of a CheckBox as being a Yes/No question, while a RadioButton (or rather a group of RadioButtons) is more like a multiple-choice question where only one answer is correct.

RadioButtonList

The RadioButtonList is a group of RadioButton controls. It is an easy way of creating this group if you already have a list from some other location (like a database).

Image

The Image control allows you to place a graphic on the page.

Panel

The Panel control is similar to the Label control in that it is just a placeholder for text. The difference is that the Panel control can hold other controls. As such, it is a great control to use when you need to separate or _highlight information or controls. Similar, or related controls can be grouped in a Panel control to make them stand out from the other controls.


Just as with windows controls, you use the web form controls by double-clicking on them in the Toolbox, or by dragging them off onto your form. In this case, however, the form is a web page.

Let's create a simple Web Form application to see how these controls make it easy to write web programs.

Start Visual Basic.NET if it is not running, and create a new Web Application. We'll call this one 'Madlib'. We'll use it to create a simple Web Application to see many of the _standard controls in action. Select File, New, Project to open the New Project dialog. Open the Visual Basic Projects folder and select the Web Application project templatetype. Change the Name of the project to Madlib and click the OK button to build the project.

NOTE

Before you create a Web Application, you should first install Internet Information Services (or Internet Information Server).

Figure 10.4 Madlib form.

Just as with Windows-based applications, our first step is to lay out the controls we will be using in our application (see Figure 10.4 for the final result). We'll start by adding a graphic to our page.

Drag an Image control onto the form. Initially, it should look like a blank square (or rather a 'missing graphic'), as we need to set the path to the graphic. Go to the property window and find the ImageUrl property. When you click in the Property window for the ImageUrl property, you should see a button with three dots appear. Just as with Windows applications, this means that a dialog will help you set this property. Click the button, and find a nice graphic (I created one that said 'Madlib' in the Paint program that comes with Windows 2000). Click 'OK' and the graphic should now be showing on the form.

Explaining your program is generally considered good form. As we won't need to change the formatting of this text, we can just create this text on the fly by typing on the form. Click next to the Image control. You should see a cursor appear on the form. Press Enter to begin a new line and type a simple explanation. The text I entered is shown was:

A Mad Lib is a game where one player selects a series of words (usually by type of word, or a description). These words are then plugged into a story at specific spots to create a (hopefully) amusing, personalized end result.

Next, we'll add the controls to the page for the various items we'll plug in. Table 10.2NN describes the controls and property settings used.

Table 10.2 Controls used in the Madlib Web Form

Control

Property

Value

Label

Name(ID)

lblName

 

Text

Your first name:

 

Font Bold

True

TextBox

Name(ID)

txtName

Label

Name(ID)

lblDate

 

Text

A date:

 

Font Bold

True

TextBox

Name(ID)

txtDate

Label

Name(ID)

lblFruit

 

Text

A kind of fruit:

 

Font Bold

True

DropDownList

Name(ID)

cboFruit

 

Items

The DropDownList has a dialog that assists you in adding items to it. Click on the Items property, then the resulting Build button. See Figure 10.5 for the resulting dialog. Add a number of fruits, by clicking the Add button, then setting the Text property. Repeat for about 10 items. I added: Mango, Orange, Banana, Currant, Berry, Kumquat, Peach, Kiwi, Apricot, Plum.

Label

Name(ID)

lLblNumber

 

Text

A number from 100 to 1000:

 

Font Bold

True

TextBox

Name(ID)

txtNumber

 

Text

500

Label

Name(ID)

lblEmotion

 

Text

An emotional state:

 

Font Bold

True

RadioButtonList

Name(ID)

rlstEmotion

 

Items

The Items property of the RadioButtonList is similar to the Items property of the DropDownList, and has the same editor. Add a few of your favorite emotional states here. I added: Excited, Frustrated, Intrigued, Saddened, Panicky, Ecstatic, Angry, Jealous, Frightened, Happy, Shocked, Blue.

 

RepeatColumns

3

Label

Name(ID)

lblVerb

 

Text

A verb:

 

Font Bold

True

TextBox

Name(ID)

txtVerb

Label

Name(ID)

lblOccupation

 

Text

An occupation:

 

Font Bold

True

TextBox

Name(ID)

txtOccupation

Button

Name(ID)

cmdbtnWrite

 

Text

Write Story

Button

NameID

btnClear

 

Text

Clear

Label

Name(ID)

lblResult

 

Text

Emptyleave this field blank (that is, clear out _the value in the Text property)

 

BorderStyle

Groove

 

Width

75%


In addition, you may want to start a new line periodically to arrange the controls better on the page. See the graphic figure for one example. If you're familiar with HTML, you might want to put the controls in a Table for even better formatting possibilities.

NOTE

There is another technique you can use to put controls on a Web Form. If you look at the properties of the Web Form (look for the DOCUMENT in the drop down list of objects at the top of the Property window), you will see one called pageLayout. By default, this is LinearLayout. The alternative, GridLayout can help you create very rich Web Forms. If the pageLayout is set to GridLayout, you can place controls on the Web Form just as you can on a Windows Form.

Figure 10.5 Adding items to the DropDownList.

Most of the properties used should make sense, however a few likely need extra explanation. Many controls that work with lists are able to be 'bound' to a collection of items. Often, this means that they can be attached to information retrieved from a database, however, they can also be attached to other collections, such as arrays. Controls capable of this can be identified easily, as they have an Items collection. This Items collection appears in the Property window, and allows you to add items without binding the control to an array or other collection. This is the easiest way to add the items if they will not be changing. _If they will likely change, you should keep them in a database and retrieve them at runtime, then bind them to the control. We will see this in action on Day 12.

The RadioButtonList has a relatively rare property: RepeatColumns. You can set this to control the number of columns used to display the list of items. This can be a great way to save some space on the screen, while still showing all the items. Behind the scenes, the RadioButtonList writes HTML to make this work. This is one of the features that make these controls easier to use than writing your own HTML.

Our next step in writing our Web application is to add code. We will only be adding code to the two buttons. We'll start with the Clear button. This button will clear the information in the various TextBox controls, and in the results Label. Double-click on the Clear button and add the code shown in Listing 10.1.

Listing 10.1 Code for the Clear button

1   Public Sub btnClear_Click(ByVal sender As Object, ByVal e As System.EventArgs)
2     txtName.Text = ""
3     txtDate.Text = ""
4     txtVerb.Text = ""
5     txtNumber.Text = ""
6     txtOccupation.Text = ""
7     lblResult.Text = ""
8   End Sub

The code for this bButton is quite simple. All it does is sets the Text property of all the TextBox controls, and the results Label to "". This clears those controls.

Listing 10.2 Code for the Write Story button

1   Public Sub btnWrite_Click(ByVal sender As Object, ByVal e As System.EventArgs)
2     'here's where we combine the selections the user has made into the final story
3     Dim sTemp As String
4     sTemp = "Diary of " & txtName.Text & " for " & DateTime.Today.ToString & "<br>"
5     sTemp &= "On " & txtDate.Ttext & " I started to program in Visual Basic.NET. "
6     sTemp &= "I'm " & rlstEmotion.SelectedItem.Text & "! "
7     sTemp &= "I think I'm going to go out and " & txtVerb.Text
8     sTemp &= " my new " & txtNumber.Text
9     sTemp &= " PicoHertz " & cboFruit.SelectedItem.Text
10     sTemp &= " and become a " & txtOccupation.Text & "."
11     'the final story goes into the Label control
12     lblResult.Text = sTemp
13   End Sub

The code for this bButton is also simple. The basic idea is that we build a long string containing the entire story, and this is written to the results Label. Line 3 begins this, where we declare our string. The string is then built through lines 4-10, and the result is put into the Text property of the lblResult control. One symbol that likely seems strange is the '&=' that appears on lines 5-10. This is a new feature of Visual Basic.NET, and it is a shortcut when adding to a string. The code on line 5, for example:

sTemp &= "On " & txtDate.Ttext & " I started to program in Visual Basic.NET. "

is equivalent to:

sTemp = sTemp & "On " & txtDate.Ttext & " I started to program in Visual Basic.NET. "

You can use the &= operator to make your code shorter when you are adding more information to the end of an existing string.

Once you have added the code, we're ready to try to build and experiment with our program. Select Build from the Build menu, and then run the program. This should start a copy of Internet Explorer, loading your page. Enter a few items and click the Write Story button to see your story. Figure 10.6 shows the Web Form in action.

Figure 10.6 Madlib form in action.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020