Setting Up the Master Page
A master page provides a common look and feel as well as some common logic for the Web site. Also, being good citizens of the Web community, you'll use style sheets to control most of the look and feel and positioning for controls and graphics. You'll follow these steps.
Table 1: Display modes for the WebPartManager.
- Create an ASP.NET 2.0 Web site. Since by default, the Web Part framework uses SQL Server 2005 Express Edition (SQL Server Express) out of the box, you will need to install SQL Server Express on your machine. SQL Server Express is installed by default with Visual Studio 2005, or you can download it for free from MSDN.
- Add a master page to your Web site and call it SiteMaster.master.
- Since every ASP.NET 2.0 page that intends to use the ASP.NET 2.0 Web Part framework must have a WebPartManager, add one to the master page.
<asp:WebPartManager ID="WebPartManager1" runat="server">
<Personalization InitialScope="Shared" />
- Note that I've set the Personalization element's InitialScope attribute value to "Shared" because this Web site has a public face that only administrators can customize. To enforce this I'll disable the UI that allows customization for all users who are not in the "Admin" role.
- Next I'll add code (see Listing 1) that will render the UI for all users as shown in Figure 1. Since style sheets control most of the look and feel, the HTML becomes extremely simple. At this point you have a simple master page with a WebPartManager on it. The WebPartManager allows you to change the "mode" of the page by specifying a value to the WebPartManager.DisplayMode property. However, you still need to provide the user with a UI that allows the user to specify the current DisplayMode for the given WebPartManager.
- As shown in the area to the top and right in Figure 2, this Web site will provide the user with a menu, which is simply the ASP.NET 2.0 Menu control. Thus, go ahead and put an ASP.NET 2.0 Menu control at the appropriate position on the master page, and name it WebPartMenu.
|Figure 3: The site administration menu, visible only to users in Admin role.|
- Next you have to populate the menu with appropriate administration choices, and a Logout menu item. Also, since you don't want to make this menu visible to users whose role isn't "Admin" you'll write code (see Listing 2) in the Page_Load handler for the master page.
- With code in place to render the menu, you can easily write code to handle clicking the menu and perform the appropriate action of logging out the user, or setting the appropriate DisplayMode for the page. Listing 3 shows the code to do that.
- Even though you can't run the code yet (because you are still working on the master page), the code in Listing 2 will render a menu shown in Figure 3.
- With the code in place, you can set the WebPartManager's DisplayMode to Browse, Catalog, Design, Edit or Connect. Table 1 describes these display modes.
The default Display mode. It shows the user customized version of the site, or in this case as the anonymous user would see it. Besides being able to minimize or close individual WebParts, Browse shows the Web Parts in a read-only mode.
Lets you visually drag and drop (in IE) the various Web Parts on the page currently.
Dsplays a catalog of available Web Parts that you can add to the various WebPartZones.
Shows the EditorZone that allows the user to edit the various properties of the current Web Part being edited.
Allows you to connect various WebParts, and define communication between them.
But the Edit
, and Connection
display modes cannot work unless you create complementary EditorZone
, and ConnectionZones
on the page. Because communication between Web Parts is a whole other topic, let's worry about ConnectionZones in another article. For now, you need to add an EditorZone
and a CatalogZone
on the master page (see Listing 4
As you can see in Listing 4
, a Stylesheet class named AdminZone
controls the positioning and look and feel. The Catalog defines a DeclarativeCatalogPart and inside the WebPartsTemplate is where you'll add the three Web Parts that I'll show you how to write. Once you do add the three Web Parts to the DeclarativeCatalogPart, the Catalog Zone will look similar to Figure 4
|Figure 4: The CatalogZone with Web Parts added.|
Also, the EditorZone contains the four built-in editors that ASP.NET 2.0 supplies. Note the PropertyGridEditorPart, which gives you a convenient way to modify values of Web Part properties that are decorated with the WebBrowsable=true
By doing this much, you now have set up a common look and feel as well as a basic framework to host and edit your Web Parts in. You can find the full code including the various Web Parts for SiteMaster.master
in Listing 5
, and SiteMaster.Master.cs
in Listing 6
Next you need to tell the framework how to hook into authentication and authorization. You'll leverage the membership and role provider, and allow users of the "Admin" role to view the "AdminZone" so they can administer the Web site. Let's do that next.