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

3.5. Let Users Edit Web Parts at Runtime

Note: Let users customize the look and feel of the Web Parts at
your site.

In addition to giving users the power to move Web Parts around on
your portal pages, you can empower them to change the appearance of
the Web Parts themselves. In this lab, you will learn how to
use the EditorPart controls
(AppearanceEditorPart,
BehaviorEditorPart,
LayoutEditorPart, and
PropertyGridEditorPart) to allow users to change
the look and feel of their Web Parts.

Here is a quick overview of the EditorPart controls
you'll use in this lab:

AppearanceEditorPart

Provides an editor control that
enables end users to edit several user interface properties (such as
title, width, and height) on a Web Part control

BehaviorEditorPart

Provides an editor
control that enables end users to edit
several user interface properties (such as the display of the Edit,
Close, and Minimize buttons) on a Web Part control

LayoutEditorPart

Provides an editor control
that enables end users to edit several
layout-oriented user interface properties on a Web Part control

PropertyGridEditorPart

Provides an editor control
that enables end users to edit custom
properties on a Web Part control

3.5.1. How do I do that?

In this lab, you will learn how to let users change the look and
behavior of every Web Part on the page. You will add
an EditorZone control to the page to
contain the four EditorPart controls:
AppearanceEditorPart,
BehaviorEditorPart,
LayoutEditorPart, and
PropertyGridEditorPart. These four controls allow
users to make a variety of changes to the look and feel of Web Parts
on the page. For example, users can change the title of a Web Part,
as well as selectively enable and disable the various buttons (such
as Close, Edit, and Minimize) on a Web Part.

Using the project created in the last lab
(C:\ASPNET20\chap03-Webparts), drag and drop the
EditorZone control onto the form (see Figure 3-32).
The EditorZone control serves as the primary control for hosting
EditorPart controls on a web page (more on this in Step 2).

Figure 3-32. Adding an EditorZone control onto the default form

To edit the Web Parts, you need to
populate the EditorZone control with the three EditorPart controls.
Drag and drop the AppearanceEditorPart, BehaviorEditPart,
PropertyGridEditorPart, and LayoutEditorPart controls onto the
EditorZone control. Apply the Colorful scheme to the EditorZone
control (via the "Auto Format..."
link in the EditorZone Tasks menu). The EditorZone control should now
look like Figure 3-33.

Figure 3-33. The EditorZone control with AppearanceEditorPart, BehaviorEditorPart, LayoutEditorPart, and PropertyGridEditorPart controls (images split for easy presentation on this page)

In the radio button list control at the bottom of the form, add a new
item (shown in bold) so that the user can choose the option to edit
the Web Parts on the page:

<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:ListItem>Edit Display Mode</asp:ListItem>
</asp:RadioButtonList>

In the code-behind of the radio button list control, add the
following line (shown in bold) to the SelectedIndexChanged event of
the radio button list control. This will cause the EditorZone 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
Case 3 : WebPartManager1.DisplayMode = _
WebPartManager.EditDisplayMode
End Select
End Sub

Press F5 to test the application. Click on the Edit Display Mode
option. Note that there are no visual changes to the page.

Examine the top right corner of the Calendar Web Part. You will
notice that there is now a new Edit link (see Figure 3-34). Click on the Edit link.

Figure 3-34. Editing a Web Part

You should now see the EditorZone control. You can customize the
appearance of the Web Part by modifying the properties in the
AppearanceEditorPart and LayoutEditorPart controls (see Figure 3-35). Click OK.

Tip: Note that the PropertyGridEditorPart control is not displayed for
this Web Part. You will learn more about the PropertyGridEditorPart
control in Section 3.5.2
for this lab.

Figure 3-35. Customizing the look and feel of a Web Part

3.5.2. What about...

...displaying the PropertyGridEditorPart
control?

Notice that in this lab the PropertyGridEditorPart control
is
not displayed when you switch the page to edit mode. So what is the
use for this control? Let's explore this.

For the PropertyGridEditorPart control to appear, a Web Part must
have public properties that are browsable (through the WebBrowsable
attribute) and personalizable (through the Personalizable attribute).
Web User controls do not support these properties, and hence only
controls that inherit from WebPart can use the PropertyGridEditorPart
control.

If you now edit the Translation Service
Web Part, you
will notice that the PropertyGridEditorPart control appears (see
Figure 3-36). This is because the Translation
Service Web Part has public and browsable properties:

<Personalizable( ), WebBrowsable( )> _
Public Property strToTranslate( ) As String
...

Figure 3-36. The PropertyGridEditorPart control

You can set a value for the public strToTranslate properties so that
the next time the Translation Service Web Part is loaded, the value
is shown by default.

3.5.3. Where can I learn more?

Check out the MSDN Help topic on "EditorPart
Class" for more information on the various EditorPart
controls.