Web 部件入门

Abdul Sami, PMP

4.33/5 (25投票s)

2007年3月1日

9分钟阅读

179578

简要介绍如何在应用程序中使用 WebParts

引言

可以说，Web Parts 将是基于 Web 的管理系统的未来。Web Parts 提供了在页面上拖放对象、更改标题、边框样式、对象属性等功能。在 Web Parts 出现之前，这是一项繁琐的任务，因为我们需要编写大量的 JavaScript 并将内容的状态保存在数据库中。

Web Parts 有两个基本组成部分：

Web Part 管理器。
Web Part 区域。

Web Part 管理器

Web Part 管理器是幕后 Web Parts 的管理器。我们通常不会在代码或设计模式下对 Web Part 管理器做太多操作。

Web Part 区域

Web Parts 中有四种区域：

Web Part 区域
编辑器区域
目录区域
连接区域

Web Part 区域

这是 Web Parts 的基本单元。通过将不同的内容放置在 Web Part 区域中，我们可以允许用户在页面上拖放内容。

要使用不同的区域，请放置一个下拉列表并添加以下项目：

浏览
显示
未使用。
Catalog
连接

在此下拉列表的 onChangeIndex 事件中编写以下代码。

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;
}

1：浏览模式

浏览模式是 Web Parts 的默认模式。在浏览模式下，我们不能拖放 Web Parts，但我们可以看到两个选项：最小化和关闭。最小化 Web Part 仍会显示它，但处于最小化状态。如下面的屏幕截图所示。

如果选择关闭，则只能在目录模式下恢复它，我们将在本文后面介绍如何使用它。

2：设计模式

在设计模式下，我们可以像在以下屏幕截图中看到的那样，在 Web Parts 之间拖放对象。有两个 Web Parts 分别名为“链接”和“搜索”。

3：编辑模式

在编辑模式下，我们甚至可以在运行时编辑 Web Parts。Web Part 的编辑进一步分为四种类型：外观、行为、属性、布局。我们将首先了解如何使用 AppearanceEditorPart 和 LayoutEditorPart。

AppearanceEditorPart 和 LayoutEditorPart

将编辑器区域放置在页面上。

将 AppearanceEditorPart、LayoutEditorPart 放置在编辑器区域中。

运行应用程序并从选项框中选择编辑模式。

从 Web Parts 可用的菜单中点击“编辑”。

您将看到以下输出。

我们可以在这里更改 Web Parts 的标题。我们在编辑模式下看到一些基本选项。Chrome 类型与边框和标题样式有关。Chrome 状态使我们能够选择最小化它或不。

PropertyGridEditorPart

通过使用属性编辑器，我们可以更改 Web Parts 中对象的属性。在我们的示例中，我们将更改对象的 CSSClass 属性。为此，我们将遵循与编辑器区域相同的方法。

将编辑器区域放置在页面上。
将 PropertyGridEditorPart 放置在编辑器区域内。

要使用编辑器区域，请在项目中添加一个新的用户控件。

在该控件上放置一个文本框。
将此用户控件放置在 Web 窗体的一个 Web Part 中。

在用户控件的代码隐藏中写入以下代码。

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;
}

正如我们在上面的代码中看到的，我们通过使用属性更改了文本框的 css 类。我们将在 Web Parts 的编辑模式下更改此属性值。

WebBrowsable() 属性

它允许 Web Part 在编辑模式下显示属性到 Web 浏览器。

Personalizable() 属性

它允许属性可编辑。

现在运行此页面。假设我们从选项组合框中选择编辑模式。我们将看到 Web Part 选项菜单中的以下编辑按钮。

选择 Web Part 菜单中的编辑链接后，我们将在编辑模式下看到 CssClass 属性。

如我们所见，此文本框默认应用了名为 FrmTxtBox 的类。它在样式表中定义，并具有黑色边框颜色的属性。

要应用一个名为 CustomClass1 的类，我在样式表中创建了这个类，并且这个类在样式表中没有定义边框颜色。

更改 CssClass 名称后，按确定按钮。您将看到具有默认边框样式的文本框。

就这样，我们通过 Web Parts 更改了对象的属性。

4：目录模式

目录模式允许我们在运行时添加/删除 Web Parts。例如，我们有一些模块，如天气、新闻、购物、星座等，并希望在运行时为用户提供显示或隐藏这些模块的选项，我们可以通过目录模式来实现此任务。

目录区域进一步分为三种类型：页面、声明式、导入。

在页面上添加 CatalogZone，然后将 PageCatalogPart、DeclarativeCatalogPart、ImportCatalogPart 添加到 CatalogZone 中。

我们可以通过 Page catalog 显示被“关闭”选项关闭的 Web Parts，正如您在下面的屏幕截图中看到的。

Page catalog 显示使用此选项关闭的 Web Parts 的数量。

Declarative catalog 显示在设计模式下添加到目录区域的元素数量。单击声明式目录区域的智能标签选项并选择编辑模板。在目录区域中添加控件。

Import Catalog 显示选择导入的元素数量。

我们可以导入扩展名为 '.WebPart' 的文件。

要将文件导出为 .WebPart 类型的文件，请在 web.config 中添加以下行。

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

然后我们可以遵循以下两种方法之一：

1. 将控件的 ExportMode 属性设置为 all。如果您的控件派生自 WebPart，则可以在标记中执行此操作，如下例所示。

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

2. 或者在页面加载时编写以下代码。

Dim gwp As GenericWebPart
gwp = WebUserControl2_1.Parent
gwp.ExportMode = WebPartExportMode.All

现在，我们可以通过选择要添加的控件和区域，将这些 Web Parts 中的任何一个添加到页面上。

连接模式

此模式允许 Web Parts 相互通信。我们可以一次性（在我们的代码中）建立静态连接，也可以允许用户根据自己的需求在运行时建立连接。

连接模式不意味着连接到数据库，而是连接 Web Parts。例如，如果我们有一个包含网格的 Web Part，显示一些记录，并且我们想根据用户输入对其进行过滤。我们可以在另一个 Web Part 中放置一个用于用户输入的文本框，并使用连接模式传递文本。

在我们的示例中，我们将在页面上放置两个 Web Parts。一个用于用户输入，另一个用于显示。

创建两个用户控件，一个命名为 provider，另一个命名为 consumer。将这两个控件放置在 Web Parts 中。在 App_Code 目录中添加一个新类，并命名为 ITextProvider。

在其中输入以下代码。

public interface ITextToPass
{
    string GetText();
}

我们将在此接口中同时在 provider 和 consumer 用户控件中使用此接口来传递这两个实体之间的文本。

在 Provider 用户控件中放置一个文本框，并在代码隐藏中写入以下文本。

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

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

如您所见，我们正在实现刚刚创建的接口。通过使用此接口，我们返回文本框中输入的文本以传递给 consumer 用户控件。

使用 ConnectionProvider 属性意味着公开 Web Part 暴露了连接点。有关详细信息，您可以阅读以下文章。

在 consumer Web Part 中放置一个标签，并在其 .cs 文件中写入以下代码。

public partial class ConsumerWebpart : System.Web.UI.UserControl
{
    [ConnectionConsumer("Text", "TextConsumer")]
    public void GetTextTransferInterface(ITextToPass provider)
    {
        Label1.Text = provider.GetText();
    }
}

Consumer 连接点不返回值。它通过使用 ITextToPass 接口来利用来自 provider 的值。

现在，当选择 WebpartManager 的连接模式时，我们可以在 Web Part 的菜单中看到连接选项。