Building Web Parts (Part 2)

Moving Web Parts

Continuing with the project created in the last article, 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 article (C:\Webparts1), add a RadioButtonList control onto the form (see Figure 1) and populate it with two items: a radio button named Browse Display Mode and another one named Design Display. Also, check the AutoPostBack check box 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 1. Adding a RadioButtonList control to the form

2. Double-click on the RadioButtonList control to switch to its code-behind page. Enter the following code. The WebPartManager control manages the display mode of all of 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 RadioButtonList1_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 2). You can change the default header text (WebPartZone1, WebPartZone2, etc.) of each WebPartZone control by setting its HeaderText property.

Figure 2. Moving Web Parts from one zone to another

4. If you drag the Google Search Web Part onto the first Web Part zone, the result will look like Figure 3. 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. The Google Search Web Part now takes on the scheme defined in WebPartZone1

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

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 changes 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 things 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 positions. 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 1 shows a record in the aspnet_ PersonalizationPerUser table.

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

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

What about restoring a Web Part after it has been closed? In the process of trying out the example, you may have clicked on the Close button on a Web Part. If you have done so, you will realize that you would have difficulties in getting the page back again. 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 next article.

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

Using SQL Server 2000 with Web Parts

By default, Web Parts in ASP.NET 2.0 are configured to use the default SQL Express Personalization Provider for persisting Web Parts information. If you wish to use SQL Server 2000 together with Web Parts, you need to perform the following steps:

1. Run the aspnet_regsql.exe tool located in C:\WINDOWS\Microsoft.NET\Framework\v2.0.50215\ to add the aspnetdb database into SQL Server 2000.

The aspnet_regsql utility is a mixed mode (both graphical- and command-line-based) tool that lets you configure SQL Server for use with your ASP.NET application.

You run the aspnet_regsql tool like this:

C:\WINDOWS\Microsoft.NET\Framework\v2.0.50215\>aspnet_regsql

If you invoke aspnet_regsql without any command options, you will see a wizard guiding you through the steps. Select the "Configure SQL Server for application services" option (see Figure 4). Click Next and then specify your SQL Server 2000 name (see Figure 5). Click Next and then Close.

Figure 4. Configuring SQL Server for application services

Figure 5. Selecting the server to use

2. In Web.config, add the following to change the default SQL Express Personalization Provider to the new SQL Server Personalization Provider:

<connectionStrings>
   <add name="SQLConnString" 
      connectionString="Data Source=your_server_name;Initial 
                        Catalog=aspnetdb;Integrated Security=True"
      providerName="System.Data.SqlClient" />
</connectionStrings>

<system.web>
   ..
   ..
   <webParts>
      <personalization
         defaultProvider="SqlPersonalizationProvider">
         <providers>
            <add name="SqlPersonalizationProvider"
               type="System.Web.UI.WebControls.
                     WebParts.SqlPersonalizationProvider"
               connectionStringName="SQLConnString"
               applicationName="/" />
         </providers> 
         <authorization>
            <deny users="*" verbs="enterSharedScope" />
            <allow users="*" verbs="modifyState" />
         </authorization>
      </personalization>
   </webParts>
</system.web>

The Web Parts information will now be stored in SQL Server 2000 rather than the ASPNETDB.MDF database.

Summary

In this article, you have seen how to move Web Parts from one zone to another. In the next article, I will show you how you can let users add new Web Parts to your page during runtime as well as recover web parts that have been closed.