Previous Page
Next Page

The Web Parts Architecture

The Web Parts architecture serves multiple purposes. Given that the job of Web Parts is to behave as a bigger UI lever, the functional components have been broken into overall page management and zone management. WebPart controls need to be coordinated together. In addition, the different functional areas of a page often need to be handled as a group of controls (for managing layout, for example).

In terms of framework classes, Web Parts are nested within zones, which are managed by a singular WebPartManager that talks to the application data store. Figure 7-1 illustrates how the parts are related.

Figure 7-1 How Web Parts are managed within zones, which in turn are managed by an instance of WebPartManager.
Figure 7-1 How Web Parts are managed within zones, which in turn are managed by an instance of WebPartManager.
WebPartManager and WebZones

As Figure 7-1 illustrates, WebPartManager manages each WebZone, which in turn manages each individual WebPart. Any page using at least one WebPart needs an instance of WebPartManager. The WebPartManager is responsible for managing and coordinating the zone(s) and the controls lying within them. The WebZone also manages any extra UI elements that go with the group of controls.

Within the zone, the ZoneTemplate contains all Web Parts. If a regular ASP.NET control is in a ZoneTemplate, ASP.NET will wrap it as a Web Part.

Built-in Zones

Web Parts zones manage the layout for a group of controls. Out of the box, ASP.NET includes four built-in zones. These are:

Built-in Web Parts

In addition to including several zones straight out of the box, ASP.NET provides some ready-to-use WebPart controls as well. The WebPart controls fit into various functional categories. Some are for managing catalogs, while others are for managing editing. Each specific kind of WebPart fits within a particular zone. Here's a rundown of the currently available WebPart toolbox.

To get a feel as to how to use WebPart controls let's run an example. The following exercise shows how to build a Web page from WebPart controls.

Using Web Parts
  1. Create a new site. Name it UseWebParts.

  2. In the default page, add a WebPartManager.

  3. Drag a WebPartZone onto the page. Set the ID to WebPartZoneLinks. Set the HeaderText to Links. Set the HeaderStyle font Fore color to a blue (so you can see it better later during editing mode). Set the AutoFormat to a nice style such as Professional.

  4. Add some HyperLinks to the WebPartZone, as shown here:

  5. Run the page. You should see the links appear on the left side of the page.

  6. Add a DropDownList to the page. Name it DropDownListDisplayModes. This will be used to switch the display mode back and forth.


    ASP.NET 2.0 Web Parts support five separate display modes. They are:

    • BrowseDisplayMode

      This is normal mode. No personalization or editing is available here.

    • DesignDisplayMode

      This mode turns on drag-and-drop layout personalization.

    • EditDisplayMode

      This option turns on personalization or customization of WebPart properties and permits a user to delete Web Parts that have been added to the page dynamically.

    • ConnectDisplayMode

      This mode allows a user to connect Web Parts at runtime.

    • CatalogDisplayMode

      This mode allows a user to add Web Parts into a WebPartZone at runtime.

  7. Update the _Default class to support switching modes. Add a WebPartManager member named _wpManager to the class to hold an instance of the current WebPartManager. Update the Page_Init method to attach an event handler to the page's InitComplete event. In the InitializationComplete handler, get the current WebPartManager and stash the reference in the _wpManager member, as shown in this listing:

    public partial class _Default : System.Web.UI.Page
        WebPartManager _wpManager;
        protected void Page_Load(object sender, EventArgs e)
        void Page_Init(object sender, EventArgs e)
            Page.InitComplete += new EventHandler(InitializationComplete);
        public void InitializationComplete(object sender, System.EventArgs e)
            _wpManager = WebPartMan ager.GetCurrentWebPartManager( Page);
            String browseModeName = WebPartMa nager.BrowseDisplayMode.Name;
            foreach  (WebPartDisplayMode mode in
                String modeName = mode.Name;
                // Make sure a mode is enabled before add ing it.
                if (mode.IsEnabled(_wpManager))
                    ListItem item = new ListItem(modeName, modeName);
                    DisplayModeDro pdown.Items.Add( item);

    The code listed in the above handler interrogates the current WebPartManager for the supported display modes and puts them in the DropDownList.

  8. Add a handler for the DropDownListDisplayModes drop-down list box when the SelectedIndexChanged event occurs. Have the handler switch the WebPart page into the selected mode. The following code shows how.

        protected void
                    object sender, EventArgs e)
            String selectedMode = DropDownListDispla yModes.SelectedValue;
            WebPartDisplayMode mode =
             _wpManager.SupportedDisplayModes[ selectedMode];
            if (mode != null)
                _wpManager.DisplayMode = mode;
  9. Finally, override the Page_PreRender method to display the selected display mode in the drop-down list box.

        void Page_PreRender(object sender, EventArgs e)
            ListItemCollection items = this.DropDownListDisplayModes.Items;
            int selectedIndex =
              items.IndexOf( items.FindByText(_wpManager.DisplayMode.Name));
            DropDownListDisplayModes.SelectedIndex = selectedIndex;
  10. Run the site. Immediately (without doing anything else), you may enter Design mode, as shown in the following graphic:


    You'll see more modes later as you add more zones. Notice how the title now shows up. You may pick up items on the page and move them around now. For example, you may pick up one of the links and move it into the Links WebPartZone.

  11. Now add some more functionality. Add an EditorZone to the page. Then in the EditorZone, add an AppearanceEditorPart, as shown in the following graphic:

  12. Now run the site. You'll see a new option in the Display Mode drop-down list box: the Edit mode.

  13. Now go back and add a CatalogZone. Drop a DeclarativeCatalogPart into the new WebPartZone and select Edit Template.

  14. While in Template Editing mode, pick up a TextBox control from the toolbox and drop it into the DeclarativeCatalogPart. Then update the actual source code to add a Title attribute, as shown:

          ID="DeclarativeCatalogPart1" runat="server">
            <asp:TextBox ID="TextBox1"
              Title="A TextBox"
  15. Now run the page again. Switch to Catalog Mode. Mark the A TextBox check box and add a TextBox to the Links zone. (This may not seem too interesting yet. However, in the next exercise, you'll write a hyperlink Web Part that you may add to the links page from the catalog—and then update it with your own links and display names).

  16. Run the page and get into Edit mode. Select a local menu from one of the Web Parts. Select Edit. You should see a collection of controls for editing the Web Part appearing in the Editor Zone, like so:


Previous Page
Next Page