Section 13.5. Web Parts

13.5. Web Parts

Web Parts allow your users to reconfigure sections of your site to meet their own needs and preferences. Many information providers allow the user to pick which content they want displayed and in which column to display it. Web Parts allow you to provide that functionality with drag and drop "parts" of your page.

To learn about Web Parts, create a new web site (call it WebParts) and copy the SitePersonalization web site from the beginning of this chapter. Set the Welcome page as the start page and ensure you can log in with an account you created previously (or, alternatively, set CreateAccount as the start page and create a new account to use).

Figure 13-15. Radio button list label is red

13.5.1. Web Parts Architecture

Web Parts are created and managed on top of personalization using a structural component, called the WebPartManager control, to manage the interaction of Web Parts and UI Controls to create user-managed interface.

Every Web Parts page has a WebPartManager control. This invisible control tracks all the individual web part controls and manages the Web Parts Zones (described below). It also tracks the different display modes of the page and if personalization of your Web Parts page applies to a particular user or all users.

13.5.2. Creating Zones

A page that uses Web Parts is divided into zones : areas of the page that can contain content and controls that derive from the Part class ( Part controls). They can contain consistent UI elements (header and footer styles, border styles, and so on) known as the chrome of the control.

It is typical (though certainly not required) to organize these zones using tables.

To see a simple example of Web Parts at work, follow these steps:

1. Create a new page called WebPartsDemo.aspx .

2. Open the WebParts section of your Toolbox and drag a WebPartsManager onto your page.

3. The job of the WebPartsManager is to track and coordinate all the web part controls on the page. It will not be visible when the page is running.

4. Add a new table, with two rows and three columns. Rearrange the columns so they are not of even size .

5. Drag a WebPartZone into each of the six table cells . Each WebPartZone will have a default name (such as WebPartZone6) and a default heading. You can modify either or both of these properties in the properties window, as shown in Figure 13-16.

6. Set the HeaderText property on the first web part control to News.

Figure 13-16. Web Parts zones

13.5.3. Adding Controls to Zones

Drag a Label control into the zone. The label is wrapped in a Web Part control, and its title is set to Untitled, as shown in Figure 13-17.

Figure 13-17. Label Web Part

Switch to source view and change the Title property of the label to Today's News and the text to the following:

 <br/>Penguin Classics releases new translation of "In Search of Lost Time". 

Title is not normally a property of the Label control and will not show up in the Properties window or Intellisense. However, when you add it to a WebPartZone , it is wrapped, at runtime, in a GenericWebPart control that does recognize this property.

Switch back to Design view and drag a ListBox control into WebPartZone3. Set the header text for the WebPartZone to Sponsors . Click on the list box and then its smart tag and Edit Items to open the ListItems Collection Editor. Add a few items to the list box. Back in Source view, set the Title property to "Our Sponsors." (This control, like the Label control, does not inherently have a Title property, so Intellisense will complain; as the note above explains, all will be well.)

You'll need to log in using one of the accounts you set up previously, and you'll need to add a link to your new page from the Welcome page. Now run the application.

Click on the link to the Web Parts page which you added to Welcome.aspx . You should see two Web Parts, complete with Minimize and Close commands, as shown in Figure 13-18.

13.5.4. Minimizing and Restoring

Click on the Minimize tag and a menu appears allowing you to minimize or close the web part, as shown in Figure 13-19.

If you choose Minimize, the web part will be minimized to its title, and the minimize tag will offer the choices of Restore or Close, as shown in Figure 13-20.

Figure 13-18. Two Web Parts visible

Figure 13-19. Minimize or Close

Figure 13-20. Restore or Close

Exit the application. Restart, sign back in, and navigate to these pages. Aha! The minimized zone remains minimized. The individual's personalized Web Parts are automatically persisted through the personalization database.

Web part controls derive from the Part class and are the essential UI of a Web Parts page. You can create custom Web Part controls , or you can use existing ASP.NET server controls, user controls, and custom controls.