- The Web Programming Model
- Using Standard Web Forms Controls
- Using Advanced Web Forms Controls
- Using the Validator Ccontrols
- Summary
- Q&A
- Workshop
- Answers for Chapter 10
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.
){kind=link}
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.
){kind=link}
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:
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% |
){kind=link}
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.
){kind=link}
Figure 10.6 Madlib form in action.