What Are Web Parts?
from: http://windowsdevcenter.com/pub/a/windows/2006/01/10/what-are-web-parts.html
01/10/2006
Today's web application is customizable in ways that could on
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 on
to 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).
书籍：
Building a Web 2.0 Portal with ASP.Net 3.5 http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=pd_sim_b_1
开源项目 Dropthings 在 http://www.codeplex.com/dropthings
