AddThis Social Bookmark Button

Print

Building Web Parts, Part 1

by Wei-Meng Lee, author of ASP.NET 2.0: A Developer's Notebook
05/23/2005

Websites today contain a wealth of information; so much that a poorly designed site can easily overwhelm users. To better help users cope, portal websites today (such as MSN) often organize their data into discrete units that support a degree of personalization. Information is organized into standalone parts, and users can rearrange those parts to suit their individual working styles. Such personalization also lets users hide the parts that contain information in which they have no interest. What's more, users can save their settings so that the site will remember their preferences the next time they visit the site. In ASP.NET 2.0, you can now build web portals that offer this kind of modularization of information and personalization using the new Web Parts framework.

Essentially, the Web Parts framework contains a set of controls that lets you organize a portal page in a way that allows users of the portal to customize the appearance, content, and behavior of its contents directly from a web browser. The changes are then saved for the user and recalled for subsequent visits. All of this functionality can be implemented without the need for much coding.

In this three-part series on Web Parts, I'll be discussing these controls in greater detail. For this article, let's take a look at the basics of Web Parts. Figure 1 shows the new controls on the WebParts tab of the Toolbox that are the heart and soul of the Web Parts framework.

Figure 1
Figure 1. The new controls in the WebParts tab in the Toolbox

Figure 2 shows the "My MSN" page of the Microsoft Network portal, which is a good example of the use of Web Parts to organize the content at my.msn.com. You can personalize the MSN site by moving around the Web Parts from which it has been built, such as "Today on MSN" and "My favorite links."

Figure 2
Figure 2. Personalizing Web Parts

Related Reading

ASP.NET 2.0: A Developer's Notebook
By Wei-Meng Lee

Add Web Parts to Your Application

ASP.NET 2.0 provides a set of readymade controls to help you develop Web Parts for your portals. You'll find the available controls on the WebParts tab of the Toolbox. Let's start with the basics. You will learn how to create Web Parts for your ASP.NET web application.

To understand how Web Parts work, let's build a simple portal page that contains three Web Parts.

There are two ways to add a Web Part to a page:

  • By dropping an existing web server control onto the page.
  • By creating a Web User control from scratch and then dropping it onto the page.

Either way, you must first prepare the way for these controls by adding a WebPartManagerControl and one or more WebPartZone controls to the page.

  • WebPartManager: Manages all Web Parts controls on a page.
  • WebPartZone: Contains and provides the overall layout for the Web Part controls that compose the main UI of a page. This control serves as an anchor for Web Part controls.

Creating Web Parts from Standard Web Server Controls

Let's start by creating a Web Part from a standard web server control.

1. First you need to create a home page for the Web Parts. Launch Visual Studio 2005 and create a new website project. Name the project "C:\ Webparts1."

2. Next, drag and drop a WebPartMenuManager control from the Toolbox (under the WebParts tab) onto the default Web Form. The WebPartManager control manages all of the Web Parts on a Web Form and must be the first control that you add to the page.

3. To specify where the Web Parts on your page are to be located, insert a 3-by-1 table onto the form (Layout?Table) and drag and drop a WebPartZone control from the Toolbox (under the WebParts tab) into each of its three cells (see Figure 3). Each WebPartZone control will serve as the docking area for one or more Web Parts (more on this in Step 5).

Figure 3
Figure 3. Populating the default Web Form

A Web Part zone is an area where Web Parts are anchored. It also defines the default layout and appearance of each Web Part within that zone.

4. Now it's time to add a web server control to the page to give it some functionality. Drag and drop a Calendar control onto WebPartZone1. Apply the Colorful 1 scheme to the Calendar control by selecting it from the "Auto Format..." link in the Calendar Tasks menu. When you drop a web server control onto a WebPartZone control, the ASP.NET 2.0 Web Parts framework wraps it with a special type of control known as a GenericWebPart control, which provides the server control with the basic functionality it needs to become a bona fide Web Part.

5. Switch to Source View for the page (Default.aspx, in our example) and add the <title> attribute to the Calendar control and set its value to "Today's Date":


<asp:Calendar ID="Calendar1" 
     title="Today's Date"
     runat="server" BorderWidth="1px" 
     Font-Names="Verdana"
..

Note that the Calendar control itself does not support the <title> attribute. However, when a control is added to a WebPartZone control, it is wrapped by a GenericWebPart control, which does supports the <title> attribute. The value of the <title> attribute will be used as the header for the GenericWebPart control.

6. Your Web Form should now look like the one shown in Figure 4.

Note that if you drag and drop more than one control onto a WebPartZone control, the controls will be treated as separate Web Parts, each with its own minimize and close buttons. To combine several controls into one Web Part, you should use a Web User control. Alternatively, you can also group web server controls within a Placeholder control or a Panel control and then drop it into the WebPartZone control.

Figure 4
Figure 4. The Calendar control as a Web Part

7. To see how the Calendar control looks in IE, press F5. You will notice an arrow icon in the top-right corner of the Calendar control. Clicking on the arrow will reveal two links: Minimize and Close. Click Minimize to minimize the control. To restore the control to its original state, click the Restore link (see Figure 5). To close the Web Part, click the Close link.

Figure 5
Figure 5. The Calendar control

8. Now you've seen how to turn an ordinary web server control into a Web Part. Stop the debugging and return to Visual Studio.

Pages: 1, 2

Next Pagearrow