What Are Web Parts?

ゝ一纸荒年。 2021-12-13 00:47 221阅读 0赞

from: [http://windowsdevcenter.com/pub/a/windows/2006/01/10/what-are-web-parts.html][http_windowsdevcenter.com_pub_a_windows_2006_01_10_what-are-web-parts.html]

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.

![What Are Web Parts? - geovindu - Geovin Du Dream Park][What Are Web Parts_ - geovindu - Geovin Du Dream Park]

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:

1.  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.)
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 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:

[![What Are Web Parts? - geovindu - Geovin Du Dream Park][What Are Web Parts_ - geovindu - Geovin Du Dream Park 1]][What Are Web Parts_ - geovindu - Geovin Du Dream Park_What Are Web Parts_ - geovindu - Geovin Du Dream Park 1]

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.

![What Are Web Parts? - geovindu - Geovin Du Dream Park][What Are Web Parts_ - geovindu - Geovin Du Dream Park 2]

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][http_www.amazon.com_Building-Web-2-0-Portal-ASP-Net_dp_0596510500_ref_pd_sim_b_1]

开源项目 Dropthings 在 [http://www.codeplex.com/dropthings][http_www.codeplex.com_dropthings]

转载于:https://www.cnblogs.com/geovindu/archive/2010/01/21/1653165.html

[http_windowsdevcenter.com_pub_a_windows_2006_01_10_what-are-web-parts.html]: http://windowsdevcenter.com/pub/a/windows/2006/01/10/what-are-web-parts.html
[Jesse Liberty]: http://windowsdevcenter.com/pub/au/239
[Yahoo]: http://www.yahoo.com/
[Charles Schwab]: http://www.schwab.com/
[What Are Web Parts_ - geovindu - Geovin Du Dream Park]: /images/20211210/28a7a4ac0fda4dd1acf86bb3ebabe50d.png
[download]: http://www.libertyassociates.com/pages/files/Web%20Parts.zip
[What Are Web Parts_ - geovindu - Geovin Du Dream Park 1]: http://windowsdevcenter.com/windows/2006/01/10/graphics/fig2_sm.gif
[What Are Web Parts_ - geovindu - Geovin Du Dream Park_What Are Web Parts_ - geovindu - Geovin Du Dream Park 1]: /images/20211210/7f56bc17b9e8491b9dea7f4edb84e098.png
[What Are Web Parts_ - geovindu - Geovin Du Dream Park 2]: /images/20211210/8f83468b46f0475bb820abc11ba92a0c.png
[http_www.amazon.com_Building-Web-2-0-Portal-ASP-Net_dp_0596510500_ref_pd_sim_b_1]: http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=pd_sim_b_1
[http_www.codeplex.com_dropthings]: http://www.codeplex.com/dropthings