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. 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. Personalizing Web Parts
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. 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. 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. 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.
Creating Web Parts Using Web User Control
Let's take a look at the second method of adding a Web Part to a portal page:
creating a Web User control from scratch and dropping it onto a WebPartZone.
The control we're going to build will allow users to search Google.
1. First you need to create a new control. Add a new Web User control to your
project by right-clicking on the project name in Solution Explorer and then
selecting Web User Control. Name the Web User control "Google.ascx."
2. Since we're going to display the Google logo to identify our Web Part, we
need to create a folder to store the image. Add a new folder to the project and
name it Images (right-click on the project name in Solution Explorer and select
Add Folder -> Regular Folder). Save the Google.gif image in the C:\
Webparts1\Images folder (see Figure 6).
Figure 6. The image in the Images folder
3. Now you need to implement your control. First, insert a 2-by-2 table into the
Web User control (Layout -> Table) to organize its contents. Add an Image control,
a Textbox control, and a Button control to three of the table cells, as shown in
Figure 7. Associate Google.gif with the Image control and add the word "Search"
to the Button control.
Figure 7. Populating the Web User control with the various
controls
4. It's time to add the code that will carry out a search when the user enters
a search term in the text box and clicks the Search button. Double-click on the
Search button and type the following code, which will send a search query to
Google.com using the terms in the text box:
Protected Sub btnSearch_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnSearch.Click
Response.Write(Page.IsValid)
Dim queryStr As String = HttpUtility.UrlEncode(txtSearch.Text)
Response.Redirect("http://www.google.com/search?q=" & queryStr)
End Sub
5. You can now drag and drop the Google.ascx Web User control from the Solution
Explorer onto the WebPartZone2 control in Default.aspx (see Figure 8).
Figure 8. Dragging and dropping a Web User control onto a
WebPartZone control
6. Note that the Google control is untitled. To add a title, switch to Source
View and add the <title> attribute to the newly added Web User control,
assigning it the value "Google Search":
<uc1:Google title="Google Search" runat="server" ID="Google1" />
7. To see how the Web User control looks in IE, press F5. Your portal page
should now resemble the one shown in Figure 9.
Figure 9. Displaying the two Web Parts on the page
Customizing the Look and Feel of Web Parts
By default, the look and feel of Web Parts controls is determined by the
default layout set by the WebPartZone control. By default, Web Parts display
their various options (such as Minimize, Close, etc.) as hyperlinks. You adjust
the look and feel of Web Parts by altering the properties of the containing
WebPartZone control, and you can customize the look of the option links by
adding your own images. Let's see how you can do that.
Remember, the settings in a WebPartZone control affect the WebPart controls
it contains. So you have to set each WebPartZone control in order to adjust the
look and feel of its Web Parts.
1. First, you'll need some images to use as icons. Add the images shown in
Figure 10 to the Images folder of your project.
Figure 10. The images stored in the Images folder
2. Now you'll want to assign each of the images to one of the option links.
Select the WebPartZone1 control and view its Properties window. Locate the
following properties and set their ImageURL properties as follows::
CloseVerb.ImageUrl="Images/CloseVerb.gif"EditVerb.ImageUrl="Images/EditVerb.gif"MinimizeVerb.ImageUrl="Images/MinimizeVerb.gif"RestoreVerb.ImageUrl="Images/RestoreVerb.gif"
3. Apply the Professional scheme to the WebPartZone1 control by clicking on the
"Auto Format..." link in the WebPartZone Tasks menu (see Figure 11). Likewise,
apply the Colorful scheme to the WebPartZone2 control.
Settings applied to a WebPartZone control affect all the Web Parts controls
contained in that Web Part zone. If a Web Part is moved from one Web Part zone
into another, it will assume the behavior of the Web Part zone it is in.
Figure 11. Apply a scheme to the WebPartZone control
4. Press F5 to test the application. You will realize that the Calendar control
in the first WebPartZone control has icons displayed next to the Minimize and
Close links. In contrast, the Web User control in the second WebPartZone control
does not have the icons (see Figure 12). This is because you only configured
the first WebPartZone control to display icons. In the next article, you will
learn how to allow your user to rearrange the various Web Parts on the page.
Figure 12. Examining the two Web Parts in the two WebPartZone
controls
Summary
In this article, you have seen how to create new Web parts using Web server
controls as well as Web User controls. In the next article, you will see how to
move the Web Parts from one WebPartZone into another.
