Section 3.3. Let Users Move Web Parts

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.

1. 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  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

   
   
   

2. 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

   
   

3. 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

   
   
   

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

5. 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

   
   
   

6. 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