ASP.NET 2.0: A Developeramp;#039;s Notebook [Electronic resources] نسخه متنی

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:

CatalogZone

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.

DeclarativeCatalogPart

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.

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 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 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>
</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."