What Are Web Parts?
by Jesse Liberty
01/10/2006
Today's web application is customizable in ways that could only have been dreamed of five years ago. One significant aspect of enhancing the user's ability to customize a site is the ability for the customer to decide what information is displayed on a page, and where that information is located. Many of the most popular web sites are beginning to allow this kind of customization by their users, from Yahoo to high-end news and financial services applications like Charles Schwab.
Let's take a quick look at the "MyYahoo" page, in which I am offered the following choices as shown in Figure 1:
- Add Content
- Change Layout
- Change Colors
You can create each of these options for your own users in a .NET 2005 application using Personalization, Web Parts, and Themes. This article will focus on Web Parts, and to see how they work, we'll build a simple application that allows the user to choose content and decide where it is placed.
Figure 1. My Yahoo customization
Begin by creating a new ASP.NET application named WebParts (or download the the complete project).
To get started, follow these steps:
- Open the Web Parts section of your Toolbox, and drag a Web Part Manager onto Default.asxp. (The job of the Web Part Manager is to track and coordinate all of the web part controls on the page. It will not be visible when the page is running.)
- Add a new table, with two rows and three columns. Rearrange the columns so that they are not of even size.
- Drag a Web Part Zone into each of the six table cells. In Design mode, click on each zone and re-size it to more or less fill the column. Your page should now look something like Figure 2:
Figure 2. Web Parts Design view--click for full-size image.
Your source at this point should look like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>WebZones</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asyWebPartManager ID=yWebPartManager1" runat="server" />
<table width="75%">
<tr>
<td style="width:25%">
<asp:WebPartZone ID="WebPartZone1" runat="server" Height="69px" Width="168px">
</asp:WebPartZone>
</td>
<td style="width:50%">
<asp:WebPartZone ID="WebPartZone2" runat="server" Height="80px" Width="344px">
</asp:WebPartZone>
</td>
<td style="width:auto">
<asp:WebPartZone ID="WebPartZone3" runat="server" Height="77px" Width="162px">
</asp:WebPartZone>
</td>
</tr>
<tr>
<td>
<asp:WebPartZone ID="WebPartZone4" runat="server" Height="57px" Width="166px">
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID="WebPartZone5" runat="server" Height="66px" Width="341px">
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID="WebPartZone6" runat="server" Height="64px" Width="165px">
</asp:WebPartZone>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Click on each zone, and a smart tag opens, offering you the option to auto-format that Web Part Zone as shown in Figure 3.
Figure 3. Auto-formatting a Web Part Zone
Select, for example, Professional format, and then switch to Source mode. You'll note that many elements have been added to your Web Part Zone. You can now copy this modified Web Part Zone over the existing zones in the other columns to give your page a uniform look (don't forget to switch back to Design mode and re-size the larger zones).
|
Related Reading
Programming ASP.NET
Building Web Applications and Services with ASP.NET 2.0
By JesseLiberty, DanHurwitz
Table of Contents
Index
Sample Chapter
|
Pages: 1, 2, 3, 4
|
Next Page |
[1] [2] [3] [4] Next
