25. Using Standard ASP.NET Controls

ASP.NET: A Brief Introduction

Today’s sites bear little resemblance to the sites that appeared when the Web first began. After all, the concept of regular people like you and me actually owning a computer never occurred to the scientists who were devising what J. C. K. Licklider of MIT referred to as the “Galactic Network.” Instead, they used the new Internet as a means to share research between scientific and educational institutions. The sole emphasis was on connecting computers.

Nowadays, we don’t give a second thought to the connectivity of computers. Just about everyone in the modern world has Internet access, and many of those people have high-speed connections. The Internet revolution is among us, and the ubiquitous connectivity we now enjoy has transformed the Internet into something entirely different from the original intent.

We now expect every company and every organization to have a site. We want to pay our bills online. We want to be able to change our cable or satellite service online. We want to get details on our cell phone service online. It has become obvious that static pages no longer fill the bill.

To meet all these expectations, companies must implement some means of accessing their back-end data systems via the Internet. Many technologies are available today for doing just that, and Microsoft’s latest offering in that arena is ASP.NET.

If you haven’t used ASP.NET yet, you’re in for a real treat! The folks on the ASP.NET product team have put a lot of work into making it approachable for developers of all levels. They’ve also packed it with great features that web developers have been screaming for. Expression Web fully supports the rendering of ASP.NET controls, and it also supports configuring properties of controls, including IntelliSense for ASP.NET controls in Code View.

Creating ASP.NET Pages

It should be obvious that before you can use ASP.NET controls, you need to create an ASP.NET page. ASP.NET pages are called Web Forms, and they have an .aspx file extension. When you create an ASP.NET Web Form, you also choose a language for the page. Expression Web provides the choices of C# (pronounced C-sharp), and Visual Basic (VB).

To create a new ASP.NET Web Form in Expression Web, do the following:

1. Click File, New, Page.

2. In the New dialog, select ASPX from the list of file types as shown in Figure 25.1.

Figure 25.1. Create a new ASP.NET Web Form using the New dialog.

3. Select your language in the Programming Language drop-down.

4. Click OK.

After your ASP.NET Web Form has been created, you’ll see an empty form, as shown in Figure 25.2. Any ASP.NET controls you add to your page will be inserted into this form.

Figure 25.2. When an ASP.NET Web Form is created, it automatically has a form within it into which all ASP.NET controls will be inserted.

You’re now ready to start adding some ASP.NET controls to your page, so let’s have a look at the Standard ASP.NET controls available.

The Basics of ASP.NET Controls

All ASP.NET controls are available via the Toolbox in Expression Web. The Toolbox is divided into two sections, as shown in Figure 25.3: HTML and ASP.NET Controls.

Figure 25.3. The Toolbox in Expression Web makes it easy to add ASP.NET controls to your page.

The ASP.NET Controls section of the Toolbox has several subsections. We’ll cover the Standard controls in this chapter and other controls in subsequent chapters. Following is a brief description of the sets of controls in the ASP.NET section of the Toolbox:

• Standard—Standard ASP.NET controls such as radio buttons, text boxes, drop-downs, and so on

• Data—Controls that are designed to retrieve and display data on an ASP.NET Web Form

• Validation—Controls that allow you to configure form field validation on your ASP.NET Web Forms

• Navigation—Controls that are specifically designed for navigating in a site

• Login—Controls that allow you to easily create a membership system for an ASP.NET site

• WebParts—Controls that allow for the insertion and manipulation of ASP.NET Web Parts

• AJAX—Controls that use Microsoft’s ASP.NET Ajax

For more information on ASP.NET Data controls, see Chapter 34, “Displaying and Editing Database Data with ASP.NET.”

For more information on ASP.NET Validation controls, see Chapter 29, “Form Validation Using ASP.NET.”

For more information on ASP.NET Navigation controls, see Chapter 26, “Using ASP.NET Navigation Controls.”

For more information on ASP.NET Login controls, see Chapter 28, “Developing a Login System Using ASP.NET.”

For more information on ASP.NET Web Parts, see Chapter 30, “Using ASP.NET Web Parts.”

For more information on ASP.NET Ajax Extensions, see Chapter 31, “Using ASP.NET Ajax.”

Many of the Standard ASP.NET controls are similar to their HTML counterparts. For example, the ASP.NET TextBox control is functionally the same as the HTML text input control, and the ASP.NET DropDownList control is functionally the same as the HTML Drop-Down Box control. Other ASP.NET controls (such as the Calendar control) have no HTML control counterpart.

When you insert ASP.NET controls into a page, Expression Web generates the ASP.NET code necessary for ASP.NET to render the controls. For example, when you insert a TextBox control onto an ASP.NET Web Form, the following code is added in Code View:

<asp:TextBox runat="server" id="textbox1"></asp:TextBox>

This is obviously not normal HTML code, and a web browser won’t understand this code. Therefore, when this page is browsed, the ASP.NET runtime environment renders the code as an HTML <input> tag, similar to the following:

<input name="textbox1" type="text" id="textbox1" />

A TextBox control is a simple example of how ASP.NET renders controls. Not all controls are this simple. For example, an ASP.NET Calendar control looks simple within Code View in Expression Web:

<asp:Calendar runat="server" id="calendar1"></asp:Calendar>

But when the page is browsed, ASP.NET builds some pretty complex HTML to render the Calendar control correctly in the web browser. As a matter of fact, so much code gets rendered by ASP.NET for a control like the Calendar that it would take more than a page of this book to show it all to you. By using ASP.NET to implement a calendar on your page, you can avoid having to write a large amount of code yourself.

Understanding Control Properties

ASP.NET controls use control properties to affect their behavior and appearance. Control properties can be specified either by selecting the control and using the Tag Properties pane to manipulate the properties or by changing the properties directly in Code View.

For more information on using the Tag Properties pane, see Chapter 7, “Editing Tag Properties.”

For more information on using Code View in Expression Web, see Chapter 4, “Using Page Views.”

Let’s add an ASP.NET control to a page and set some properties on that control:

1. Launch Expression Web and create a new disk-based site.

2. Click File, New, Page and select ASPX from the list of file types to create a new ASP.NET Web Form. Click OK.

3. Save the page as default.aspx.

4. Scroll down to the Label control in the Standard ASP.NET controls section of the Toolbox.

5. Double-click the Label control in the Toolbox to add it to the Web Form. Your page should now look like Figure 25.4.

Figure 25.4. The ASP.NET Label control should be inside the form.

6. Save and browse the page to ensure that the Label control displays correctly. You should see the word “Label” displayed in the browser.

For more information on creating sites in Expression Web, see Chapter 2, “Creating, Opening, and Importing Sites.”

For more information on the Microsoft Expression Development Server, see Chapter 33, “Using the Microsoft Expression Development Server.”

Now you have a Label control that displays the word “Label” on the page. The next step is to manipulate the properties of the control to make it useful.

1. Select the Label control on the Web Form.

2. In the Tag Properties pane, change the Text property of the Label control to An ASP.NET Label, as shown in Figure 25.5.

Figure 25.5. The Tag Properties pane provides easy access to an ASP.NET control’s properties.

Your label should look like Figure 25.6. When you browse this page in a browser, it will now display the text “An ASP.NET Label.”

Figure 25.6. The ASP.NET Label control now has a more useful presentation thanks to a change in the Text property.

Now let’s have a look under the covers and see exactly what happened in the code for default.aspx when we changed the Text property. Switch over to Code View and you’ll see that the <asp:Label> tag has a new Text attribute with a value of An ASP.NET Label, as shown in Figure 25.7.

Figure 25.7. The Label control’s tag in Code View now has a Text property set to An ASP.NET Label.

Specifying property values inside the control’s tag in this manner is referred to as declarative syntax. As it turns out, ASP.NET allows you to do some powerful things using declarative syntax, as you’ll see later when we get into accessing data with ASP.NET.

Now that you have a general idea of how to set properties for ASP.NET controls, let’s dig deeper into the Standard ASP.NET controls.

An Overview of the Standard ASP.NET Controls

Table 25.1 lists all the Standard ASP.NET controls in the Toolbox.

Table 25.1. The ASP.NET Standard Controls

For more information on ASP.NET Master Pages, see Chapter 27, “Using ASP.NET Master Pages and User Controls.”

For more information on XML data, see Chapter 34, “Displaying and Editing Database Data with ASP.NET.”

We won’t go into detail on these basic controls, but the sections that follow cover the more complex ones. In these sections, we discuss enough of the general details to give you a good base knowledge to use any of the ASP.NET controls available in Expression Web.

The AdRotator Control

Banner advertisements aren’t just for the big-name sites. The entrepreneurial nature of the Internet has made them popular with the little guys as well. Many e-commerce sites on the Internet offer affiliate programs that pay you a commission on referred sales. To effectively take advantage of such programs, you need to implement some sort of advertising on your site, and banner ads have consistently proven to be an effective choice.

The AdRotator control uses an XML file called an advertisement file to feed it information to display banners and links. This XML file must be in the format shown in Listing 25.1.

Listing 25.1. XML Coding for AdRotator Control

 1  <?xml version="1.0" encoding="utf-8" ?>
 2  <Advertisements>
 3    <Ad>
 4      <ImageUrl>http://www.site.com/banners/banner2.jpg</ImageUrl>
 5      <NavigateUrl>http://affiliates.site.com?aff=jimco</NavigateUrl>
 6      <AlternateText>Get a really cool product by clicking here.</AlternateText>
 7      <Height>60</Height>
 8      <Width>468</Height>
 9      <Keyword>Technical</Keyword>
10      <Impressions>1000</Impressions>
11    </Ad>
12  </Advertisements>

The file can have any number of <Ad> blocks. Table 25.2 lists the XML elements in the advertisement file and their use.

Table 25.2. XML Elements in an Advertisement File

The Impressions element uses an arbitrary value that has meaning only in relation to the values specified for other ads. In other words, if one ad has an Impressions value of 500 and a second ad has an Impressions value of 1000, the second ad is twice as likely to appear.

The Keyword element is a powerful element and one that you will probably find many uses for. Suppose you have an AdRotator control on two different pages. One of those pages features computer articles and the other features articles on finance. By specifying a keyword of Computers for ads of interest to readers of your computer articles and a keyword of Finance for ads of interest to readers of your finance articles, you can ensure that the most relevant ads are displayed to your users.

Creating a Simple AdRotator Page

Let’s create a simple Web Form that displays rotating banner ads using the AdRotator control. You’ll need a few graphic files with the same dimensions to create the page. If you don’t have any handy, you can find an assortment of banners on the website that accompanies this book.

Begin by creating a new ASP.NET Web Form in a new site. Save the Web Form as adrotator.aspx. Now we’re ready to set up the rotating banners. Do the following:

1. Add a new AdRotator control to the Web Form by either double-clicking on the AdRotator control in the Toolbox or by dragging and dropping an AdRotator control onto the page.

2. You should see the AdRotator Tasks pop-up, as shown in Figure 25.8. Ignore that dialog and save adrotator.aspx.

Figure 25.8. The AdRotator Tasks pop-up enables you to configure a data source. However, we’re not going to use it here.

Next we need to add some images to use in the AdRotator control. Create a new folder in your site called images and either copy the images from the Chapter25Banners directory on the website into that folder or add your own images.

Creating the Advertisement File

The next step is to create an advertisement file to feed to the AdRotator control. Remember that an advertisement file is an XML file in a specific format that tells the AdRotator control how to behave, including what banners to display and where to link for each banner.

1. Create a new XML file by clicking File, New, Page and selecting XML from the General section, as shown in Figure 25.9.

Figure 25.9. A new XML file is needed to contain an advertisement file for your AdRotator control.

2. Add the following XML code to the new XML file:

<Advertisements>
  <Ad>
    <ImageUrl>~/images/ComputerTown.jpg</ImageUrl>
    <NavigateUrl>http://www.jimcosoftware.com</NavigateUrl>
    <Keyword>Computers</Keyword>
    <AlternateText>The best computers in town!</AlternateText>
    <Impressions>100</Impressions>
  </Ad>

  <Ad>
    <ImageUrl>~/images/dsw.jpg</ImageUrl>
    <NavigateUrl>http://www.microsoft.com</NavigateUrl>
    <Keyword>Computers</Keyword>
    <AlternateText>All the software you need.</AlternateText>
    <Impressions>100</Impressions>
  </Ad>

  <Ad>
    <ImageUrl>~/images/Taxman.jpg</ImageUrl>
    <NavigateUrl>http://www.asp.net</NavigateUrl>
    <Keyword>Finance</Keyword>
    <AlternateText>Don't be late for April 15th.</AlternateText>
    <Impressions>100</Impressions>
  </Ad>
</Advertisements>

3. Save the XML file as ads.xml.

4. Switch back to the adrotator.aspx page and click the AdRotator control you added previously to select it.

5. In the Tag Properties pane, click the AdvertisementFile property and click the button, as shown in Figure 25.10.

Figure 25.10. The Tag Properties pane is a convenient way to set the AdvertisementFile property of the AdRotator control.

6. Browse to the ads.xml file that you saved in step 3 and select it.

7. Click Open to set the AdvertisementFile property of the AdRotator control.

Now save the adrotator.aspx page and browse it to see your ads in action. If you refresh the page a few times, you’ll see the ads change.

Notice that even though the AdRotator control appears small in Design View in Expression Web, it resizes itself to match the size of your banner ads. To aid in the layout of your page, you might want to change the Height and Width properties of the AdRotator control to match the banners you are using. You will then easily be able to see how much page real estate is being taken up by the control while you’re designing your page.

In this example, the ad that is chosen is truly random because the Impressions element is the same for all the ads. (Even though we configured a Keyword element for each ad, we haven’t implemented any keyword filtering yet.) You can change the probability that a particular ad will display by changing the value of the Impressions element for that ad.

Open the ads.xml file in Expression Web and change the value of the Impressions element for one of the ads from this:

<Impressions>100</Impressions>

to this:

<Impressions>500</Impressions>

and then save ads.xml and browse the adrotator.aspx page again. Refresh the page a few times, and you’ll notice that the ad you changed shows up much more often than the other ads.

As noted previously, you can use the Keyword element in your advertisement file to ensure that ads that aren’t relevant to readers of a particular page in your site are not displayed. When we created the ads.xml file earlier, we added a Keyword element for each of our ads. We’ll now use the KeywordFilter property of the AdRotator control to restrict the ads that are displayed based on the specified keyword.

1. Change the Impressions element that you modified earlier back to the original value of 100.

2. Save the ads.xml file.

3. Open the adrotator.aspx Web Form in Expression Web.

4. Click the AdRotator control to make it active.

5. In the Tag Properties pane, change the KeywordFilter property to Computers, as shown in Figure 25.11.

Figure 25.11. The KeywordFilter property enables you to ensure that only relevant ads are displayed.

6. Save the adrotator.aspx page.

Now browse the adrotator.aspx page and refresh it several times. Notice that only the ads with a keyword of Computers are displayed. The finance ad will not be displayed on this page.

The Calendar Control

The ASP.NET Calendar control serves two purposes: It displays a date in a familiar format and accepts user input of a date. The Calendar control can also be formatted using one of many autoformatting styles.

Formatting the Calendar Control

When you first insert a Calendar control onto a page, you are presented with the Calendar Tasks pop-up, as shown in Figure 25.12. By clicking the AutoFormat link in the pop-up, you can easily apply a preset style to the Calendar control, as shown in Figure 25.13.

Figure 25.12. The Calendar Tasks pop-up appears automatically when a control is inserted or when you click the arrow button next to the control.

Figure 25.13. Formatting the Calendar control in an attractive style is simple using the AutoFormat feature.

Calendar Control Properties

The Calendar control exposes many properties to control not only its appearance, but also its behavior. Let’s have a look at some of the properties that are available when using the Calendar control.

CaptionAlign

The CaptionAlign property controls the alignment of the text that is specified in the Caption property. Valid values are NotSet, Top, Bottom, Left, and Right. Figure 25.14 shows a Calendar control with a left-aligned caption of Seminar Date.

Figure 25.14. The caption of a Calendar control is a convenient way to display the purpose of your calendar.

DayNameFormat

The DayNameFormat property defines how day names appear on your calendar. This property applies only when the ShowDayHeader property is set to True.

Table 25.3 lists the valid values for this property.

Table 25.3. DayNameFormat Property Values

FirstDayOfWeek

The FirstDayOfWeek property configures which day appears as the leftmost day of the week in the Calendar control. Valid values are Default, Sunday, Monday, and so on. When set to Default, Sunday appears as the first day of the week.

NextMonthText

The NextMonthText property configures the text for the link that moves to the next month when the ShowNextPrevMonth property is True and the NextPrevFormat property is set to CustomText. By default, the value is >, which appears as > in the Calendar control.

The Calendar control, shown previously in Figure 25.12, shows the default value of > for the NextMonthText property as displayed in the Calendar control.

NextPrevFormat

The NextPrevFormat property controls the format of the NextMonthText and PrevMonthText properties. Valid values are CustomText, ShortMonth, and FullMonth. When the value is set to CustomText, the format is dictated by the NextMonthText property.

PrevMonthText

The PrevMonthText property is identical to the NextMonthText property except that it configures the text for the link that moves to the previous month when the ShowNextPrevMonth property is True and the NextPrevFormat property is set to CustomText. The default value is <, which appears as < in the Calendar control.

SelectedDate

The SelectedDate property configures the date that is selected when the Calendar control first loads in the web browser. You can also use this property in server-side ASP.NET code to determine the date that has been selected in the control.

SelectionMode

By default, the Calendar control allows you to select a specific date. However, the SelectionMode property allows you to configure the Calendar control so you can also select an entire week using the DayWeek value, an entire month using the DayWeekMonth value, or nothing at all by using the None value.

SelectMonthText

The SelectMonthText property allows you to configure the link text that is clicked to select the month displayed in the Calendar control. By default, the value is >>, which appears as >>.

This property is applicable only when the SelectionMode property is set to DayWeekMonth.

SelectWeekText

The SelectWeekText property configures the link text that is clicked to select an entire week. By default, the value is >, which appears as >.

This property is applicable only when the SelectionMode property is set to DayWeek or DayWeekMonth.

ShowDayHeader

The ShowDayHeader property is a Boolean property (True or False) that controls whether the day of the week appears as a header in each column of the Calendar control. The default value is True.

ShowGridLines

The ShowGridLines property is a Boolean property (True or False) that controls whether the Calendar control displays gridlines with each date in its own cell. The default value is False.

ShowNextPrevMonth

The ShowNextPrevMonth property is a Boolean property (True or False) that controls whether the Calendar control displays links that allow for navigation between the currently displayed month and the previous/next month. The default value is True.

ShowTitle

The ShowTitle property is a Boolean property (True or False) that controls whether the month is displayed on the Calendar control. The default value is True.

TitleFormat

The TitleFormat property controls the appearance of the calendar’s title when the ShowTitle property is set to True. The TitleFormat property can be set to either MonthYear or Month. In Figure 25.14, the value of this property is MonthYear.

UseAccessibleHeader

The UseAccessibleHeader property causes ASP.NET to render the Calendar control with Title attributes on the HTML tags for accessibility purposes. The Title attribute shows up as a tooltip when the HTML element is hovered over. It is also read by screen readers.

VisibleDate

The VisibleDate property controls what month is displayed when the Calendar control is loaded. Figure 25.15 shows the calendar that Expression Web provides to aid in setting this property. Note that only the month of the date you select is applicable.

Figure 25.15. Expression Web provides a nice calendar from which you can select dates for applicable properties of the Calendar control.

The Wizard Control

Collecting data is a popular task for a web developer. The traditional approach to accomplishing this task is to build large forms that are often cumbersome. When a large amount of data needs to be collected, web developers often use forms that span multiple pages.

E-commerce sites are famous for this kind of approach, usually during the checkout process of a web transaction.

A wizard is a much better approach because it provides an interface that’s similar to a regular Windows application, and it presents the user with a linear approach to collecting data.

The ASP.NET Wizard control takes care of all the plumbing so that if a user has to click the Previous button in the wizard to correct a previous entry, none of the data the user has entered into the wizard is lost. The Wizard control is an incredibly powerful control that can be utilized easily without writing any code at all (see Figure 25.16).

Figure 25.16. The Wizard control is a powerful way to present or collect data in a step-by-step interface, and no code is required.

Wizard Steps

A Wizard control is made up of individual wizard steps, and each step is a particular type of step depending on its position within the wizard. Table 25.4 lists the types of steps in the Wizard control.

Table 25.4. Wizard Control Step Types

Creating a Simple Wizard

To gain a full understanding of how the Wizard control works, let’s create a simple wizard using the control and test some of the options available.

We’ll create a simple wizard that does the following:

• Displays a simple welcome message in step 1

• Collects the user’s name and email address in step 2

• Collects the user’s street address in step 3

• Displays check boxes for different mailing lists in step 4

• Displays a Finish message in step 5

Start by creating a new disk-based site and a new ASP.NET Web Form. Save the Web Form as wizard.aspx. After you’ve done that, you’re ready to add the Wizard control and begin customizing it:

1. Double-click the Wizard control in the Toolbox to add a new wizard to the page.

2. If the Wizard Tasks pop-up isn’t visible, click the arrow button at the upper right of the Wizard control to display it.

3. Click the AutoFormat link in the Wizard Tasks pop-up.

4. Select Professional from the list of schemes, and click OK.

Your page should now look like Figure 25.17. (I’ve resized the control to make it easier to work with.)

Figure 25.17. You can give your Wizard control a more professional look by applying one of the preset schemes.

Note that two steps are created for you automatically. In this case, we need five steps, so we need to create three additional steps:

1. If the Wizard Tasks pop-up isn’t visible, click the arrow button at the upper right of the Wizard control to display it.

2. Click the Add/Remove WizardSteps link to display the WizardStep Collection Editor.

3. Click the Add button three times to add three steps. The WizardStep Collection Editor should now look like Figure 25.18.

Figure 25.18. The WizardStep Collection Editor makes adding, editing, and removing WizardSteps fast and easy.

4. Select Step 1 in the list of steps and change the Title property to Welcome, as shown in Figure 25.19.

Figure 25.19. Editing the Title property for each step makes your wizard easier to use.

5. Select the second step in the list of steps and change the Title property to Name/E-mail.

6. Select the third step in the list of steps and change the Title property to Address.

7. Select the fourth step in the list of steps and change the Title property to Lists.

8. Select the final step in the list and change the Title property to Finish.

9. Click OK.

By default, the Wizard control is too small to contain the controls that we need to add for our wizard, so you need to adjust the size. Using the Tag Properties pane, set the Width property of the Wizard control to 425px and the Height to 225px. After you make that change, the sidebar at the left side of the Wizard control will be far too wide. To correct that, expand the SideBarStyle section of the Tag Properties pane and change the Width property to 120px, as shown in Figure 25.20.

Figure 25.20. The sidebar of the Wizard control must be resized so that it doesn’t take up so much room. You can adjust it using the SideBarStyle in the Tag Properties pane.

Your wizard should now look like Figure 25.21. Notice that the Title property that you set in the WizardStep Collection Editor is displayed in the sidebar so that the user can clearly identify the current step when navigating through the Wizard control.

Figure 25.21. The title of each step is clearly displayed in the sidebar of the Wizard control.

Now we’re ready to add the necessary controls to the Wizard control so that we can collect the information we need. Expression Web makes that easy by allowing you to navigate to each step in the Wizard control in the designer, just as you would in your web browser.

Step 1: Welcome

Click Welcome in the sidebar to switch to the first step. You need to add a brief welcome message here. Click in the clear area at the right of the sidebar and enter the following text:

Welcome. Please complete the following information.
Click Next to continue.

Step 2: Name/Email

Click Name/E-mail in the sidebar to switch to the second step. We’ll add a couple of TextBox controls here to collect the user’s name and email address. Do the following:

1. Click inside the clear area at the right of the sidebar and add the text Enter your name:.

2. Make sure the insertion point is located at the right of the text you entered in step 1. Double-click the TextBox control in the Toolbox to add a new text box.

3. Click at the right of the text box so it’s not selected, and then press Enter twice.

4. Enter the text Enter your e-mail:.

5. Make sure the insertion point is located at the right of the text you just entered. Double-click the TextBox control in the Toolbox to add a new text box.

Your Wizard control should now look like Figure 25.22.

Figure 25.22. Step 2 of the Wizard control is now ready to accept a name and an email address.

Step 3: Address

We’re now ready to move onto step 3 and create the interface for collecting the street address. Click Address in the sidebar to move to step 3 of the wizard:

1. Click inside the clear area at the right of the sidebar and add the text Enter your address:.

2. Press Enter to insert a new line.

3. Double-click the TextBox control in the Toolbox to add a new text box.

4. Drag the right side of the TextBox control to make it wide enough to accommodate a street address (approximately 260px).

5. Click at the right of the text box so that it’s not selected, and press Enter twice.

6. Enter the text City: and then press Enter.

7. Double-click the TextBox control in the Toolbox to add a new text box.

8. Click at the right of the text box so that it’s not selected, and press Enter twice.

9. Enter the text State: and then press Enter.

10. Double-click the TextBox control in the Toolbox to add a new text box.

11. Drag the right side of the TextBox control and make it approximately 40px in width.

12. Click at the right of the text box so that it’s not selected, and press Enter twice.

13. Enter the text ZIP: and then press Enter.

14. Double-click the TextBox control in the Toolbox to add a new text box.

Your Wizard control should now look like Figure 25.23.

Figure 25.23. Step 3 of the Wizard control contains many form fields used to collect the user’s address.

Step 4: Lists

In step 4 of our wizard, we use check boxes to allow users to sign up for various mailing lists. A check in a box means that the user wants to subscribe to that particular list. Click Lists in the sidebar to move to step 4 of the wizard.

1. Click inside the clear area at the right of the sidebar and enter the text Sign up for the following mailing lists:.

2. Press Enter twice to insert two new lines.

3. Double-click the CheckBox control in the Toolbox to insert a new check box.

4. With the CheckBox control still selected, change the Text property in the Tag Properties pane to New Products.

5. Click at the right of the check box to ensure that it’s not selected, and press Enter.

6. Double-click the CheckBox control in the Toolbox to insert a new check box.

7. With the CheckBox control still selected, change the Text property in the Tag Properties pane to Expression Web Tips.

8. Click at the right of the check box to ensure that it’s not selected, and press Enter.

9. Double-click the CheckBox control in the Toolbox to insert a new check box.

10. With the CheckBox control still selected, change the Text property in the Tag Properties pane to Monthly Newsletter.

Your Wizard control should now look like Figure 25.24.

Figure 25.24. Step 4 of the wizard makes mailing list selection easy with a series of check boxes.

Step 5: Finish

The final step should simply display a message thanking the user for subscribing. Click Finish in the sidebar to move to step 4 of the wizard. Only the task in the Note to the right is left to complete the wizard:

You’re now ready to preview your wizard, but first switch back to the Welcome step by clicking Welcome in the sidebar. You need to do this because the wizard will always start on the step that is selected in the designer, even if that step is not the first one. After you’ve selected the Welcome step, save and browse the wizard.aspx page to test your Wizard control. As you fill out the information in the Wizard control, try clicking the Previous button. You’ll see that the Wizard control always maintains the information that you’ve entered so you never have to worry about reentering information if you need to go back to a previous step.

Making ASP.NET Work for You

You’ve experienced just a tiny taste of the capabilities of ASP.NET in this chapter. There are some powerful and easy-to-configure controls in the standard Toolbox, but ASP.NET offers much more, some of which we will cover in the next few chapters.

Even after reading all the material in this book, you still need to experiment and try your hand at some real applications to grow your knowledge. The best way to learn a complex technology such as ASP.NET is to use it for one of your sites. Hopefully you’ll find that the knowledge base we’ve given you here will serve you well as you go out on your own.

Formatting with Styles

Expression Web enables you to apply direct formatting to ASP.NET controls like the Wizard control. However, you’re going to be much better off in the long run if you use CSS to format your controls.

The Wizard control has many properties that allow you to take advantage of CSS styles:

• NavigationButtonStyle—Controls the formatting of the navigation buttons (Next, Previous, Finish, and so on).

• SideBarButtonStyle—Controls the formatting of the sidebar buttons. In the sample wizard you created, the sidebar buttons are the links that appear in the sidebar.

• SideBarStyle—Controls the formatting of the sidebar.

• StepStyle—Controls the formatting of the wizard’s steps.

Numerous other styles enable you to format your Wizard control exactly the way you want.

For more information on CSS in Expression Web, see Chapter 18, “Managing CSS Styles.”