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 broadband 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 quite 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 3 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.
This book will not teach you how to program in ASP.NET because that is outside the scope of a book on Expression Web 3. If you’d like to learn how to fully utilize the power of ASP.NET as a programmer, read ASP.NET 3.5 Unleashed from Sams Publishing (ISBN 0672330113).
It should be obvious that before you can use ASP.NET controls, you’ll 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 will also choose a language for the page. Expression Web 3 provides the choices of C# (pronounced C-sharp), and Visual Basic (VB).
To create a new ASP.NET Web Form in Expression Web 3, 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.
3. Select your language in the Programming Language drop-down.
4. Click OK.
Expression Web 3 doesn’t provide very good support for writing ASP.NET code. It does have great support for rendering ASP.NET controls, however. What you’ll likely want to do is design your layout and set basic control properties in Expression Web 3, and then use Visual Studio or Visual Web Developer Express Edition to write your C# or VB code.
After your ASP.NET Web Form has been created, you’ll see an empty form, as shown in Figure 28.2. Any ASP.NET controls you add to your page will be inserted into this form.
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.
If you select File, New, ASPX instead of File, New, Page, you won’t have the option of selecting a language. Instead, Expression Web 3 will choose the language that you last used, or C# if it’s the first time you’ve created an ASP.NET page.
All ASP.NET controls are available via the Toolbox in Expression Web 3. The Toolbox is divided into two sections, as shown in Figure 25.3: HTML and ASP.NET Controls.
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 with 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 Extensions.”
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 3 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 will render 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 3:
<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.
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 3, see Chapter 4, “Using Page Views.”
We’ve already covered the Tag Properties pane in Chapter 7, “Editing Tag Properties,” but just in case you skipped that part, I’ll give you a tip here: When a property description appears as bolded blue in the Tag Properties pane, it means the value of that property has been changed from the default value.
Let’s add an ASP.NET control to a page and set some properties on that control:
1. Launch Expression Web 3 and create a new disk-based site.
There is a Label
control in the HTML Form Controls section of the Toolbox. Make sure you don’t add it. Instead, you want to add the Label
control in the Standard ASP.NET Controls section.
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.
You might have found it strange to create a new disk-based site in step 1 even though this is an ASP.NET site. Expression Web 3 uses the Microsoft Expression Development Server to browse ASP.NET pages in a disk-based site. Using this method is the easiest way to design and test ASP.NET sites.
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 3, 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.”
You might have noticed that Expression Web 3 will allow you to place ASP.NET controls only inside the form that is automatically inserted onto the page when it’s created. All ASP.NET controls must be placed within a form that is configured to run on the server. Expression Web 3 prevents you from shooting yourself in the foot by not allowing you to place ASP.NET controls outside a form. It also will re-create the form automatically if you accidentally delete it.
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.
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.
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.
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 very 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.
Table 25.1 lists all the Standard ASP.NET controls in the Toolbox.
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 3.
AdRotator
ControlBanner 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.
The file can have any number of <Ad>
blocks. Table 25.2 lists the XML elements in the advertisement file and their use.
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.
URLs that you enter in the advertisement file must be encoded. Therefore, if your link contains special characters such as an ampersand, you must use the HTML-encoded version of that character. In the case of an ampersand, &
should be entered as &
.
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.
AdRotator
PageLet’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
.
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.
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.
2. Add the following XML code to the new XML file:
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.
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.
Some people think that the AdRotator
control rotates ads at a preset interval while a page is being displayed. That’s not the way it works. What it does is choose a random ad to display when the page is loaded. The chosen ad will not change until the page is reloaded.
Notice that even though the AdRotator
control appears quite small in Design View in Expression Web 3, 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 3 and change the value of the Impressions
element for one of the ads from this:
<Impressions>100</Impressions>
to this:
<Impressions>500</Impressions>
If you track the effectiveness of the ads you use, you can use the Impressions
property to ensure that the most effective ads appear more often.
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 will show 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 3.
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.
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.
Calendar
ControlThe 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.
Some of you who have worked with ASP.NET (and possibly some who haven’t) might be wondering what happens to your ads if the page that’s being displayed is cached. The developers of ASP.NET thought about that, too. They wrote the AdRotator
control so that it explicitly prevents the caching of ads. Even if you cache the page on which the AdRotator
control appears, you are always guaranteed to get fresh ads.
Calendar
ControlWhen 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.
Calendar
Control PropertiesThe 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.
The Calendar
control is most powerful when paired with an ASP.NET code file so that you can access the selected date programmatically.
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
.
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.
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.
In the English language, the Shortest
property displays the same values as the FirstTwoLetters
property. Other languages might not display the same value.
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.
When you are specifying dates for properties of the Calendar
control, the .NET DateTime
data type is used. Fortunately, Expression Web 3 provides a user-friendly calendar control of its own that allows you to easily select the date you want.
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 3 provides to aid in setting this property. Note that only the month of the date you select is applicable.
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 will 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).
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.
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.
In many cases, leaving the StepType
at the default setting of Auto
is sufficient.
We’ll create a simple wizard that does the following:
• Displays a simple welcome message in step 1.
If you’d prefer, you can review the completed files from this chapter in the ExamplesCh25Website
folder on the website that accompanies this book.
• 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.)
Note that two steps are created for you automatically. In this case, we’ll 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.
4. Select Step 1 in the list of steps and change the Title
property to Welcome
, as shown in Figure 25.19.
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’ll need to add for our wizard, so you’ll 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.
Notice that the Add button has a downward-pointing arrow at the right edge of the button. Clicking that arrow will allow you to choose between a WizardStep and a TemplatedWizardStep. We haven’t talked about TemplatedWizardSteps yet, so if you click the arrow on the Add button, select WizardStep from the menu that appears.
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.
Now we’re ready to add the necessary controls to the Wizard
control so that we can collect the information we need. Expression Web 3 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.
Click Welcome in the sidebar to switch to the first step. You will 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.
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.
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.
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.
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 following task is required to complete the wizard:
Click inside the clear area at the right of the sidebar and enter the text Thank you for signing up for our mailing lists!
.
You’re now ready to preview your wizard, but first switch back to the Welcome step by clicking Welcome
in the sidebar. You will 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 will always maintain 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.
The Wizard
control you’ve created here doesn’t actually do anything with the information you’ve collected. In a real-world application, you would likely want to save the information from the wizard in a database.
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 will 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.
Expression Web 3 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 3, see Chapter 18, “Managing CSS Styles.”