ASP.NET 2.0 Web Controls
I'd like to now spend a little time discussing some of the important web controls in ASP.NET 2.0, including the BulletedList, HiddenField, Multiview, Wizard, and ImageMap controls.
|Figure 9: The BulletedList control makes creating manually maintained and data-bound lists easy.|
The BulletedList control provides a quick and easy way to develop both bulleted and numbered lists. You can manually enter a list (see Figure 9
) or you can use data binding to populate the items in the list. The BulletStyle property offers a number of options for bulleted and numbered lists.
Storing data in hidden fields on a page is nothing new—and is in fact a very common technique to save state data across posts back to the server. ASP.NET 2.0's HiddenField control provides the ability to create a hidden field on a page and use it to store data to be sent back to the server on a post back.
Many web sites provide the ability for users to upload files. For example, an employment recruiting firm may allow people to upload their resume, or a printing company might allow customers to upload their print jobs. Microsoft's ASP.NET team designed the FileUpload control to make this an easy feature to add to your site. The FileUpload control is comprised of a textbox to allow the user to type the file information and a Browse button that allows the user to go search for the file. To get the file uploaded you must add a separate button that results in a postback and executes the code to upload the file:
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Dim FilePath As String = _
Request.PhysicalApplicationPath & "Uploads\"
If (FileUpload1.HasFile) Then
Dim FileName As String = Me.FileUpload1.FileName
FilePath += FileName
Label1.Text = "Your file was saved as " & _
Label1.Text = "Please select a file to upload."
In the preceding code, the FilePath
variable will hold the folder location to which the file will be uploaded. If there is a value in the textbox portion of the FileUpload control, indicated by the HasFile
property, then the file name is combined with the file upload path. Next, the SaveAs
method for the control is executed thereby actually uploading the file.
MultiView and Wizard Controls
The MultiView and Wizard controls both allow you to create multiple sections of controls on the same page. The Wizard control has features built in to facilitate its operation such as built-in Next and Prev buttons. With the Multiview control the responsibility to add and code the navigation falls to you.
|Figure 10: MultiView controls contain individual View controls.|
As the name implies, a MultiView control is a container control hosting a number of View controls. Each View control is an independent section that in turn hosts its own controls (see Figure 10
). Use MultiView controls to replace multiple forms related to a specific function, such as you'd find in an online shopping cart. Instead of having multiple forms for each action in a shopping cart, you could use a single MultiView control and simply control which views a page displays at specific times. The ActiveViewIndex
property holds the index of the currently active view. Assigning ActiveViewIndex
displays the first view in the control. Programmatically assigning a value to the ActiveViewIndex
property, or calling the SetActiveView
method and passing a view object reference, is one technique for displaying a specific View control:
Me.MultiView1.ActiveViewIndex = 1
|Figure 11: The NextView CommandName property value advances to the next view.|
You can also specify which view to display using a technique that doesn't require writing any code at all. For example, you can add a CommandButton and set its CommandName
property to NextView
thereby causing the MultiView control to automatically switch views when a user clicks the button (see Figure 11
). If you prefer jumping to a specific view instead of moving forward or backward one view at a time, you can set the CommandButton's CommandName
property to SwitchViewByIndex
and its CommandAgrument
property to the index of the view to switch to. To switch to a view by its ID instead of index position you can set the CommandButton's CommandName
property to SwitchViewByID
and its CommandArgument
property to the ID of the view.
The ViewState for a page with a MultiView control automatically stores the data for all of the controls for each view. Since all the controls are on the same page, accessing properties and methods for a control in a view is no different than accessing properties and methods for a control not contained in a view.
|Figure 12: Use the Wizard control to implement step-by-step processes.|
The Wizard control works much like the MultiView control in that they both contain sections to place controls in. While the sections in a MultiView control are views, the sections in a Wizard control are called steps. These steps are stored in the WizardSteps
collection. The primary difference between the two controls is that the Wizard control can display links to all of the steps in a sidebar on the left-hand side of the control (see Figure 12
). The DisplaySideBar
property controls the display of the sidebar.
You can add or remove steps from a wizard control by selecting the Add/Remove WizardSteps option from the smart tag Wizard Tasks menu.
Each step is configured to be of a certain type. The StepType
attribute determines how the step behaves and which buttons appear on the step (see Table 2).
Table 2. StepType Attribute Settings: The StepType attribute accepts these values.
This is the default setting. It automatically sets the first step as a Start step, the last as a Finish step, and all others as Step steps.
Specifies that the step has no sidebar or navigation buttons. Displaying a completion message is a common usage for this type of step.
Specifies that the step has a Previous button and a Finish button.
Specifies that the step does not have a Previous button and does have a Next button.
Specifies that the step has a Previous button and a Next button.
|Master pages provide the ability to define page templates on which you can base other pages.|
Based on the value of a step's StepType
property, the built-in Next, Previous, Finish, and Cancel buttons control all the page-by-page navigation tasks automatically. Setting the DisplayCancelButton
property to True
causes the Cancel button to be displayed. Clicking the Cancel button causes the CancelButtonClick
event to fire. You can set the value in the ActiveStepIndex
property to manually select the active step. You can code event handlers for a number of Wizard events such as ActiveStepChanged
, and SidebarButtonClick
HTML has supported image maps for what seems like hundreds of years, and ASP.NET 2.0 supports them in the form of the ImageMap control. Just in case you're unaware of what an image map is and how it works, image maps contain clickable regions called hotspots. A developer can configure each hotspot to respond when clicked on by a user. ASP.NET 2.0's ImageMap control supports three different types of hotspot objects: CircleHotSpot, RectangleHotSpot, and PolygonHotSpot. Unfortunately Visual Studio 2005 does not provide an editor to easily define hotspot x
coordinates, so you need to use an external graphics program.
You use the ImageURL
property to determine the image to display in the control. You add hotspots by clicking the ellipses button for the HotSpots
collection and launching the HotSpot Collection Editor (see Figure 13
|Figure 13: The HotSpots collection defines the clickable areas on an ImageMap.|
Select the type of hotspot from the Add button dropdown and click Add. You use a single set of x
coordinates to define Rectangle and Circle hotspots while you must use a string of x
coordinates to define polygon hotspots. The HotSpotMode
property specifies the behavior for the hotspot. The Postback
setting causes a postback to occur, and the Navigate setting causes a redirect to the page specified in the NavigateURL