Browse DevX
Sign up for e-mail newsletters from DevX


Creating Web Sites with ASP.NET 2.0 : Page 3

If you're just starting to create ASP.NET web sites—or just switching to ASP.NET 2.0—you can get up to speed quickly with this handy guide.

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

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

FileUpload Control
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."
      End If
   End Sub
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.
MultiView Control
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 to 0 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
   Me.MultiView1.SetActiveView( _
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 or PrevView 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.
Wizard Control
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, NextButtonClick, PreviousButtonClick, and SidebarButtonClick.

ImageMap Control
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 and y 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 and y coordinates to define Rectangle and Circle hotspots while you must use a string of x and y 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 property.

Thanks for your registration, follow us on our social networks to keep up-to-date