ASP.NET 实践：在 Web 部件页面中更改显示模式

这个实践例示了在 ASP.NET Web 部件页面中更改显示模式的两个方法，也示范了用户如何在页面的显示模式之间进行导航。在这个实践中，你将学习到：

• 创建一个允许你在 Web 页面（包含 Web 部件控件）中更改显示模式的自定义用户控件。

• 在 Web 部件页面的若干显示模式之间进行切换。

关于显示模式和何时使用显示模式的详细内容，请参考“Web 部件页面的显示模式”。

先决条件

为了完成这个实践，你需要：

• 在将要托管网站的计算机中安装并配置 Internet 信息服务（IIS）。关于 IIS 的安装与配置的详细内容，请参考包括在安装中的 IIS 帮助文档，或者参考 Microsoft TechNet 网站的在线 IIS 文档（Internet 信息服务 6.0 技术资源）。

• 一个能够识别单独用户的 ASP.NET 网站。如果你已经拥有这样的一个已配置网站，你可以使用这个网站作为实践的开始。如果没有，关于创建虚拟目录或网站的详细内容，请参考“ASP.NET 实践：在 IIS 中创建并配置虚拟目录”。

• 一个已配置的个性化提供者和数据库。Web 部件的个性化默认时是被启用的，同时它使用 SQL Server Express（SSE）中的 SQL 个性化提供者（SqlPersonalizationProvider）来保存个性化数据。这个实践使用了 SSE 和默认的 SQL 提供者。如果你已经安装了 SSE，则不需要进行配置。SSE 在 Microsoft Visual Studio 2005 中已经作为一个可选部分被安装，或者也可以从 Microsoft.com 下载。要使用任何一种完整版本的 SQL Server，你必须安装并配置一个 ASP.NET 应用程序服务数据库，并配置 SQL 个性化提供者以连接到该数据库。关于详细内容，请参考“为 SQL Server 创建并配置应用服务数据库”。你也可以创建并配置一个自定义提供者来使用其他的非 SQL 数据库或者存储方案中的数据。关于详细内容以及代码实例，靖参考“实现成员资格提供者”。

• 自定义的 Web 部件控件都继承自 WebPart 类，所以你可以把它们添加到 Web 部件页面的目录中。关于自定义 WebPart 控件的代码实例以及如何在页面中进行引用的详细内容，请参考 WebPartDisplayMode 类的开发文档。

创建一个用户控件来更改显示模式

在这个部分你将创建一个能够被添加到任何一个页面（包含有 Web 部件控件）中的用户控件，因而用户能够简单地在不同的页面显示模式之间进行切换。

如何创建一个用户控件来更改显示模式

1. 在文本编辑器中，创建一个新文件。

2. 在文件的顶部，添加一个控件声明，如下列代码实例所示。

   <%@ control language="C#" classname="DisplayModeMenuCS"%>
   

3. 在控件的声明之下，为页面添加下列标记内容。这个标记为控件创建了用户界面（UI），其中包含三个主要部分：

   • 一个允许用户更改显示模式的下拉列表控件（一个 <Asp:DropdownList> 元素）。

   • 一个允许用户在页面中对用户特定的个性化数据进行重置的超级链接（一个 <Asp:LinkButton> 元素），用于把页面返回到布局被用户更改之前时候的默认外观。

   • 一个允许用户在用户范围和共享个性化范围（默认时是用户范围）之间进行切换的单选按钮控件对（两个 <Asp:RadioButton> 元素）。在当前用户对页面进行个性化的时候，个性化范围会对用户能够看见个性化效果的所在的范围进行检测。

   你的代码看上去应该像下列代码块一样。

   <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="&nbsp;Display Mode" 
         Font-Bold="true"
         Font-Size="8"
         Width="120" />
       <asp:DropDownList ID="DisplayModeDropdown" runat="server"  
         AutoPostBack="true" 
         Width="120"
         OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
       <asp:LinkButton ID="LinkButton1" runat="server"
         Text="Reset User State" 
         ToolTip="Reset the current user's personalization data for the page."
         Font-Size="8" 
         OnClick="LinkButton1_Click" />
       <asp:Panel ID="Panel2" runat="server" 
         GroupingText="Personalization Scope"
         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>
   

4. 把文件命名为 DisplaymodemenuCS.ascx 或 DisplaymodemenuVB.ascx（取决于你为该实例使用的编程语言）并保存到虚拟目录的文件夹或者你为该实践使用的网站中。

如何把显示模式的能力添加到用户控件

1. 在用户控件的源文件中，在页面中开放的 <div> 标记上面添加一个 <script> 标记对，并在开放的 <script> 标记中添加 <runat="server"> 参数

2. 在 <script> 部分添加代码，允许用户在页面中更改显示模式、重置页面中的个性化数据、并且在用户范围和共享个性化范围之间进行切换。

   在下列代码块中有几件事情：

   • 在 InitComplete 方法中，代码检测页面中有效的显示模式，并使用显示模式列表来组装下拉列表控件。这个代码同样检测当前用户是否能够进入页面的共享个性化范围，并选中适当的单选按钮控件。

   • DisplayModeDropdown_SelectedIndexChanged 方法使用 WebPartManager 控件和由用户选中的模式，从而真正地改变了页面的显示模式，。

   • LinkButton1_Click 方法重置了页面中的个性化状态，意谓着页面中的所有用户个性化数据将从被个性化数据存储中消除，并且页面会返回到默认状态。

   • RadioButton1_CheckChanged 和 RadioButton2_CheckChanged 方法把个性化范围切换到用户范围或者共享范围。

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

3. 保存并关闭文件。

创建一个 Web 页面来托管显示模式控件

现在你有一个被创建的用户控件来改变显示模式，你可以创建一个 Web 页面来托管此控件。在这个部分中，你会创建一个托管用户控件的 Web 页面，同样也包含 Web 部件区域和提供 Web 部件功能的其他服务器控件。

如何创建一个可以改变显示模式的 Web 页面

1. 与该实践所声明的先决条件一样，你需要一个已编译的，自定义的 WebPart。该实践使用这个名为 TextDisplayWebPart 的自定义控件，你可以在“WebPartDisplayMode 类的概览”主题中可以找到它。这个被编译的汇编集应该命名为 TextDisplayWebPartCS.dll 或 TextDisplayWebPartVB.dll，取决于你使用的编程语言。请把这个已编译的汇编集放到网站中的子目录 Bin 中。

   安全提示：这个控件有一个接受用户输入的文本输入框，从而存在一个潜在的安全隐患。用户在 Web 页面中的输入中可以潜在地包含恶意的客户端脚本。默认时，ASP.NET Web 页面会验证用户的输入以确保输入的内容不包含 HTML 元素或脚本。只要验证被启用，你就不需要明确地在用户输入中检查脚本或者 HTML 元素。关于更多信息，请参考“脚本利用概览”。

2. 在文本编辑器中，创建一个新文件。

3. 在文件的顶部，添加一个页面声明和两个注册器指令。一个注册器指令是为了用户控件；另一个是为了你需要为该实践使用的已编译自定义 WebPart 控件。注意这个指令的 Assembly 参数必须引用到自定义控件的汇编集文件的名称，没有扩展名。

   <%@ page language="C#" %>
   <%@ register TagPrefix="uc1" 
     TagName="DisplayModeMenuCS" 
     Src="DisplayModeMenuCS.ascx" %>
   <%@ register tagprefix="aspSample" 
     Namespace="Samples.AspNet.CS.Controls" 
     Assembly="TextDisplayWebPartCS"%>
   

4. 在注册器指令之下，添加下列代码块，它允许你手动切换页面到目录模式。

   <script runat="server">
   void Button1_Click(object sender, EventArgs e)
   {
     WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
   }
   </script>
   

5. 在代码块的后面，添加下列标记到文件中。这个代码实例中有许多特征都是 Web 部件页面所必需的，包括一个 <Asp:WebPartManager> 元素，Web 部件区域与页面或个别控件中实际的显示模式相对应。关于更多相关信息，请参考“ASP.NET 实践：创建 Web 部件页面”。

   页面中的这个代码看上去应该像下列代码块一样。

   <html>
   <head id="Head1" runat="server">
     <title>Web Parts Display Modes</title>
   </head>
   <body>
     <form id="Form2" runat="server">
       <asp:webpartmanager id="WebPartManager1" runat="server" />
       <uc1:DisplayModeMenuCS ID="DisplayModeMenu1" runat="server" />
       <asp:webpartzone
         id="WebPartZone1"
         runat="server" BackImageUrl="~/MyImage.gif">
           <zonetemplate>
             <asp:Calendar 
               ID="Calendar1" 
               Runat="server" 
               Title="My Calendar" />
           </zonetemplate>
       </asp:webpartzone>
       <asp:WebPartZone ID="WebPartZone2" Runat="server">
       </asp:WebPartZone>
       <asp:EditorZone ID="editzone1" Runat="server">
         <ZoneTemplate>
           <asp:AppearanceEditorPart 
             ID="appearanceeditor1" 
             Runat="server" />
           <asp:LayoutEditorPart 
             ID="LayoutEditorPart1" 
             Runat="server" />
         </ZoneTemplate>
       </asp:EditorZone>
       <asp:CatalogZone ID="catalogzone1" Runat="server">
         <ZoneTemplate>
           <asp:DeclarativeCatalogPart 
             ID="declarativepart1" 
             Runat="server">
             <WebPartsTemplate>
             <aspSample:TextDisplayWebPart 
               runat="server"   
               id="textwebpart" 
               title = "Text Content WebPart" AllowClose="true"/>  
             </WebPartsTemplate>
           </asp:DeclarativeCatalogPart>
         </ZoneTemplate>
       </asp:CatalogZone>
       <br />
       <asp:button
         id="button1"
         runat="server"
         text="Catalog Mode"
         OnClick="Button1_Click"
       />
     </form>
   </body>
   </html>
   

6. 把文件命名为 Displaymodes.aspx 并保存到网站的目录中。

更改 Web 页面的显示模式

现在你已经为运行包含 Web 部件控件（可以在不同的页面显示模式之间进行转换）的 Web 页面创建了所必需的所有文件，在这个部分，你将载入页面并通过用户控件把页面转换成不同的显示模式。

如何测试页面并改变显示模式

1. 在浏览器中载入该页面。页面看起来应该与下列屏幕快照一样。

   拥有改变显示模式的控件的页面

   

2. 单击 Display Mode 下拉列表控件，并注意到不同的显示模式已经在页面中可用。因为页面包含一个 WebPartZone 控件、一个 EditorZone 控件、以及一个 CatalogZone 控件，除了默认的 Browse 显示模式之外，与这些区域类型相对应的显示模式都出现在下拉列表中。

   提示：页面也可以包含一个 ConnectionsZone 控件，它将允许你创建控件之间的连接，还将添加一个连接显示模式到下拉列表，但是对连接模式的讨论超出了该实践的范围。

3. 从下拉列表中选择 Catalog 模式。出现目录模式 UI，并且 TextDisplayWebPart 控件应该在该目录中可见，并能够被添加到页面中。单击 Close 按钮来返回页面到浏览模式。

4. 作为转换显示模式的另一个方法，不需要用户控件，而是单击靠近页面询问的 Catalog Mode 按钮。这个转换的代码出现在 Web 页面的 Button1_Click 方法中。页面转换到目录模式。

5. 在目录中选择自定义控件下面的复选框，并单击 Add 按钮把它添加到页面中。

6. 单击 Close 返回页面到浏览模式。注意到被添加的控件现在出现在页面中。

7. 在 Display Mode 下拉列表控件中，选择 Edit。页面转换到编辑模式。区域的标题变得可见，并且一个看上去像小三角形的动作菜单按钮会出现在每一个位于 WebPartZone 控件中的服务器控件的标题栏中。这个动作菜单中提供了用户能够应用到控件的各种不同的动作。

8. 单击 TextDisplayWebPart 控件的动作菜单。出现一个下拉菜单。

9. 在动作菜单中，单击 Edit 选项。出现指定的编辑 UI（在 <Asp:EditorZone> 元素中被定义）。通过这些控件，你可以改变自定义控件的布局和外观。

10. 使用编辑 UI 来改变自定义控件的标题。然后单击 Apply 来应用改变。

11. 把你的鼠标指针定位到自定义控件的标题栏中。单击标题栏并从 WebPartZone1 把这个控件拖动到 WebPartZone2 中。

12. 使用 Display Mode 下拉列表控件改变页面后退到浏览模式。页面看上去应该像下列屏幕快照一样。

    在不同显示模式中被改变的页面