[翻译]在asp.net 2.0中使用WebParts

原文地址： http://dotnetslackers.com/articles/aspnet/UsingWebPartsInASPNet20.aspx
[译者改后代码下载]

[翻译]在asp.net 2.0中使用WebParts

原文发布日期：2007.03.01
作者： Abdul Sami
翻译： webabcd


介绍
如果说WebParts是web中一个非酷的效果的话，我想没有人会怀疑。WebParts为我们提供了对页中的对象进行拖拽的功能，它也可以在runtime的时候改变对象的标题、边框样式等。在WebParts出现之前，要实现这个功能是一项令人非常头痛的工作，因为我们必须写大量的JavaScrip，还要把页中每个对象的状态保存到数据库中。


WebParts有两个基本的东东
    ·WebPartManager
    ·WebPart Zones


WebPartManager
WebPartManager用来管理所有的webparts。如果你想在你的web站点中使用webparts就必须要使用WebPartManager。它的作用是提供你在页中进行拖拽的JavaScript代码

WebPart Zones
WebPart Zones中有4个zone
    ·WebPartZone
    ·EditorZone 
    ·CatalogZone 
    ·ConnectionZone


WebPartZone
WebPartZone是webparts里最基本的单位。通过在WebPartZone里放置不同的内容，我们就能够允许用户在页上对其进行拖拽。你可以在你的页上增加一个DropDownList以实现使用不同zone的功能，该DropDownList的选项如下
    ·Browse
    ·Design
    ·Edit
    ·Catalog
    ·Connect

在DropDownList的SelectedIndexChanged事件里粘贴如下代码（这里假设DropDownList的id是“cmbOptions”，WebPartManager的id是“WebPartManager1”）

if  (cmbOptions.SelectedValue  ==   " Design " )
{
  WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
}
else   if  (cmbOptions.SelectedValue  ==   " Browse " )
{
  WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
else   if  (cmbOptions.SelectedValue  ==   " Catalog " )
{
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}
else   if  (cmbOptions.SelectedValue  ==   " Edit " )
{
  WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
}
else   if  (cmbOptions.SelectedValue  ==   " Connect " )
{
  WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;
}

Browse mode
Browse mode是webparts的默认模式。在Browse mode中虽然我们不能拖拽webpart，但是可以在webpart上看到两个选项，最小化和关闭。最小化一个webpart会显示它的最小化状态，如果选择关闭的话我们就只能在Catalog mode下重新恢复它，稍后我们会讨论它。这里有一个Browse mode下简单的webpart的图例



Design mode
在Design mode中我们就可以在两个webpart对象间进行拖拽了。我这里有两个webpart，分别被命名为“Links”和“Search”。下图示例了把“Links”拖拽到“Search”的情况



Edit Mode
Edit Mode允许你在runtime中编辑webpart。编辑webpart是一个比较深层次的应用，它分为4个类型:Appearance、Behavio、Property和Layout。我们首先来看看如何使用Appearance和LayoutEditorPart


Appearance和LayoutEditorPart
首先在web form上放置一个EditorZone。然后在EditorZone里放置一个AppearanceEditorPart和LayoutEditorPart。运行这个程序，从DropDownList中选择编辑模式。在可用的webpart上单击菜单的编辑按钮。


你会看到如下图所示的显示


你可以在这里改变webpart的标题。我们也可以看到编辑模式下的一些基本选项。镶边类型是边框和标题的样式。镶边状态可以让你设置是否最小化它


PropertyGridEditorPart
通过使用属性编辑器我们可以改变webpart中对象的属性。在我们的例子中将示例如何改变对象的CssClass属性。我们将用与解释AppearanceEditorPart和LayoutEditorPart相同的方法来说明它

在webform上放置一个EditorZone。然后在EditorZone里放置一个PropertyGridEditorPart。为了使用EditorZone我们需要在你的项目里新增一个用户控件。在这个用户控件里放置一个TextBox，然后再把这个用户控件放到web form的webpart里。该用户控件的后置代码如下

string  _cssClass  =   " FrmTxtBox " ;
[WebBrowsable(), Personalizable( true )]
public   string  CssClass
{
  get { return _cssClass; }
  set { TextBox1.CssClass= value; }
}

protected   void  Page_Load(Object sender, EventArgs e)
{
  TextBox1.CssClass = CssClass;
}

上面的代码用于改变TextBox的CssClass属性。这个属性可以在webpart的编辑模式中修改，同时我们也可以在runtime的时候改变它。此外我们也给CssClass附加了两个修饰属性
    ·WebBrowsable - 允许webpart在编辑模式中显示用户定义的属性 
    ·Personalizable - 允许属性是可编辑的

现在运行这个页。如果我们设置了WebPartManager为编辑模式的话，就将会看到webpart的菜单选项中出现了编辑按钮。截屏如下


在webpart的菜单中单击编辑按钮，就会看到编辑模式里有一个CssClass属性。截屏如下：


我们可以看到TextBox使用FrmTxtBox作为默认值（样式表的class）。这个样式把边框的颜色定义为黑色。我们现在可以使用不同的样式class，比如我们有一个名为“CustomClass1”的样式class，它定义为没有边框。输入这个值后按OK按钮，你将会看到新的边框样式


使用这种方法我们就可以改变webpart里对象的属性


Catalog mode
Catalog mode给我们提供了在运行时添加和移除webpart的选项。例如，如果我们有一些模块，如天气模块、新闻模块、购物模块和占卜模块等等。如果想在运行时给用户提供显示和隐藏这些模块的选项，我们就可以使用Catalog mode来完成这项任务。


CatalogZone
CatalogZone分为3个类型，分别是PageCatalogPart、DeclarativeCatalogPart和ImportCatalogPart。在webform上增加一个CatalogZone，然后在CatalogZone内添加之前提到的3个类型。当webpart被关闭后我们可以用PageCatalog来帮我们来显示webpart，截屏如下：


PageCatalogPart用于显示被关闭的webpart列表。DeclarativeCatalogPart用于显示该声明下的webpart列表。图例如下：



ImportCatalog
ImportCatalog用来显示导入的webpart列表。我们可以导入扩展名为.WebPart的文件。如果要导出类型为.WebPart的文件你需要在web.config增加如下元素

< webParts  enableExport ="true" ></ webParts >

然后我们有两种方法可以实现导出功能
设置控件的属性ExportMode的值为All。如果你的控件继承自WebPart就可以这么做，代码如下

< aspSample:CustomWebPart  id ="Sample"  runat ="server"  ExportMode ="All"   />

或者在Page_Load里写如下代码

GenericWebPart gwp  =  WebUserControl2_1.Parent;
gwp.ExportMode  =  WebPartExportMode.All;

通过导入功能我们就可以增加任何webpart了，图例如下



Connect mode
Connect mode允许各个webpart之间可以互相通信。用户可以依照他们的需要在运行时创建他们的连接。这个连接并不是让webpart连接到数据库，而是webpart之间的互相连接。例如，如果有一个webpart里包含一个grid，它要根据用户的输入显示相应的记录，而用户使用的TextBox在另一个webpart里，此时就要使用Connect mode发送数据。

在我们的例子里，我们将在一个页里放置两个webpart。一个负责用户输入，另一个负责显示。在你的web站点里新建两个用户控件，分别命名为“Provider”和“Consumer”，并把它们放到相应的webpart里。在App_Code文件夹里新建一个名为“ITextProvicer”的类。代码如下：

public   interface  ITextToPass
{
  string GetText();
}

我们会在Provider和Consumer两个用户控件中使用这个接口，以实现在这两个实体之间传送数据

在Provider用户控件里放置一个TextBox，并输入如下后置代码

public  partial  class  ProviderWebPart : System.Web.UI.UserControl, ITextToPass
{  
  [ConnectionProvider("TextToPass", "TextProvider")]
  public ITextToPass GetTextTransferInterface()
  {
    return ((ITextToPass)(this));
  }

  public string GetText()
  {
    return TextBox1.Text;
  }
}

你可以看到它实现了我们刚刚创建的ITextToPass接口。通过使用这个接口，我们可以返回用户输入的文本并传递给Consumer用户控件。

下一步在Consumer用户控件里放置一个Label，并在.cs文件里添加如下代码

[ConnectionConsumer( " Text " ,  " TextConsumer " )]
public   void  GetTextTransferInterface(ITextToPass provider)
{
  Label1.Text = provider.GetText();
}

现在选择WebPartManager的Connection mode，我们就可以在webpart的菜单上看到“连接”选项


当我们单击了webpart菜单的“连接”的时候，会看到如下图所示的情况


单击“创建提供者连接”，你会看到如下所示。然后从DropDownList里选择“Consumer”选项。


一旦创建完连接，就允许你在“Provider”中输入文本，如下图所示


单击按钮后“Consumer”的Label控件就会显示你输入的值


通过这种方法我们就可以在webpart之间传输数据。


保存页面状态
在运行我们的项目之前，有一个问题就是如何保存不同用户的不同页面状态呢？为了保存用户对页的修改，我们就需要把这些设置保存到数据库里。在我的例子中使用到了注册和登录控件。

首先你要在你的web.config设置验证模式为“Forms”。然后在你的项目中新建一个webform并取名为Login.aspx。拖拽一个Login控件到页上，设置它的DestinationPageUrl属性为Default.aspx。在你的项目中再新建另一个webform，取名为Signup.aspx，拖拽一个CreateUserWizard控件在此页上。如此用户就可以注册和登录了。另外你还要确保SqlExpress服务正在运行中。我们使用asp.net自动在App_Data文件夹内创建的ASPNETDB.mdf为默认数据库。这个数据库已经提供了保存不同用户的不用页设置的相关表和存储过程。其在Visual Studio环境中的截图出示如下


“PersonalizationPerUser”表就用于保存每个用户的不用页设置状态。它将一个序列化的值保存到PageSettings字段里。幸运的是我们不用接触这个表，因为asp.net 2.0给我们提供了必需的API


创建数据库
为了创建一个数据库来保存我们的页设置状态，需要运行“aspnet_regsql.exe”工具。这个工具在本地的/Windows/Framework/v2.0.50727文件夹里。它可以帮助我们创建所需的表和存储过程。该工具向导的截屏如下


该工具会创建如下这些表


最后我们要做的工作就是在web.config里做一些配置。下面将告诉你如何做，基本上就是要确保启动Membership和Profile特性。请注意其中的<Clear />标签，它将移除machine.config中的相应标签。我们还要增加一个连接字符串以指向我们的数据库，我把它命名为“Database1”

< connectionStrings >
  < clear />
  < add  name ="LocalSqlServer"  
   connectionString ="data source=127.0.0.1;database=Database1;
   user id=sa ;password=sa" />
</ connectionStrings >
< system .web >
  < compilation  debug ="true" />
  < authentication  mode ="Forms"   />
  < membership >
   < providers >
   < clear />
   < add  name ="AspNetSqlMembershipProvider"  
    type ="System.Web.Security.SqlMembershipProvider, System.Web, 
    Version=2.0.0.0, Culture=neutral,PublicKeyToken=b03f5f7f11d50a3a"
    connectionStringName ="LocalSqlServer"
    applicationName ="/CustomConnections"   />
   </ providers >
  </ membership >

  < profile  enabled ="true"  defaultProvider ="TableProfileProvider" >
   < providers >
   < clear />
   < add  name ="TableProfileProvider"
     type ="Microsoft.Samples.SqlTableProfileProvider"
     connectionStringName ="LocalSqlServer"
     table ="asdspnet_Profile"
      applicationName ="/CustomConnections" />
   </ providers >
   </ profile >
</ system.web >

总结
webparts为我们提供了一个在运行时自定义web站点的简单方法。它是从SharePoint中提取出来，并引进到asp.net 2.0中的。我们已经在本文中测试了它的一些基本用法，如使用不同类型的webpart和使用自定义数据库等等。