LESSON 4: Leveraging ASP.NET 2.0 to make your own website dynamic

Configuring ASP.NET controls    Page 1 of 3

So far in this class, you've learned about building static websites in Microsoft Expression Web. However, today's internet is full of interactive websites. Expression Web's ASP.NET controls let you build fully functioning interactive websites with server-side data processing, and you don't ever have to write a line of code. Several types of ASP.NET controls are available in Expression Web, which you'll learn about throughout this lesson.

To add ASP.NET controls to your web page, just drag and drop the control you want to use from the Toolbox task pane, ASP.NET Controls section, into the Editing window. For example, the Calendar control widget, shown in Figure 4-1, has been dropped into the web page.

Controls are commonly referred to as widgets.

Figure 4-1: The calendar control.

In the upper-right corner of the calendar is a small arrow that opens an on-control action menu, which displays a Common Tasks menu associated with the control. In the case of the Calendar control, this box lets you apply predefined AutoFormat styling to the calendar.

After you add an ASP.NET control to a web page, the Tag Properties task pane (in the lower-left corner of the Expression Web window and shown in Figure 4-2) automatically becomes active. This task pane has a number of configurable items you can use to change the appearance, behavior and functionality of the control.

Figure 4-2: The Tag Properties task pane showing the tags associated with the Calendar control.

You can change the values of these tags by clicking the value field to the right of the tag name. Some tags enable you to type values into the properties field. Others have lists of available values from which you can select. For example, if you wanted to change the border color of the calendar, you would click the values field of the BorderColor property to select a color from the color selector, as shown in Figure 4-3.

Figure 4-3: Adjusting the BorderColor property.

You can add many more and complex ASP.NET controls to your pages to give users a rich and interactive experience with your website.

Touring the Controls toolbox

The Controls toolbox, shown in Figure 4-4, is your one-stop shop for all things ASP.NET. Each of the available ASP.NET control groups can be expanded to reveal icons for each item within the control group.

Figure 4-4: The Toolbox task pane showing the ASP.NET controls.

The following table outlines the ASP.NET controls and the purpose of each.

Table 4-1: ASP.NET controls in Expression Web.

Viewing and changing control properties

As mentioned previously, when you add an ASP.NET control to a page, the Tag Properties task pane becomes active. The Tag Properties task pane shows you all the attributes and values of the control that's currently selected.

You can select a control to view its tags (codes) in several ways:

Figure 4-5: Split view shows the asp:Calendar tag highlighted.

Tag Properties is a powerful task pane because it lets you configure not only the appearance of ASP.NET controls but also their behavior, data sources and functionality.

Using on-control action menus

Another way of configuring ASP.NET controls is through the Common Tasks menu, accessed by clicking the on-control action menu button in the upper-right corner of the control.

The button displays in Design or Split view, not Code view.

Although this menu offered only AutoFormat options for the Calendar control mentioned previously, other controls have significantly more complex functions in these convenient menus. For example, the XMLDataSource control lets you configure the data source and refresh the schema associated with the control.

Figure 4-6 shows an example of the Wizard control's Common Tasks menu, which lets you configure the steps for completing a wizard application.

Figure 4-6: The Wizard control's Common Tasks menu.

The best way to learn how to add and modify ASP.NET controls is to practice. Create a dummy web page (called dummy.htm, so you'll know you can delete it at any time), drag ASP.NET controls to the Editing window and modify the properties.

Saving and testing your web page

Once you add one or more ASP.NET controls to a web page and save the file, you'll notice that Expression Web assigns the page an .aspx file extension. This indicates the existence of ASP.NET on the page.

To see how each control works in real time, select File > Preview in Browser, and then select a web browser and size from the list. Once the web browser opens the .aspx web page, just click a control and see how it performs. To help rule out any web browser incompatibilities, test your control in three or four commonly used browsers.

To add one or more web browsers to the browser list, click Edit Browser List. In the Edit Browser List dialog box, click Add, type a name for the new web browser and then click Browse to locate the executable file for that browser. Select it, and then click OK. You can also check the Automatically save page before previewing checkbox so you don't have to remember to save your files manually. Click OK to save your changes and close the Edit Browser List dialog box.

Next, learn how to bind data to an ASP.NET control.

Understanding no-code data binding Page 2 of 3

One of the key features that sets Expression Web apart from other web design applications is its ability to provide full-featured code binding functionality without the need to write or even understand the underlying code. HTML files can include data from XML files; however, they can't include dynamic database data. In .aspx files and using ASP.NET controls, you can display data from a SQL or Microsoft Access database.

Data source controls connect your .aspx files to the database and control reading and writing information to and from the database. These controls interact with the database and other ASP.NET controls in the web page. The actual user interface is handled by data-bound controls. The following table lists the data-bound controls available to you in Expression Web.

Table 4-2: Data-bound controls in Expression Web.

When you drag one of these controls to the Editing window, the Common Tasks menu displays a Choose Data Source command link or drop-down menu. Just select the appropriate data source, and then configure it to complete the linking process.

The final section in this class covers ASP.NET master pages, which make creating ASP.NET applications fairly simple.

Working with ASP.NET master pages    Page 3 of 3

An ASP.NET master page-based website consists of a single master page and any number of content, or child, pages. You create and style elements that remain static, such as headers, footers and site navigation, as well as placeholders for page-specific content, in the master page. Then, when you create subsequent content pages from the master page, you create the content that appears in the placeholder when the page is rendered.

A content or child page is any page that's based on a master page.

Using master pages to define the overall look of your website means you can make significant changes to your site, even complete site redesigns, and still have to change only one file. The content placeholder of each page in the website that's built from the master page can still be customized independently.

Key to the master page functionality is that it uses ASP.NET server-side processing to merge the master page layout with the page-specific content to render a single, integrated page in the web browser window.

Just like with a template in a word processing or presentation program, when creating master pages, you set up static and editable regions of the page. What differentiates a master page from an ordinary template is that when you apply a master page to a new content page, the static regions defined in the master page don't propagate into the content pages. The content pages contain only the content to be merged into the editable regions of the page.

To start building a website using an ASP.NET master page:

1. Select File > New > Web Site from the main menu.
2. In the New dialog box, select Empty Web Site to create a new empty folder where the master page and all of the content pages you create will be stored. Click OK.
3. Select File > New > Page from the main menu.
4. In the New dialog box, select Master Page.
5. Be sure the Programming Language option in the lower-right corner is set to C#, as shown in Figure 4-7.

Figure 4-7: The New Page dialog box showing the Programming Language option.
 

6. Click OK. You now have a new master page in which you can define static HTML and content placeholders.

By default, new master pages contain a single content placeholder with its ID set to ContentPlaceholder1. This is an ASP.NET control. You can create additional content placeholders by dragging and dropping the ContentPlaceHolder control from the ASP.NET Controls Toolbox task pane into the Design or Code view of the master page.

7. You can build the static HTML regions of the master page using div elements by dragging the div tool from the task pane into the Editing window. Figure 4-8 shows what a simplified master page looks like in Design view.

Figure 4-8: The Design view of a simple master page consisting of a page header, a page footer and one content placeholder.
 

8. Add text and styles to the static regions as you would for any other HTML page.
9. When you're finished building your master page, save it before adding other pages to your website.

Now that you've created a master page, apply it to a content page so you can see what it'll look like in Design view:

1. Select File > New > Page.
2. Select Create from Master Page, and then click OK. The Select a Master Page dialog box appears.
3. Click Browse, navigate to the master page you want to use, select it and then click Open.
4. In the Select a Master Page dialog box, click OK.

Gray areas indicate content that can't be changed in the content pages.

You can use the Common Tasks menu on the placeholder to create custom content. Within the placeholder, you can build the content using HTML elements and ASP.NET controls just like you would in an .aspx file.

Master pages really bring all of the rich functionality of Expression Web together. They let you build truly dynamic websites with a consistent and maintainable style.

Moving on

In this lesson, you learned how to use ASP.NET controls to create web pages for user interactivity and to connect back-end (server-side) databases. Throughout this class, you learned how Expression Web can help you build standards-based, dynamic websites without having to write or even understand code. Once you complete the quiz and assignment for Lesson 4, you're finished with the class.

Leveraging ASP.NET 2.0 to make your own website dynamic assignment

Assignments are designed to help you apply the information learned in the lessons.