Building Web Parts, Part 2by Wei-Meng Lee, author of ASP.NET 2.0: A Developer's Notebook
In part one of this three-part series of articles, I discussed how to create Web Parts and how to configure them to look good and nice. But I have not really touched on the most important feature of Web Parts; that is, how to let users move the Web Parts from one zone to another. In this article, I will show you how to move Web Parts and how you can also configure Web Parts to make use of SQL Server 2000.
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 (
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
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 (
WebPartZone2, etc.) of each WebPartZone control by setting its
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
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.
| ||<Binary data>|
| ||5/27/2005 4:44:05 AM|
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
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_PersonalizationPerUsertable, 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.
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
You run the
aspnet_regsql tool like this:
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.
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.
Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.
Return to ONDotnet.com.