3.4. Let Users Add Web Parts at Runtime
Note: Provide a list of Web Parts to let users choose themselves.
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, in My MSN, you can choose from a list of available content that you can add to your page (see Figure 3-23).
Figure 3-23. Adding additional content in http://my.msn.com
To let users add Web Parts to the page, you will use the DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart controls.
3.4.1. How do I do that?
In this lab, 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 controlsDeclarativeCatalogZone, PageCatalogZone, and ImportCatalogZoneso that users can look for and add Web Parts from a variety of sources.
Here is a quick overview of the controls you will use in this lab:
Contains CatalogPart controls (DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart). This control is used to create a catalog of Web Part controls so that users can select controls to add to a page.
Enables developers to add a catalog of Web Part controls to a web page so that users can choose to add them to a page.
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.
Imports Web Part controls, so that the control can be added to a web page with preassigned settings
For this lab, let's continue to use the project we've used throughout this chapter (C:\ASPNET20\chap03-Webparts).
Drag and drop a CatalogZone control from the WebParts tab of the Toolbox onto the form (see Figure 3-24). The CatalogZone control is the primary control for hosting CatalogPart controls (more on this in Step 2) on a Web page.
Figure 3-24. Adding the CatalogZone control onto the default form
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-25.
Figure 3-25. 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.
The CatalogZone needs a look and feel, so apply the Classic scheme via the Auto Format... link on the CatalogZone Tasks menu.
In the radio button list control at the bottom of the form, add a new item (shown in bold):
<asp:RadioButtonList 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> </asp:RadioButtonList>
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 = _ WebPartManager.BrowseDisplayMode Case 1 : WebPartManager1.DisplayMode = _ WebPartManager.DesignDisplayMode Case 2 : WebPartManager1.DisplayMode = _ WebPartManager.CatalogDisplayMode End Select End Sub
In the DeclarativeCatalogPart Tasks menu, click on the Edit Templates link (see Figure 3-26). 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 3-26. Editing the DeclarativeCatalogPart control
Drag and drop the Google.ascx file from Solution Explorer onto the DeclarativeCatalogPart control (see Figure 3-27). 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 3-27. Adding the Google Search Web User control onto the DeclarativeCatalogPart control
Right-click 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.
Press F5 to test the application. Click on the Catalog Display Mode option. You should now be able to see the CatalogZone control.
Tip: 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 it in Visual Studio and selecting Properties. Set the Title property to something like "Available Web Parts."
The contents of the DeclarativeCatalogPart are always displayed (see Figure 3-28). To add the Google Search Web Part, click the checkbox next to Google Search, select the Web Part zone to add into (WebPartZone2 in this case), and click Add.
Figure 3-28. The CatalogZone control in action
Figure 3-29 shows what happens when you add the Google Search Web Part to WebPartZone2.
Figure 3-29. Adding the Google Search Web Part to WebPartZone2
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.
Click on the Catalog Display Mode option again. This time, click the Page Catalog link in the CatalogZone control (see Figure 3-30). You should see that the PageCatalogPart control now shows the three Web Parts you have just closed.
Figure 3-30. Viewing the page catalog
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.
Finally, click on the Imported Web Part Catalog link in the CatalogZone control. You can click the Browse... button to locate a saved Web Part. Click the Upload button to upload the Web Part.
Select the Web Part zone to add to and click Add to add the selected Web Part to the page (see Figure 3-31).
Figure 3-31. Importing saved Web Parts
3.4.2. What about...
...exporting a Web Part?
Your user might like a particular Web Part on your site and want to customize the Web Part so that she can share it with her colleagues. In this case, you need to allow the user to export the Web Parts on your page.
To make a Web Part exportable, you need to create a custom control that inherits from WebPart. Refer to the lab Section 3.2, earlier in this chapter, for information on how to export a Web Part.
3.4.3. Where can I learn more?
For more information on the CatalogPart controls, refer to the MSDN Help topic "CatalogPart Class."