The term Web Parts can actually mean two different things: Web Parts as a technology and Web Parts as the controls that reside on an ASP.NET Web Page.

Web Parts technology consists of a series of ASP.NET controls that make it easy to develop portal-like Web pages that can be customized and arranged within a browser while viewing a Web page. Web Parts technology also supports ASP.NET personalization, a feature that allows individual users of a site to customize the appearance and layout of a page and to have that customization applied automatically each time they visit the site.

Web Parts controls are the controls that are inserted onto a Web Parts page. They can be either custom controls that you or other developers create or the Web Parts controls that exist within the Expression Web 2 Toolbox.

Web Parts controls are added to a page inside an area called a Web Parts zone. When you design your page, you first add one or more WebPartZone controls to the page, and then you add other controls to the Web Parts zone. Depending on the configuration of the page, users can drag and drop Web Parts between Web Parts zones.

As mentioned previously, you can create your own custom Web Parts for use in your pages. The most common method of creating a custom Web Parts control is to create a special kind of ASP.NET page called a user control.

Let’s create a user control now. We can use it in a Web Parts page later in this chapter.

As mentioned previously, an ASP.NET user control is a special kind of ASP.NET page. You can think of a user control as a sort of “page within a page.”

When you are designing a user control, you work with it just as you work with a regular ASP.NET page. You can add controls to it, use Expression Web 2 behaviors, create layers, and so on. However, the user control cannot be browsed directly. Instead, you must place it onto an ASP.NET page and then browse to the ASP.NET page to use the user control.

As you might have surmised, ASP.NET user controls are extremely useful for creating reusable components that can be inserted onto an ASP.NET Web page. You’ll have the chance to create a couple of user controls as you progress through this chapter. As a matter of fact, let’s go ahead and create a simple user control now.

To create an ASP.NET user control, follow these steps:

After you’ve created your user control, drag a few controls onto it:

Your user control should now look like Figure 33.1. Save the user control as prop.ascx. Later in the chapter, we’ll use this user control to create a Web Parts control.

Figure 33.1. Your finished user control contains three simple ASP.NET controls.

ASP.NET comes with several Web Parts controls that are used to create Web Parts pages. These controls are located in the ASP.NET section of the Expression Web Toolbox.

We don’t have room to go into the details of every Web Parts control in the Toolbox, but we will discuss the following controls as we progress through this chapter:

You’ve now got enough information regarding Web Parts controls to create a Web Parts page. We’ll start simple and then build on the page as we progress through the rest of the chapter.

Your page should look like Figure 33.3. You can’t tell from the black-and-white image in Figure 33.3, but the controls you dropped in each WebPartZone control take on the formatting of that zone.

Figure 33.3. This Web Parts page contains two Web Part zones. It has limited functionality at this point.

Go ahead and browse the page. Each Web Parts control on the page has a small downward-pointing arrow button in the upper-right corner. If you click that button, a menu is displayed that allows you to either minimize or close the Web Parts control, as shown in Figure 33.4. As we add additional features to this Web Parts page, you’ll see new items appear on this menu.

Figure 33.4. Each Web Parts control contains a menu that allows you to interact with it. You can’t do much at this stage.

Note

If you get an error saying you must add a WebPartManager to enable Web Parts, see “WebPartManager Error When Browsing Web Parts Page” in the “Troubleshooting” section of this chapter.

Note

If you see a “SQLExpress database file auto-creation error” when browsing the Web Parts page, see “Error Connecting to SQL Server” in the “Troubleshooting” section of this chapter.

Note

If you get an error connecting to SQL Server at this point, see “Error Connecting to SQL Server” in the “Troubleshooting” section of this chapter.

If you click Minimize on the menu, the Web Parts control collapses so that only the title is displayed and the Minimize menu item changes to Restore. If you click Close on the menu, the Web Parts control is removed from the page.

At this stage, you can’t customize the page or move Web Parts controls around. To do that, we’ll need to change the display mode of the page.

A Web Parts page can be displayed in one of five different display modes:

To change the display mode of a Web Parts page, set the DisplayMode property of the WebPartsManager control. Unlike many of the other properties we’ve set on ASP.NET controls so far in this book, you cannot set the DisplayMode property declaratively in the HTML code for the control. Instead, you must do it using server-side ASP.NET code.

Adding Code to Change the Display Mode

Switch to Code View in the user control and add the following code after the first line of code that starts with <%@ Control. If you are using C#, use the code in Listing 33.1; if you are using VB, use the code in Listing 33.2.

Example 33.1. C# Code for User Control

<script runat="server">
  // create a local WebPartManager
  WebPartManager _mgr;

  void ddlDisplayMode_SelectedIndexChanged(object sender, EventArgs e)
  {
    WebPartDisplayMode mode =
_mgr.SupportedDisplayModes[ddlDisplayMode.SelectedValue];
    _mgr.DisplayMode = mode;
  }

    void Page_Load(object sender, EventArgs e)
    {
        _mgr = WebPartManager.GetCurrentWebPartManager(this.Page);

    }
</script>

Example 33.2. VB Code for User Control

<script runat="server">
  'create a local WebPartManager
  Dim _mgr As WebPartManager

  Sub ddlDisplayMode_SelectedIndexChanged(ByVal sender As object, ByVal e As
EventArgs)
    Dim mode As WebPartDisplayMode =
_mgr.SupportedDisplayModes(ddlDisplayMode.SelectedValue)
    _mgr.DisplayMode = mode
  End Sub

    Sub Page_Load(ByVal sender As object, ByVal e As EventArgs)
        _mgr = WebPartManager.GetCurrentWebPartManager(Me.Page)
  End Sub

</script>

This code is pretty simple. It uses the SupportedDisplayModes method of the WebPartDisplayMode to determine whether the selected mode is supported. It then changes the DisplayMode property of the WebPartManager to the mode you selected.

The final code change in the user control is to hook up the server-side code you just added to the DropDownList control. Locate the code in the user control for the DropDownList control and change it from this:

<asp:DropDownList runat="server" id="ddlDisplayMode" AutoPostBack="True">

to this:

<asp:DropDownList OnSelectedIndexChanged="ddlDisplayMode_SelectedIndexChanged"
runat="server" id="ddlDisplayMode" AutoPostBack="True">

Note

You might have noticed that the server-side code includes code that runs when the page runs, but you are not required to hook up that code so that it runs when the user control is loaded. That’s because ASP.NET handles that automatically for you.

Go ahead and save the user control. The user control is now complete and is ready to be added to the Web Parts page.

1. Open the Web Parts page (default.aspx) and switch to Design View if it’s not already visible.

2. From the Folder List in Expression Web, drag the displaymodeui.ascx user control and drop it right under the WebPartManager control in default.aspx.

3. Save default.aspx.

Tip

By dragging and dropping the user control onto the page, you have added the functionality provided by the user control to the page. In this case, you’ve just added a user interface for switching the display mode of the Web Parts page. To add the same user interface to any other Web Parts page, simply drop the same user control onto the Web Parts page.

Browse default.aspx and you’ll notice that the drop-down from the user control appears above the Web Parts zones, as shown in Figure 33.6.

Figure 33.6. The user control we just added creates a user interface for changing the display mode of the Web Parts page.

If you select Design from the drop-down, you’ll notice that the Web Parts zones become visible and you can drag and drop controls from one Web Parts zone to the other, as shown in Figure 33.7.

Figure 33.7. In Design mode, you can drag and drop controls from one Web Parts zone to another. In this case, I’m dragging the Login control from the zone on the right to the zone on the left.

Note

At this point, if you select anything other than Browse or Design, you will see an error in the browser. We will add additional functionality later in this chapter.

Note

If you see an error that says “Value cannot be null” when browsing the page, see “Null Value Message When Browsing Web Parts Page” in the “Troubleshooting” section of this chapter.

Note

You might not know it, but ASP.NET personalization features are kicking in at this point. If you move a control from one Web Parts zone to another and then close your browser, that move will still be in effect the next time you browse the page.

Because you haven’t actually logged in to this Web site, ASP.NET personalization features are using client cookies to identify you. If you move to another computer and browse the same page, changes you made on the first computer will no longer apply.

The Web Parts page you’ve created to this point contains only two Web Parts controls. To fully utilize the power of Web Parts, let’s add the capability to add new Web Parts controls to the page.

The ability to add Web Parts controls to a page is provided by the CatalogZone and DeclarativeCatalogPart Web Parts controls.

Browse the default.aspx page now to test the new Web Parts Catalog.

Note

If you see an error saying that WebUserControl1 is defined in multiple assemblies, see “Error When Browsing Page with User Controls” in the “Troubleshooting” section of this chapter.

When the page is displayed, select Catalog from the drop-down and you will see the Web Parts Catalog, inside of which is a checkbox labeled Untitled. It would be nice to provide a more descriptive name.

Now browse default.aspx and switch to Catalog mode. The control now shows a descriptive name. Check the check box for the Prop Control control, select a Web Parts zone, and click Add to add the control, as shown in Figure 33.9.

Figure 33.9. You can now add the Prop Control control to a Web Parts zone by switching to Catalog mode.

As you progressed through this chapter, you created a powerful portal-like page that contains robust user interface features, personalization features, and customization features, and you did all of it with only a small amount of code. You also learned how to create user controls so you can build your own Web Parts controls for use in Web Parts pages.

The best way to get comfortable with using Web Parts is to experiment with them. This chapter should have provided a solid foundation for doing just that.

In addition to adding Web Parts controls and moving them between Web Parts zones, you can also add the capability of editing controls. Editing Web Parts controls is accomplished using one or more of the following Web Parts controls:

Let’s add the capability to edit the appearance of Web Parts controls on the page you created in this chapter.

Your page should now look like Figure 33.10.

Figure 33.10. The Web Parts page now contains an EditorZone Web Parts control and an AppearanceEditorPart Web Parts control so you can edit the appearance of the controls on the page.

Browse the page and select Edit from the display mode drop-down. At first glance, choosing Edit seems to have no effect. However, if you click the arrow button at the upper right of any Web Parts control, you’ll notice there is now an Edit menu item.

When you click Edit, the AppearanceEditorPart Web Parts control is displayed, as shown in Figure 33.11. Make a change to one of the Web Parts controls and click OK to apply it.

Figure 33.11. You can now edit the appearance of your Web Parts controls using the Edit display mode.

You’ve now completed the functionality of the Web Parts page. I think you’ll agree that you can create some incredibly powerful functions with minimal effort. I hope the information in this chapter will encourage you to experiment more with Web Parts controls and Web Parts pages.