oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Building Web Parts, Part 3

by Wei-Meng Lee

In part two of this three-part series, you have seen how to move Web Parts from one zone to another. In this article, I will show you how you can dynamically add Web Parts to your page and how you can restore Web Parts that have been closed.

Let Users Add Web Parts at Runtime

In addition to the Web Parts already visible when the user loads the page, you can provide users with a list of other available Web Parts they can selectively add to the page. For example, on My MSN, you can choose from a list of available content that you can add to your page (see Figure 1).

To let users add Web Parts to the page, you will use the DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart controls, all located in the WebParts tab of the Toolbox. In this article, you will learn how to use the CatalogZone control to list Web Parts available for users to add when they're running your application. You will use the CatalogZone control and the three related CatalogPart controls--DeclarativeCatalogZone, PageCatalogZone, and ImportCatalogZone--so that users can look for and add Web Parts from a variety of sources.

figure 1
Figure 1. Adding additional content on

Here is a quick overview of the controls you will use in this article:

  • CatalogZone: Contains CatalogPart controls (DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart). This control is used to create a catalog of Web Parts controls so that users can select controls to add to a page.
  • DeclarativeCatalogPart: Enables developers to add a catalog of Web Part controls to a Web page so that users can choose whether to add them to a page.
  • PageCatalogPart: Provides a page catalog of Web Part controls that a user has closed on a Web Parts page, and that the user can add back to the page.
  • ImportCatalogPart: Imports Web Parts controls, so that the control can be added to a web page with pre-assigned settings.

For this article, let's continue to use the project we've used in the previous article. (C:\Webparts1).

1. Drag and drop a CatalogZone control from the WebParts tab of the Toolbox onto the form (see Figure 2). The CatalogZone control is the primary control for hosting CatalogPart controls on a web page (more on this in Step 2).

figure 2
Figure 2. Adding the CatalogZone control onto the default form

2. Now you'll add the controls that make it possible for users to pick and choose the parts they use from various lists. Drag and drop a DeclarativeCatalogPart, a PageCatalogPart, and an ImportCatalogPart from the WebParts tab of the Toolbox onto the CatalogZone control. The CatalogZone control should now look like the one shown in Figure 3.

figure 3
Figure 3. The CatalogZone control

The DeclarativeCatalogPart control allows developers to add a catalog of Web Parts to a web page. Users can then select the Web Parts they want to use and add them to Web Part zones on the page. The PageCatalogPart control provides a catalog of Web Parts that a user has closed so that the user can add them back to the page, if desired. The ImportCatalogPart control allows users to import saved Web Parts into the page.

3. The CatalogZone needs a look and feel, so apply the Classic scheme via the "Auto Format…" link in the CatalogZone Tasks menu.

4. In the radio button list control at the bottom of the form, add a new item (shown in bold):

<asp:RadioButtonList ID="rblMode" runat="server" AutoPostBack="True">
    <asp:ListItem>Browse Display Mode</asp:ListItem>
    <asp:ListItem>Design Display Mode</asp:ListItem>
    <asp:ListItem>Catalog Display Mode</asp:ListItem>

5. In the code-behind of the radio button list control, add the following line (in bold) to the SelectedIndexChanged event. This will cause the CatalogZone control to be displayed when the Catalog Display Mode item in the radio button list control is clicked:

Protected Sub rblMode_SelectedIndexChanged( _
              ByVal sender As Object, _
              ByVal e As System.EventArgs) _
              Handles rblMode.SelectedIndexChanged
  Select Case rblMode.SelectedIndex
    Case 0 : WebPartManager1.DisplayMode = _
    Case 1 : WebPartManager1.DisplayMode = _
    Case 2 : WebPartManager1.DisplayMode = _
  End Select
End Sub

6. In the DeclarativeCatalogPart Tasks menu, click on the Edit Templates link (see Figure 4). You will add a Google Search Web Part into the DeclarativeCatalogPart control so that users will have the option to add Google Search Web Parts to their page.

figure 4
Figure 4. Editing the DeclarativeCatalogPart control

7. Drag and drop the Google.ascx file from Solution Explorer onto the DeclarativeCatalogPart control (see Figure 5). This will enable the Google Search Web Part to be available in the DeclarativeCatalogPart control, allowing users to add additional Google Search Web Parts to the page during runtime.

figure 5
Figure 5. Adding the Google Search Web User control to the DeclarativeCatalogPart control

8. Right-click on the Google Search Web User control in the DeclarativeCatalogZone control and then select Properties. Set the title property to Google Search, so that this user-friendly name will be displayed in the DeclarativeCatalogPart control during runtime.

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1"
        <uc1:Google title="Google Search" ID="Google2" 
           runat="server" />

9. Press F5 to test the application. Click on the Catalog Display Mode option. You should now be able to see the CatalogZone control.

The default name displayed for the DeclarativeCatalogPart control is "Declarative Catalog." This name might not be very obvious to your users, as to its purposes. You can change the name by right-clicking on it in Visual Studio and selecting Properties. Set the Title property to something like Available Web Parts.

10. The contents of the DeclarativeCatalogPart are always displayed (see Figure 6). To add the Google Search Web Part, check the check box next to Google Search, select the Web Part zone to add into (WebPartZone2, in this case), and click Add.

figure 6
Figure 6. The CatalogZone control in action

11. Figure 7 shows what happens when you add the Google Search Web Part to WebPartZone2.

figure 7
Figure 7. Adding the Google Search Web Part to WebPartZone2

12. Now, close all three Web Parts on the page by clicking the Close link at the top-right corner of each one. You will discover how you can get them back onto the page again.

13. Click on the Catalog Display Mode option again. This time, click on the Page Catalog link in the CatalogZone control (see Figure 8). You should see that the PageCatalogPart control now shows the three Web Parts you have just closed.

figure 8
Figure 8. Viewing the page catalog

14. To add the closed Web Parts back into the page, check the Web Parts you want to add, select the Web Part zone to add into, and then click Add.

15. Lastly, click on the Imported Web Part Catalog link in the CatalogZone control. You can click on the "Browse…" button to locate a saved Web Part. Click on Upload to upload the Web Part.

16. Select the Web Part zone to add to and click Add to add the selected Web Part to the page (see Figure 9).

figure 9
Figure 9. Importing Web Parts


In this article, you have seen how easy it is to add additional Web Parts to your page. You have also seen how to restore closed Web Parts through the PageCatalogPart control. This article concludes the three-part series on Web Parts.

Wei-Meng Lee (Microsoft MVP) is a technologist and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies.

Return to