这个实践演示了如何使用 Web 部件控件来创建 Web 页面。
Web 部件在多数 Web 应用程序中用来更改内容的外观，并且允许用户根据自己的需要对内容进行选择和排列。ASP.NET Web 部件特征由一个控件集所组成，该控件集用来创建展示模块化内容的 Web 页面，并且允许用户对外观和内容进行更改以符合他们各自的习惯。关于 Web 部件的常规介绍，请参考“ASP.NET Web 部件概览”。关于 Web 部件控件集中对主要组件的描述，其中有一部分已经在该实践中被使用，请参考“Web 部件控件集概览”。
在这个实例中，你将使用 Web 部件的控件集创建一个 Web 页面，用户可以对该页面进行更改或者个性化。该实践中的任务包括有：
-
在页面中添加 Web 部件控件。
-
创建一个自定义用户控件并把它当作 Web 部件控件来使用。
-
允许用户个性化页面中的 Web 部件控件集的布局。
-
允许用户编辑 Web 部件控件的外观。
-
允许用户从可用的 Web 部件控件目录中进行选择。
先决条件
为了完成该实践，你将需要：
-
在计算机中安装用于托管网站的 Internet 信息服务（IIS）并且进行配置。关于 IIS 的安装和配置的详细内容，请参考被安装的 IIS 帮助文档，或者参考 Microsoft TechNet 网站中的在线 IIS 文档（Internet 信息服务 6.0 技术资源）。
-
一个可以识别单独用户的 ASP.NET 网站。如果你已经拥有一个已配置网站，那么你就可以把它作为该实践的开始。如果没有，关于创建虚拟目录或网站的详细内容，请参考“ASP.NET 实践：在 IIS 中创建并配置虚拟目录”或者“ASP.NET 实践：在 IIS 中创建并配置本地 ASP.NET 网站”。
-
一个已配置的个性化提供者和数据库。Web 部件的个性化在默认时是可用的，并且它使用 Microsoft SQL Server 标准版本的 SQL 个性化提供者（
SqlPersonalizationProvider）来保存个性化数据。该实践使用了 SSE 和默认的 SQL 提供者。如果你已经安装了 SSE，就不需要进行任何的配置。SSE 是安装在 Microsoft Visual Studio 2005 中的一个可选部分，在默认时是可用的，或者也可以从 Microsoft.com 免费下载。要使用完整版本的 SQL Server，你必须安装并配置一个 ASP.NET 应用程序服务数据库，并且配置 SQL 个性化提供者以连接到该数据库。详细内容，请参考“在 SQL Server 中创建并配置应用程序服务数据库”。你也可以创建并配置一个自定义的提供者以用于其他方面（如非 SQL Server 的数据库或其他类型的存储方案）。更多详细信息和实例请参考“实现成员资格提供者”。
创建一个使用 Web 部件的简单页面
在这个部分，你将创建一个使用 Web 部件来显示静态内容的页面。使用 Web 部件的第一个步骤就是创建一个页面结构来包含 Web 部件的控件集。
提示：你不需要为 Web 部件个性化的启用做任何事情；Web 部件控件集在默认时是可用的。当你第一次运行网站中的 Web 部件页面的时候，ASP.NET 会设置一个默认的个性化提供者来存储用户的个性化设定。这个默认的提供者使用一个被创建在网站子目录中的数据库。关于个性化的详细内容，请参考“Web 部件个性化概览”。
如何创建 Web 页面
-
在你的文本编辑器中，创建一个新的文件并且在文件的开始部分添加如下页面定义。
<%@ page language="C#" %>
-
在页面定义的下面，输入标记来创建一个完整的页面结构，如下实例。注意页面中包括了一个拥有一行三列的空表格。该表格中将会包含在稍后内容中将要添加的 Web 部件控件集。
<html> <head runat="server"> <title>Web 部件页面</title> </head> <body> <h1>Web 部件演示页面</h1> <form runat="server" id="form1"> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> </tr> </table> </form> </body> </html> -
把文件命名为 WebPartDemo.aspx，然后保存到网站的目录中。
下一个步骤就是设置区域。区域是页面中用于控件组合的一个指定范围，包含了 Web 部件的控件集。
如何在页面中添加区域
-
在
<form>元素的下面添加一个<Asp:WebPartManager>元素，如下实例。<asp:webpartmanager id="WebPartManager1" runat="server" />
WebPartManager控件在每一个使用 Web 部件控件集的页面中都是必需的。 -
在表格的第一个
<td>元素中添加一个<Asp:WebPartZone>元素，然后指定它的属性值，如下实例。注意<Asp:WebPartZone>元素中也包含了一个<ZoneTemplate>元素；所有的 Web 部件的控件集都被放在<ZoneTemplate>元素中。<table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> <asp:webpartzone id="SideBarZone" runat="server" headertext="Sidebar"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td> -
在表格的第二个
<Td>元素中添加一个<Asp:WebPartZone>元素，然后指定它的属性值，如下实例。<td valign="top"> <asp:webpartzone id="MainZone" runat="server" headertext="Main"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td> -
保存文件 WebPartsDemo.aspx。
页面中现在已经拥有两个能够分开进行控制的单独区域。但是，它们都并没有包含任何内容，所以我们将在下一个步骤中创建内容。在该实践中，你将使用 Web 部件的控件集来显示静态的内容。
Web 部件区域的布局由一个 <ZoneTemplate> 元素来指定。在区域模板的内部，不管它是自定义的 Web 部件控件、还是用户控件、或者是现有的服务器控件，你都可以向其中添加任何一种 Web 服务器控件。注意在该实践中你使用了 Label 服务器控件，并且在该控件中简单地添加了静态的文本。当你把常规的 ASP.NET 服务器控件放到一个 WebPartZone 区域中的时候，ASP.NET 会在运行时把它当成一个 Web 部件的控件，并允许你在标准的服务器控件中使用大部分 Web 部件的特征。
如何为区域创建内容
-
在区域 Main 的
<ZoneTemplate>元素中添加一个包含静态内容的<Asp:Label>元素，如下实例。<asp:webpartzone id="MainZone" runat="server" headertext="Main"> <zonetemplate> <asp:label id="contentPart" runat="server" title="Content"> <h2>欢迎来到我的主页</h2> <p>请使用链接来访问我收藏的网站！</p> </asp:label> </zonetemplate> </asp:webpartzone> -
保存文件 WebPartsDemo.aspx。
-
在文本编辑器中创建一个新文件。该文件将会包含一个同样能够被当成 Web 部件控件而被添加到页面中的用户控件。
提示：该实践中的搜索控件并没有实现真正的搜索功能；它仅用于演示 Web 部件的特征。
-
在新文件的顶部，添加一个控件声明，如下实例。
<%@ control language="C#" classname="SearchUserControl" %>
-
在控件声明的下面，添加一个
<script>标记对，然后在其中添加创建一个自定义属性的代码。注意ResultsPerPage属性中有一个Personalizable参数。这个属性允许控件的用户对每个页面所返回的搜索结果的数量进行定制，如果你为用户界面（UI）还提供了一个编辑控件以便在设计视图中更改这个设定。你的控件中的代码应该如下实例。<%@ control language="C#" classname="SearchUserControl" %> <script runat="server"> private int results; [Personalizable] public int ResultsPerPage { get {return results;} set {results = value;} } </script> -
在
<script>元素的下面添加一个文本输入框和一个按钮来为搜索控件提供基本的 UI，如下实例。<asp:textbox runat="server" id="inputBox"></asp:textbox> <br /> <asp:button runat="server" id="searchButton" text="Search" />
-
把文件命名为 SearchUserControlVB.ascx 或 SearchUserControlCS.ascx（这取决于你所使用的编程语言），然后保存到与 WebPartsDemo.aspx 页面相同的目录中。
安全提示：这个控件拥有一个文本输入框以接受用户的输入，所以存在一个潜在的安全隐患。Web 页面的用户输入中可以潜在地包含有恶意的客户端脚本。默认时，ASP.NET Web 页面会验证用户的输入，以确保输入的内容中没有包含 HTML 元素或者脚本。当验证被启用的时候，你不需要明确地对用户的输入进行检查。详细内容，请参考“脚本利用概览”。
现在你可以在 Sidebar 区域中添加 Web 部件控件了。你将在 Sidebar 区域中添加两个控件，一个包含链接的列表而另一个就是你在上一个步骤中创建的用户控件。这些链接以简单的标准 Label 服务器控件的方式被添加，这与你在 Main 区域中创建静态文本的方式类似。但是，虽然用户控件中所包含的单独的服务器控件可以被直接包含到区域中，但在这里它们不是这样。相反，它们是你在上一个步骤中创建的用户控件中的一部分。这演示了无论是对控件以及额外功能进行封装，还是应该在区域中把用户控件当作 Web 部件控件进行引用时的一个通用做法。
在运行时，Web 部件的控件集会同时封装控件与 GenericWebPart 控件集。当一个 GenericWebPart 控件封装了一个 Web 服务器控件的时候，常规的部件控件就会成为父控件，同时你可以通过父控件的 ChildControl 属性来访问服务器控件。常规的部件控件的这种用法允许标准的 Web 服务器能够拥有与 Web 部件控件（继承自 WebPart 类）相同的基本行为和参数集。
如何为 Sidebar 区域创建内容
-
在文本编辑器中打开 WebPartsDemo.aspx 页面。
-
在页面的顶部，在页面声明的下面，添加如下定义以对你创建的用户控件进行引用。
<%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolcs.ascx" %>
-
在 Sidebar 区域的
<ZoneTemplate>元素中，添加一个包含若干链接的Label控件。在该控件之下，引用你在前面所创建的用户控件，如下实例。<asp:webPartZone id="SidebarZone" runat="server" headertext="Sidebar"> <zonetemplate> <asp:label runat="server" id="linksPart" title="Links"> <a href="www.asp.net">ASP.NET 官方网站</a> <br /> <a href="www.gotdotnet.com">GotDotNet</a> <br /> <a href="www.contoso.com">Contoso.com</a> <br /> </asp:label> <uc1:SearchUserControl id="searchPart" runat="server" title="Search" /> </zonetemplate> </asp:WebPartZone> -
保存文件 WebPartsDemo.aspx。
现在你可以对页面进行测试了。
如何测试页面
-
在浏览器中载入这个页面。
该页面显示了两个区域。页面中的每个控件都在它们的标题栏中显示了一个向下的箭头，该箭头中包含了一个被称为“动作菜单”的下拉式菜单，菜单中包含的是用户能够在服务器控件中完成的动作（如关闭、最小化、或者编辑某个控件）。动作菜单中的每一个项目都针对一个特定的动作。如下图示的页面屏幕快照。
WebPartsDemo 页面
-
在控件的标题栏中单击向下的箭头会显示它们的动作菜单，单击 Minimize 链接，注意控件已经被最小化。然后返回到动作菜单中并单击 Restore。这样就演示了如何切换 Web 部件控件的不同的可视化显示状态。
允许用户编辑页面并更改布局
Web 部件为用户提供了对 Web 部件控件的布局进行更改的能力，用户可以把 Web 部件控件从一个区域拖动到另一个区域当中。除了允许用户移动 WebPart 控件之外，你还可以允许用户对控件的若干特征进行编辑，包括它们的外观、布局、以及行为。Web 部件控件集为 WebPart 控件提供了基本的编辑功能。虽然我们在该实践中没有这样做，但你同样可以创建自定义的编辑器控件以允许用户对 WebPart 控件的特征进行编辑。这与更改 WebPart 控件的位置一样，当然，对属性所作的更改也依赖于 ASP.NET 的个性化特征对更改所作的保存。
在这个部分，你为用户添加了能够为页面中任何一个 WebPart 控件的基本特征进行编辑的能力。要启用这些特征，你需要在页面中添加另一个自定义用户控件，该控件将与一个 <Asp:EditorZone> 元素和两个编辑控件联系在一起。
如何创建允许更改页面布局的用户控件
-
在编辑器中创建一个新文件，粘贴下列代码。这个代码使用 Web 部件控件集的特征以允许页面能够对它的视图或者显示模式进行更改，并且也允许你在特定的显示模式下对页面的物理外观和布局进行更改。
<%@ control language="C#" classname="DisplayModeMenuCS"%> <script runat="server"> // 使用一个字段来引用当前 WebPartManager 控件。 WebPartManager _manager; void Page_Init(object sender, EventArgs e) { Page.InitComplete += new EventHandler(InitComplete); } void InitComplete(object sender, System.EventArgs e) { _manager = WebPartManager.GetCurrentWebPartManager(Page); String browseModeName = WebPartManager.BrowseDisplayMode.Name; // 使用被支持的显示模式的名称来填充下拉列表。 foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes) { String modeName = mode.Name; // 在添加之前确定至少已经有一个模式已经被启用。 if (mode.IsEnabled(_manager)) { ListItem item = new ListItem(modeName, modeName); DisplayModeDropdown.Items.Add(item); } } // 如果该用户允许使用共享范围，则显示范围切换 UI 并根据当前用户的所在范围设置相应的单选按钮的被选择状态。 if (_manager.Personalization.CanEnterSharedScope) { Panel2.Visible = true; if (_manager.Personalization.Scope == PersonalizationScope.User) RadioButton1.Checked = true; else RadioButton2.Checked = true; } } // 更改页面为被选择的显示模式。 void DisplayModeDropdown_SelectedIndexChanged(object sender, EventArgs e) { String selectedMode = DisplayModeDropdown.SelectedValue; WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode]; if (mode != null) _manager.DisplayMode = mode; } // 设置被选择项目等于当前显示模式。 void Page_PreRender(object sender, EventArgs e) { ListItemCollection items = DisplayModeDropdown.Items; int selectedIndex = items.IndexOf(items.FindByText(_manager.DisplayMode.Name)); DisplayModeDropdown.SelectedIndex = selectedIndex; } // 为页面重置所有用户的个性化数据。 protected void LinkButton1_Click(object sender, EventArgs e) { _manager.Personalization.ResetPersonalizationState(); } // 如果没有在用户个性化范围之内，则对范围进行切换。 protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.Scope == PersonalizationScope.Shared) _manager.Personalization.ToggleScope(); } // 如果没有在共享范围之内，并且用户拥有相关的权限，则对范围进行切换。 protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.CanEnterSharedScope && _manager.Personalization.Scope == PersonalizationScope.User) _manager.Personalization.ToggleScope(); } </script> <div> <asp:Panel ID="Panel1" runat="server" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" runat="server" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <div> <asp:DropDownList ID="DisplayModeDropdown" runat="server" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" runat="server" Text="重围用户状态" ToolTip="为页面重置当前用户的个性化数据。" Font-Size="8" OnClick="LinkButton1_Click" /> </div> <asp:Panel ID="Panel2" runat="server" GroupingText="个性化范围" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" runat="server" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div> -
把文件命名为 Displaymodemenu.ascx，并保存到与前面所保存页面的相同目录中。
如何允许用户更改布局
-
在 WebPartsDemo.aspx 页面中，添加一个
<register>指令在页面中注册新的用户控件。<%@ register TagPrefix="uc2" TagName="DisplayModeMenuCS" Src="DisplayModeMenu.ascx" %>
-
在 WebPartsDemo.aspx 页面中，直接在
<Asp:WebPartManager>元素下面添加一个指令对该用户控件进行引用。<uc2:DisplayModeMenuCS ID="DisplayModeMenu1" runat="server" />
-
在第三个
<td>元素中添加一个<Asp:EditorZone>元素。再为<Asp:EditorZone>元素添加一个<ZoneTemplate>元素、一个<Asp:AppearanceEditorPart>元素、以及一个<Asp:LayoutEditorPart>元素。如下实例。<td valign="top"> <asp:editorzone id="EditorZone1" runat="server"> <zonetemplate> <asp:appearanceeditorpart runat="server" id="AppearanceEditorPart1" /> <asp:layouteditorpart runat="server" id="LayoutEditorPart1" /> </zonetemplate> </asp:editorzone> </td>提示：该实践中只使用了
AppearanceEditorPart和LayoutEditorPart控件，而没有使用BehaviorEditorPart和PropertyGridEditorPart控件，这是因为后者需要在该实践所讨论的范围之外进行额外的设置。 -
保存 WebPartsDemo.aspx 文件。现在你已经创建了一个能够对显示模式和页面布局进行更改的用户控件，同时你也已经引用了主 Web 页面中的控件。
现在你可以对编辑页面和更改布局的能力进行测试了。
如何测试布局的更改
-
在浏览器中载入该页面。
-
单击 Display Mode 下拉菜单，同时选择 Edit。区域的标题将被显示。
-
通过 Links 控件的标题栏把它从 Sidebar 区域中拖动到 Main 区域的底部。你的页面看上去应该像下列屏幕快照。
被编辑的 Web 部件页面
-
单击 Display Mode 下拉菜单，同时选择 Browse。页面被刷新，区域的名称不见了，同时 Links 控件保持在你指定的位置。
-
要示范个性化是否已经工作，关闭浏览器，然后重新载入页面。你所作的更改被保存在未来的浏览器会话当中。
-
从 Display Mode 菜单，选择 Edit。
-
单击 Links 控件上的箭头来显示动作菜单。单击 Edit 动作。
EditorZone 控件出现，显示了你添加的 EditorPart 控件。
-
在编辑控件的 Appearance 部分，更改 Title 的值为 My Favorites，使用 Chrome Type 下拉列表来选择 Title Only，然后单击 Apply。如下屏幕快照显示了仍在编辑模式的被修改页面。
显示拥有 EditorZone 控件的被修改页面
-
单击 Display Mode 菜单，同时选择 Browse 返回到浏览模式。
该控件现在拥有一个已更新的标题并且没有边框，如下列屏幕快照所示。
Links 控件已经被更新到被修改页面
在运行时添加 Web 部件
你也可以允许用户在运行时在他们的页面中添加 Web 部件的控件集。要这样做，请使用一个 Web 部件目录来配置页面，该目录中包含一个你需要提供给用户的可用 Web 部件控件集列表。
提示：在该实践中，你创建了一个包含 FileUpload 和 Calendar 控件的模板。这将会允许你测试目录的基本功能，但是最终的 Web 部件控件中并没有任何的实际功能。如果你有其他的自定义 Web 控件或者用户控件，请把它们替换成静态的内容。
如何允许用户在运行时添加 Web 部件
-
在 WebPartsDemo.aspx 文件中，在表格的第三列中添加一个
<Asp:CatelogZone>元素，在<Asp:EditorZone>元素的下面。添加一个<ZoneTemplate>元素，然后在其中添加一个<Asp:DeclarativeCatalogPart>和<Asp:WebPartsTemplate>元素。最后，添加<Asp:FileUpload>和<Asp:Calendar>元素。你的代码看起来应该像下列代码实例。<asp:catalogzone id="CatalogZone1" runat="server" headertext="Add Web Parts"> <zonetemplate> <asp:declarativecatalogpart id="catalogpart1" runat="server" Title="My Catalog"> <webPartsTemplate> <asp:fileupload runat="server" id="upload1" title="Upload Files" /> <asp:calendar runat="server" id="cal1" Title="Team Calendar" /> </webPartsTemplate> </asp:declarativecatalogpart> </zonetemplate> </asp:catalogzone>提示：EditorZone 和 CatalogZone 控件可以放在相同的表格列中，因为它们不会同时显示。
-
保存文件 WebPartsDemo.aspx。
现在你可以测试目录了。
如何测试 Web 部件的目录
-
在浏览器中载入页面。
-
单击 Display Mode 下拉菜单，同时选择 Catalog。
名为 Add Web Parts 的目录被显示。
-
从 Main 区域中把 My Favorites 控件拖回到 Sidebar 区域的顶部。
-
在 Add Web Parts 目录中，同时选中相应的复选框，然后从 Add 中选择 Main 来下拉列表。
-
单击目录中的 Add。这些控件被添加到 Main 区域。如果你需要，你可以从目录中添加多个控件的实例到页面。
下列屏幕快照显示了在 Main 区域中使用了文件上传控件和日历控件的页面。
添加到 Main 区域的控件们
-
单击 Display Mode 下拉菜单，同时选择 Browse。目录将会出现并且页面被更新。
-
关闭浏览器。重新载入页面。你的更改被保持。
余下的步骤
该实践已经举例说明了在 ASP.NET Web 页面中使用非常简单的 Web 部件的控件集时的基本原则。你可能需要进行额外的试验，来深入理解 Web 部件特征。这里对将来的研究提供建议如下：
-
创建拥有比该实践所介绍的静态 Web 部件控件集更专业的 Web 部件控件集。你可以创建 Web 部件控件集来当成用户控件或者自定义控件使用。关于详细内容，请参考
WebPart类的参考文档。
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
