AddThis Social Bookmark Button

Listen Print Discuss
Liberty on Whidbey

Web Parts in ASP.NET 2.0

by Jesse Liberty
01/10/2005

In a previous article, I discussed how personalization works. This article will pick up from where that one left off and show you how to use Web Parts to allow your users to further personalize their interactions with your web site.

Getting Started

There have been some small changes since the previous articles were published, and so I suggest you download the updated starter code. Unzip the starter project to any directory you like. It will create a subdirectory called Web Parts. Right click on the subdirectory and choose Sharing and Security. Click on the Web Sharing tab and choose Share this folder. Accept the defaults as offered, as shown in Figure 1.

Figure 1
Figure 1. Sharing the Web Parts directory

Start Visual Studio 2005 Beta 1 and choose File -> Open -> Open Web site. Navigate to the Web Parts directory and click Open. Click Debug (and save the .sln file) and you should be brought to the default page. Log in with the username Jesse (the starter kit includes this user) with the password Jesse. You're ready to begin to add Web Parts to what had been the Personalization project.

Begin by adding a new page, WebParts.aspx, to your project, and add a link to that page on your default.aspx page.

Creating Zones

A page that uses Web Parts is divided into zones: areas of the page that can contain content. It is typical (though certainly not required) to organize these zones using tables. To see a simple example of this at work, follow these steps:

1. Open the WebParts section of your Toolbox, and drag a WebPartManager onto your page, as shown in Figure 2.

Figure 2
Figure 2. Web Parts toolbox

The job of the WebPartManager is to track and coordinate all the Web Part controls on the page. It will not be visible when the page is running.

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

3. Drag a WebPartZone into each of the six table cells. Each WebPartZone will have a default name (e.g., WebPartZone6) and a default heading. You can easily modify either or both of these properties in the properties window. Resize the WebPartZone controls as appropriate to the cell. Notice that within the zone is a shaded area with the text "Click here to add WebParts to the WebPartZone," as shown in Figure 3.

Figure 3
Figure 3. Creating zones

Adding Controls To Zones

4. Set the heading on the first Web Part control to News and drag a Label into the zone. The Label is wrapped in a Web Part control, and its title is set to Untitled, as shown in Figure 4.

Figure 4
Figure 4. Adding Controls

5. Switch to source view and change the title of the label to Today's News and the text to "<br/>Thousands die. Thousands more die at eleven.". Switch back to design view and drag a list box into WebPartZone3. Set the header text for the WebPartZone to "Sponsors." Click on the list box, and then on its smart tag to open the ListItemCollection Editor. Add a few items to the list box. Back in source view, set the Title property to "Our Sponsors" and run the application. You'll need to log in using one of the accounts you set up previously. Click on the link to the Web Parts page. You should see two Web Parts, complete with Minimize and Close commands, as shown in Figure 5.

Figure 5
Figure 5. The Web Parts live

Minimizing and Restoring

Click on the Minimize tag and the contents of the Web Part (e.g., the list box) collapses, and the link changes from "Minimize" to "Restore" as shown in Figure 6.

Figure 6
Figure 6. Closing and restoring

Exit the application. Start it again and sign back in, and navigate back to these pages. Aha! The minimized zone remains minimized. You'll find that the Web Parts are closely tied with personalization, and each individual's personalized Web Parts are persisted through the personalization database.

Allow Your Users to Move the Web Parts

Web Parts make it easy for you to allow the user to rearrange the page, placing, for example, News on the right and Sponsors on the left. To do so, drag a WebPartPageMenu control onto your page, as shown in Figure 7.

Figure 7
Figure 7. Adding a menu

Once this is in place, run the application. Log in and navigate to the Web Parts page. Click the drop-down list in the Web Parts Page Manager to set it to Design Page Layout and click the Change button. All of the WebPartZones become visible, and you can drag and drop WebParts from one zone to another by clicking on their titles and dragging them to different zones, as shown in Figure 8, in which you see the Today's News Web Part being dragged from Zone 1 (upper left) to Zone 4 (lower left).

Figure 8
Figure 8. Movable Web Parts

When you are done, return to the Web Parts Page Manager, set it to Browse This Page and click Change. The changes (moving from one zone to another) are reflected in the page. You may find it interesting to log into this page as another user (no changes reflected) and then again as the first user, to see that the changes are preserved from session to session. In a subsequent article, I'll look at how you can use Web Parts to create a portal application and how you can modify the Web Parts to create a customized look and feel.

Programming .NET Windows Applications

Related Reading

Programming .NET Windows Applications
By Jesse Liberty, Dan Hurwitz

Table of Contents
Index
Sample Chapter

Read Online--Safari
Search this book on Safari:
 

Code Fragments only

Jesse Liberty is a Microsoft Senior Program Manager where he is responsible for the creation of tutorials, videos and other content to facilitate the learning and use of Silverlight. Even before joining Microsoft, Jesse was well known in the industry in part because of his many bestselling books, including O'Reilly Media's Programming .NET 3.5, Programming C# 3.0, Learning ASP.NET with AJAX and the soon to be published Programming Silverlight.

Read more Liberty on Whidbey columns.

Return to ONDotnet.com.