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

3.3. Let Users Move Web Parts

Note: Let your users rearrange the positions of the Web Parts on
your portal to their liking.

So far we have been discussing how to create Web Parts and how to
configure them to look good and nice. But we have not really touched
on the most important feature of Web Partsthat is, how to let
users move the Web Parts from one zone to another.

3.3.1. How do I do that?

In this lab, you will learn how to use the ASP.NET 2.0 Web Parts
Framework to enable users to move Web Parts directly in the web
browser. First you'll add a pair of radio buttons to
the page so you can turn the feature on and off, and then
you'll observe the behavior of the Web Parts as you
move them from one zone to another.

Using the project created in the previous lab
(C:\ASPNET20\chap03-Webparts), add a
RadioButtonList control onto the form (see Figure 3-20) and populate it with two items: a radio
button named Browse Display Mode and another one named Design Display
Mode. Also, check the AutoPostBack checkbox in the RadioButtonList
control Tasks menu:

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

Figure 3-20. Adding a RadioButtonList control to the form

Double-click the RadioButtonList control to switch to its code-behind
page, and then enter the following code. The WebPartManager control
manages the display mode of all the Web Parts on the page. By
default, all Web Parts under its control are set to browse display
mode (BrowseDisplayMode). To allow users to move
Web Parts, you need to set the display mode to design display mode
(DesignDisplayMode).

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
End Select
End Sub

Press F5 to test the application. When the page is loaded, click the
Design Display Mode button and notice that the outlines of the three
WebPartZone controls are displayed. You can now drag a Web Part by
its title bar from one zone to another (see Figure 3-21).

Figure 3-21. Moving Web Parts from one zone to another

You can change the default header text
(WebPartZone1, WebPartZone2,
etc.) of each WebPartZone control by setting its HeaderText property.

If you drag the Google Search Web Part onto the first Web Part zone,
the result will look like Figure 3-22. Note that now
the Google Search Web Part uses the scheme set by the WebPartZone1
control. Also, notice that the Minimize and Close links each now have
an icon.

Figure 3-22. The Google Search Web Part now takes on the scheme defined in WebPartZone1

When you are done moving the Web Part control, click on the Browse
Display Mode option so that the page is set again to browse mode.

3.3.2. What just happened?

What you have just seen is
how to configure a Web Part so it can be moved from one Web Part zone
to another, and you've observed how the look and
feel and behavior of the Web Part itself change when you do that. All
of this is handled by the WebPartManager control.
When you click on the Browse Display Mode button, the display mode of
the WebPartManager control is set to
WebPartManager.DesignDisplayMode:

Case 1 : WebPartManager1.DisplayMode = _
WebPartManager.DesignDisplayMode

When you are done moving the Web Parts and want to finalize the
positioning of the Web Parts on the page, you can simply set it back
to browse mode:

Case 0 : WebPartManager1.DisplayMode = _
WebPartManager.BrowseDisplayMode

Now, if you close IE and press F5 in Visual Studio again, you will
notice that the Web Parts remain in their most recent position. The
Web Parts Framework is able to
"remember" where you previously
positioned them. So how is this done?

Actually, the positional information of each Web Part is stored in a
table called the aspnet_PersonalizationPerUser table, found in the
ASPNETDB.MDF database (SQL Express 2005) located in the
App_Data folder of your project. Table 3-1 shows a record in the aspnet_
PersonalizationPerUser table.

Note: When I run the application on my system, the Id can be
traced to the username "WINXP2\Wei-Meng
Lee" in the aspnet_Users table, also located within
the ASNETDB.MDF database.

Table 3-1. A record in the aspnet_PersonalizationPerUser table

Field

Value

Id

{94CACA48-36D3-4F64-A6AB-BD5352FF4522}

PathId

{BF32CB1F-DEB7-4384-B3DB-5D9B45F59FF9}

UserId

{F9D14F92-540B-4A64-A4B2-75DB80857E78}

PageSettings

<Binary>

LastUpdatedDate

2/7/2005 8:48:58 PM

If you wish to restore the Web Parts to their original position,
simply delete the row (corresponding to a particular user) in the
aspnet_PersonalizationPerUser table.

3.3.3. What about...

...restoring a Web Part after it has been
closed?

In the process of trying out the labs, you may have clicked on the
Close button on a Web Part. If you did this, you might have had
difficulty getting the page back. But fear not, the Web Parts are not
gone forever; you just need to know how to get them back. There are
two ways of restoring a closed Web Part:

Delete the relevant row in the aspnet_PersonalizationPerUser table,
as outlined earlier.

Use the PageCatalogPart control, to be discussed in the lab Section 3.4.

You can always disable the Close link of a Web Part by setting the
Visible attribute within the CloseVerb property to false.

3.3.4. Where can I learn more?

To learn how to write your own custom personalization provider, check
out the following articles:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspnet/html/asp02182004.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspnet/html/asp04212004.asp?frame=true