Book VIII: Advanced ASP.NET Programming
Chapter 4: Using Advanced Web Server Controls
In This Chapter
⻬Working with the MultiView control
⻬Making use of the Wizard control
⻬Using the Calendar control
⻬Utilizing the FileUpload control
T
his chapter presents four interesting ASP.NET server controls. TheMultiViewand Wizardcontrols both let you create controls that have multiple groups of controls inside them — although only one group at a time is displayed. The Calendarcontrol displays calendars. And the FileUpload
control lets your users upload files (for example, completed pizza orders) to your Web site.
All code listings used in this book are available for download at www.dummies. com/go/aspnetaiofd. Note that you’ll find both C# and VB.NET versions of all the listings in this chapter available for download from the Web site. Enjoy!
Using the MultiView Control
A MultiViewcontrol is a control that contains one or more views, each of which can display a different set of controls. MultiViewcontrols are typi- cally used to create pages that require a lot of input from the user. Rather than throw all the input controls at the user at once, a MultiViewcontrol lets you break the input controls into sections and display only one group of controls at a time. The result is a less confusing page that’s easier to use. To illustrate, Figure 4-1 shows a Web page that steps the user through the process of ordering a pizza. First, the user selects the pizza size and clicks Next. Then the user selects the toppings and clicks Next. Finally, the user enters his or her name and clicks Finish. In response, the application dis- plays a summary of the pizza order in a label that appears beneath the
Using the MultiView Control
148
The MultiViewcontrol is actually a container that holds a collection of indi- vidual Viewcontrols. In turn, each of those Viewcontrols is a container that
Figure 4-1:
A page that uses a MultiView control.
Book II Chapter 4 Using Advanced W eb Ser ver Controls
Using the MultiView Control
149
can hold still other controls such as labels, text boxes, and so on. Only one of the Viewcontrols in the MultiViewcontrol is active at any given time, and only the controls in the active Viewcontrol are shown on the page. The markup for a MultiViewcontrol can look pretty complicated, but it fol- lows a pretty simple structure:
<asp:MultiView ID=”MultiView1” runat=”server” ActiveViewIndex=”0”>
<asp:View ID=”View1” runat=”server”> Controls for first view go here </asp:View>
<asp:View ID=”View2” runat=”server”> Controls for second view go here </asp:View>
<asp:View ID=”View2” runat=”server”> Controls for third view go here </asp:View>
</asp:MultiView>
To create a MultiViewcontrol in Design view, first drag the MultiViewcon- trol from the toolbox onto the page. Then you just drag one or more View
controls into the MultiViewcontrol. The Viewcontrols will appear on- screen one beneath the other, as shown in Figure 4-2. Rest assured that even though all the views are visible in the Web Designer, only one of the views will be shown on the page when the application runs.
Figure 4-2: Creating a MultiView control in Visual Studio.
Using the MultiView Control
150
You can specify the initial view by setting the ActiveViewIndexattribute in the markup for the MultiViewcontrol. And you can change to a different view by setting the ActiveViewIndexproperty in your code. For example, you can move to the next view by providing a button whose Clickevent handler includes C# code like this:
MultiView1.ActiveViewIndex += 1;
(The VB.NET version of this code is the same, but without the semicolon.) Fortunately, you can avoid writing code for simple view navigation by pro- viding button controls within the Viewcontrol that specify one of the follow- ing values for the CommandNameproperty:
CommandName Description
NextView Displays the next view in the sequence. PrevView Displays the previous view in the sequence. SwitchViewByID Displays the view whose IDis specified by the
CommandArgumentproperty.
SwitchViewByIndex Displays the view whose Indexis specified by the CommandArgumentproperty.
For example, here’s a button that displays the next view:
<asp:Button ID=”Button1” runat=”server” CommandName=”NextView” Text=”Next” />
And here’s a button that returns to the first view:
<asp:Button ID=”Button1” runat=”server” CommandName=”SwitchViewByID”
CommandArgument=”0” Text=”First” />
The complete markup for the page shown in Figure 4-1 makes its appearance in Listing 4.1. Note that this is the C# version of the markup; the VB.NET ver- sion will vary slightly due to the settings in the Page directive and the way events are handled. (The VB.NET version is available for download from the book’s Web site.) The following list describes the highlights:
✦ →1:The start tag for the MultiViewcontrol. The ActiveViewIndex
attribute specifies that the first view should be displayed by default.
✦ →2:The start tag for the first view in the MultiViewcontrol, named
View1. This Viewcontrol contains radio buttons that let the user select the pizza size.
Book II Chapter 4 Using Advanced W eb Ser ver Controls
Using the MultiView Control
151
✦ →3:This link button specifies NextViewfor the CommandNameattribute. Then the second view is displayed when the user clicks this button.
✦ →4:The second view contains check boxes that let the user select the pizza toppings.
✦ →5:This link button specifies PrevViewfor the CommandNameattribute, so the first view is displayed when the user clicks this button.
✦ →6:This link button specifies NextViewfor the CommandNameattribute, so the third view is displayed when the user clicks this button.
✦ →7:The third view contains a text box that lets the user enter his or her name.
✦ →8:This link button specifies PrevViewfor the CommandNameattribute, so the second view is displayed when the user clicks this button.
✦ →9:Unlike the other link buttons, this one doesn’t use the CommandName
attribute. Instead, it specifies a Clickevent handler that displays the user’s name, the pizza size, and the toppings.
✦ →10:This line marks the end of the MultiViewcontrol.
Listing 4-1: A page with a MultiView control (C#)
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title>Pizza Order</title> </head> <body>
<form id=”form1” runat=”server”> <div>
<asp:MultiView ID=”MultiView1” runat=”server” →1 ActiveViewIndex=”0”>
<asp:View ID=”View1” runat=”server”> →2 Size:<br /><br />
<asp:RadioButton ID=”rdoSmall” runat=”server” Text=”Small” GroupName=”Size” /> <asp:RadioButton ID=”rdoMedium” runat=”server”
Text=”Medium” GroupName=”Size” Checked=”True” />
<asp:RadioButton ID=”rdoLarge” runat=”server” Text=”Large” GroupName=”Size” />
<br /><br />
<asp:LinkButton ID=”LinkButton1” runat=”server” →3 CommandName=”NextView” Text=”Next” />
</asp:View>
Utilizing the Wizard Control
152
Listing 4-1 (continued)
<asp:View ID=”View2” runat=”server”> →4 Toppings:<br /><br />
<asp:CheckBox ID=”chkPepperoni” runat=”server” Text=”Pepperoni” />
<asp:CheckBox ID=”chkSausage” runat=”server” Text=”Sausage” />
<asp:CheckBox ID=”chkMushrooms” runat=”server” Text=”Mushrooms” />
<asp:CheckBox ID=”chkOlives” runat=”server” Text=”Olives” />
<br /><br />
<asp:LinkButton ID=”LinkButton3” runat=”server” →5 CommandName=”PrevView” Text=”Previous” />
<asp:LinkButton ID=”LinkButton2” runat=”server” →6 CommandName=”NextView” Text=”Next” />
</asp:View>
<asp:View ID=”View3” runat=”server”> →7 Name:
<asp:TextBox ID=”txtName” runat=”server” /> <br /><br />
<asp:LinkButton ID=”LinkButton4” runat=”server” →8 CommandName=”PrevView” Text=”Previous” />
<asp:LinkButton ID=”btnFinish” runat=”server” →9 Text=”Finish”
OnClick=”btnFinish_Click” /> </asp:View>
</asp:MultiView> →10 <br /><br />
<asp:Label ID=”lblOrder” runat=”server” /> </div>
</form> </body> </html>
Utilizing the Wizard Control
The Wizardcontrol is like the MutliViewcontrol on steroids. It’s designed to create sequences of steps, such as the check-out page for an on-line store or the sign-up page for a members-only Web site. Figure 4-3 shows a typical example, a four-step wizard for ordering a pizza. The first three steps are like the three views used by the MultiViewcontrol shown in the previous sec- tion. The fourth step is a final confirmation step that summarizes what the user has selected before completing the wizard.
Like the MultiViewcontrol, the Wizardcontrol is a container for groups of other controls that are displayed one at a time. Instead of views, however, these groups of controls are called steps. Unlike the MultiViewcontrol, the
Wizardcontrol has automatic features built in that let the user move from step to step.
Book II Chapter 4 Using Advanced W eb Ser ver Controls
Utilizing the Wizard Control
153
The basic structure of the tags for a Wizardcontrol is as follows:
<asp:Wizard ID=”Wizard1” runat=”server” > <WizardSteps>
<asp:WizardStep runat=”server” Title=”Step 1”> Controls for first step go here
</asp:WizardStep>
<asp:WizardStep runat=”server” Title=”Step 2”> Controls for first step go here
</asp:WizardStep>
<asp:WizardStep runat=”server” Title=”Finish” > Controls for final step go here
</asp:WizardStep> </WizardSteps>
</asp:Wizard>
There are a few properties you may want to specify on the Wizardelement itself. These properties are listed in Table 4-1, and here’s an example that includes several of these properties:
Step 1 Step 2 Step 3 Step 4 Figure 4-3: A page with a Wizard control.
Utilizing the Wizard Control
154
<asp:Wizard ID=”Wizard1” runat=”server” ActiveStepIndex=”0”
HeaderText=”Sample Wizard” DisplayCancelWizard=”False” >
Table 4-1 Wizard Element Properties
Property Description
DisplaySideBar Trueif a sidebar with navigation controls should be displayed.
DisplayCancelButton Trueif the wizard should display a Cancel button to allow the user to cancel the wizard.
CancelButtonText The text that should be displayed in the Cancel button.
CancelButtonDestinationPageURL The URL of the page that should be dis- played if the user clicks the Cancel button. HeaderText The text to display at the top of the wizard. StartNextButtonText The text to display in the Next button on
the Start step.
StepNextButtonText The text to display in the Next button on a regular step.
StepPrevButtonText The text to display in the Previous button on a regular step.
FinishPrevButtonText The text to display in the Previous button on the final step.
FinishCompleteButtonText The text to display in the Finish button. FinishCompleteButtonPageURL The URL of the page that should be dis-
played if the user clicks the Finish button.
Creating steps in Visual Studio
To create a Wizardcontrol in Visual Studio, first drag the Wizardcontrol icon (shown in the margin) from the toolbox onto the page. This creates a basic Wizard with two steps, as shown in Figure 4-4.
You can switch to a particular step by clicking the step’s name in the sidebar area that appears on the left side of the Wizardcontrol. Or you can use the drop-down list in the Smart Tag menu to choose the step you want to view. To add controls or other content to a step, just click the center of the Wizard
control and start adding controls and content. If you add any controls or other content, what you add becomes part of the currently selected step.
Book II Chapter 4 Using Advanced W eb Ser ver Controls
Utilizing the Wizard Control
155
To add a step, choose “Add/Remove WizardSteps...” from the Smart Tag menu. This brings up the dialog box shown in Figure 4-5.
You can use this dialog box to add steps (just click the Add button), remove a step (click the Remove button), or change the order of the steps (use the up and down arrow buttons). You can also set the properties of each step. At the least, you’ll want to change the Titleproperty to provide a meaningful title for each step.
Figure 4-5: The WizardStep Collection Editor dialog box. Figure 4-4: Working with a Wizard control in Visual Studio.
Utilizing the Wizard Control
156
You may also want to change the StepTypeproperty. There are five different types of steps:
✦ Auto:This is the default step type. ASP.NET determines the role of the step based on its position within the <WizardSteps>element.
✦ Start:The first step in the wizard. It features a Next button that the user can click to move to the next step.
✦ Step:Any step other than a Start, Finish, or Complete step. This type of step displays both a Previous and a Next button so the user can move to the previous or next step.
✦ Final:The last data collection step. It features a Previous and a Finish button.
✦ Complete:This is the last step of the wizard. It is often used as a confir- mation step to indicate that the data collected by the other steps has been processed.
In most cases, you can omit the StepTypeproperty and let ASP.NET figure out the role of each step based on its position within the WizardSteps
element.
One other property you might want to change is AllowReturn. If you set this property to False, the user will not be allowed to return to the step once the step has been completed.
Using Wizard events
When the user clicks the various buttons that appear in a wizard, the
Wizardcontrol raises the following events: Event Description
ActiveStepChanged Raised whenever the active step changes. FinishButtonClick Raised when the user clicks the Finish button. CancelButtonClick Raised when the user clicks the Cancel button. NextButtonClick Raised when the user clicks the Next button. PreviousButtonClick Raised when the user clicks the Previous button. SideBarButtonClick Raised when the user clicks one of the buttons in the
navigation sidebar.
With several of these buttons, your code needs to determine which wizard step is active. You can find that out via the ActiveStepIndexproperty of the Wizardcontrol itself. Here’s an example:
if (Wizard1.ActiveStepIndex == 2) // Step 3 is active
Book II Chapter 4 Using Advanced W eb Ser ver Controls
Utilizing the Wizard Control
157
Looking at the code for a Wizard control
Now that you’ve seen the basics of working with the Wizardcontrol, Listing 4-2 presents the complete markup for the page shown in Figure 4-3. Note that this is the C# version of the markup; the VB.NET version will vary slightly due to the settings in the Pagedirective and the way events are handled. (The VB.NET version is available for download at the Web site for this book.) The following list describes the key lines of this listing:
✦ →1:The Wizardelement provides the initial step (“0”), the header text, the height and width of the Wizardcontrol, and an event handler for the
OnActiveStepChangedbutton.
For VB.NET, you should omit the OnActiveStepChangedattribute.
✦ →2:The WizardStepselement is a container for the individual wizard steps.
✦ →3:The first wizard step gets the pizza size.
✦ →4:The second wizard step gets the toppings.
✦ →5:The third wizard step gets the user’s name.
✦ →6:The fourth wizard step provides a label that’s used to display a summary of the user’s order. The handler for the ActiveStepChanged
event sets the Textproperty of this label when this step is displayed.
Listing 4-2: The Wizard.aspx file (C#)
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Wizard.aspx.cs” Inherits=”Wizard” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title>Pizza Wizardry</title> </head> <body>
<form id=”form1” runat=”server”> <div>
<asp:Wizard ID=”Wizard1” runat=”server” →1 ActiveStepIndex=”0”
HeaderText=”Pizza Order Wizard” Height=”131px” Width=”338px”
OnActiveStepChanged=”Wizard1_ActiveStepChanged”>
<WizardSteps> →2 <asp:WizardStep runat=”server” Title=”Size”> →3
What size pizza do you want?<br /> <br />
<asp:RadioButton ID=”rdoSmall” runat=”server”
GroupName=”Size” Text=”Small” />
Utilizing the Wizard Control
158
Listing 4-2 (continued) <br /> <asp:RadioButton ID=”rdoMedium” runat=”server” GroupName=”Size” Text=”Medium” Checked=”True” /> <br /> <asp:RadioButton ID=”rdoLarge” runat=”server” GroupName=”Size” Text=”Large” /> <br /> </asp:WizardStep> <asp:WizardStep runat=”server” →4 Title=”Toppings”>What toppings do you want?<br /> <br />
<asp:CheckBox ID=”chkPepperoni” runat=”server”
Text=”Pepperoni” /> <br />
<asp:CheckBox ID=”chkSausage” runat=”server” Text=”Sausage” /> <br /> <asp:CheckBox ID=”chkMushrooms” runat=”server” Text=”Mushrooms” /> <br />
<asp:CheckBox ID=”chkOlives” runat=”server” Text=”Olives” />
</asp:WizardStep>
<asp:WizardStep runat=”server” Title=”Name”> →5 Please enter your name:<br />
<br />
<asp:TextBox ID=”txtName” runat=”server” /> </asp:WizardStep>
<asp:WizardStep runat=”server” →6 Title=”Finish”>
<br />
<asp:Label ID=”lblOrder” runat=”server” /> <br /> </asp:WizardStep> </WizardSteps> </asp:Wizard> </div> </form> </body> </html>
The C# code-behind file, shown in Listing 4-3, responds to the ActiveStep Changedevent. It has a single method that checks the ActiveStepIndex
property of the Wizardcontrol. If this value is 3(indicating that the final step has been reached), the Textproperty of the lblOrderlabel is set to display a summary of the order.
Listing 4-3: The Wizard.aspx.cs file (C#)
using System; using System.Data;
Book II Chapter 4 Using Advanced W eb Ser ver Controls
Utilizing the Wizard Control
159
using System.Configuration; using System.Collections;