ASP.NET Web Parts 入门教程

• 下载源代码 - 247.7 KB

引言

本文是对 ASP.NET Web Parts 的入门介绍。我们将尝试了解 Web Parts 究竟是什么，它们在 Web 开发中的作用以及如何在我们的应用程序中实现 Web Parts。

背景

在我们的应用程序中，有很多场景我们需要向用户收集/展示信息组。我们希望用户可以选择性地查看任何信息组。用户也可以选择不查看任何组。iGoogle 界面是 Web Parts 应用的绝佳示例。用户可以选择在页面上添加一些信息，甚至可以决定该 Web Part 的外观和位置。让我们尝试看看，如果我们想在 ASP.NET 中实现类似的功能，如何使用 Web Parts 来实现。

Using the Code

在 ASP.NET 术语中，Web Parts 是具有预定义功能的组件，可以嵌入到任何网页中。用户可以独立更改所有 Web Parts 的外观和数据相关参数。

Web Parts 的优点

• Web Parts 促进了页面内容的个性化。它们允许用户移动或隐藏 Web Parts，并添加新的 Web Parts 来改变页面布局。
• Web Parts 允许用户导出或导入 Web Parts 设置，以供其他页面使用。
• Web Parts 可以与 ASP.NET 基于角色的 Web 访问模型协同工作。每个 Web Part 都可以配置为对任何角色可见或隐藏。
• Web Parts 可以相互共享数据。

在开始编码之前，让我们先了解一些在实现 Web Parts 时有用的控件和术语。

• WebPartsManager：这是一个非可视化控件，必须添加到需要嵌入 Web Parts 的每个页面中。此控件将方便页面上不同 Web Parts 的管理。
• CatalogPart：此控件用于管理页面上所有可用 Web Parts 的 UI 元素。此控件负责管理整个网站的 Web Parts。
• PageCatalogPart：此控件提供与 CatalogPart 相同的功能，但它针对的是单个页面，而不是整个网站。
• EditorPart：此控件允许用户自定义 Web Parts 的属性。
• WebPartZone：此控件就像 Web Parts 的容器。任何 Web Part 都只能添加到 WebPartZone 中。
• EditorZone：此控件就像 EditorParts 的容器。任何 EditorPart 都只能添加到 EditorZone 中。
• CatalogZone：此控件就像 CatalogParts 的容器。任何 CatalogPart 都只能添加到 CatalogZone 中。

在详细介绍之前，让我们快速了解一下 Web Parts 可以拥有的不同模式。

Web Parts 模式

• 普通模式：用户无法编辑或移动页面部分。
• 编辑模式：最终用户可以编辑页面上的 Web Parts，包括 Web Parts 的标题、颜色，甚至设置自定义属性。
• 设计模式：最终用户可以重新排列 WebPartZone 中页面的 Web Parts 的顺序。
• 目录模式：最终用户可以在页面上的任何 WebPartZone 中添加新的 Web Parts 或恢复已删除的 Web Parts。

现在让我们看看如何在页面上添加 Web Parts。首先，我们将决定 Web Parts 的外观和位置。让我们决定三个 Web Parts 的位置。一个是网站的页眉部分，第二个是页脚部分，第三个是页面的内容部分。

1. 让我们在页面上添加一个 WebPartsManager 和三个 WebPartZones。
2. 添加了三个 Web Parts Zone 后，我们将在 headerzone 上添加一个标签 Web Part。
3. 在我们的内容区域添加日历、文本框和下拉列表。
4. 在页脚区域添加版权消息。
5. 我们还在页面上添加一个页面 catalogpart （稍后我们将了解其用途）。

页眉部分的标签将用于显示用户姓名。内容 Web Part 中的文本框将用于获取用户姓名输入。下拉列表将用于使用户能够更改 Web Parts 的外观，并允许他们将这些 Web Parts 拖放到任何区域。如果我们查看页面的标记

<form id="form1" runat="server">
    <div>
        <asp:WebPartManager ID="WebPartManager1" runat="server">
        </asp:WebPartManager>
         </div>
        <asp:WebPartZone ID="WebPartZoneHeader" runat="server" Height="1px" Width="865px"
	HeaderText="Welcome">
            <ZoneTemplate>
                <asp:Label ID="welcomeWebPart" runat="server" Text="User" title="Welcome"
	Width="199px"></asp:Label>
            </ZoneTemplate>
        </asp:WebPartZone>
        <asp:WebPartZone ID="WebPartZoneContent" runat="server" Height="1px" Width="865px"
	HeaderText="Pick a Day">
            <ZoneTemplate>
                 <asp:TextBox ID="TextBoxName" runat="server" Title="Enter your name">
                 </asp:TextBox>
                <asp:DropDownList ID="DropDownList1" runat="server" 
		Title="Change Display modes" AutoPostBack="True" 
		OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                </asp:DropDownList>
                <asp:Calendar ID="CalendarWebPArt" runat="server" title="Pick a day">
                </asp:Calendar>

            </ZoneTemplate>
        </asp:WebPartZone>
        <asp:CatalogZone ID="CatalogZone1" runat="server">
            <ZoneTemplate>
                <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
            </ZoneTemplate>
        </asp:CatalogZone>
        <asp:WebPartZone ID="WebPartZoneFooter" runat="server" Height="35px" Width="865px"
	HeaderText="Copyright">
            <ZoneTemplate>
                <asp:Label ID="footerWebPart" runat="server" Text="This is a test website."
		title="Copyright info"></asp:Label>
            </ZoneTemplate>
        </asp:WebPartZone>
    </form>

当我们运行页面时，我们可以看到用户可以查看这些 Web Parts，他们可以选择最小化、还原甚至关闭它们。下拉列表显示了页面上 Web Parts 的所有可能视图。我们用页面上 Webpartmanager 的所有可能模式填充了下拉列表，如果用户更改视图，我们将使用新值来设置 Web Parts 的视图模式。

protected void Page_Load(object sender, EventArgs e)
{
    welcomeWebPart.Text = TextBoxName.Text;
    if (IsPostBack == false)
    {
        foreach (WebPartDisplayMode mode in WebPartManager1.SupportedDisplayModes)
        {
            DropDownList1.Items.Add(mode.Name);
        }

        DropDownList1.SelectedValue = WebPartManager1.DisplayMode.ToString();
    }
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (WebPartManager1.SupportedDisplayModes[DropDownList1.SelectedValue] != null)
    {
        WebPartManager1.DisplayMode = WebPartManager1.SupportedDisplayModes
			[DropDownList1.SelectedValue];
    }
}  

不过有一个小问题。如果用户关闭了某个 Web Part，他将无法恢复该 Web Part。为了提供此功能，我们将使用我们在页面上添加的页面 catalogwebpart ，以便用户在目录模式下能够更改 Web Parts 的外观，甚至恢复已关闭的 Web Parts。

Web Parts 还可以使用其他 Web Parts 的数据。我们可以创建一个 ConnectionProvider 和一个 ConnectionConsumer ，然后使用 Webpart 管理器 的 static 连接属性来实现此目的。

关注点

我们所做的非常基础，文章的目的是让初学者了解在 ASP.NET 中拥有 Web Parts 和创建它们的可行性。我们没有在这里详细讨论 Web Parts。Web Parts 还有很多内容，一旦掌握，它们可以在网页布局方面大有作为，并为用户提供可定制的用户界面。

历史

• 2012 年 2 月 28 日：ASP.NET Web Parts 入门教程
• 2012 年 1 月 15 日：上传了一些高质量的图片。