ASP.NET 实践：把用户控件当成 Web 部件控件

ASP.NET Web 部件的控件集能够让你把现有的 Web 服务器控件当成 Web 部件的控件来使用，从而达到最大程度上的代码重用并受益于 Web 部件的个性化。用户控件是能够当成 Web 部件控件来使用的服务器控件中的其中一种。该文章演示了如何把现有的用户控件当成 Web 部件控件。

提示：要让这个过程开始工作，你需要一个能够识别单独用户的 ASP.NET 网站。如果你已经配置了这样一个网站，你就可以使用它。如果没有，关于创建虚拟目录的详细内容，请参考“ASP.NET 实践：在 IIS 中创建并配置虚拟目录”。你同样需要一个能够与 Web 部件的个性化一起工作的用户控件。如果你没有这个用户控件，请按照下面的内容来创建它。

当你在 Web 部件应用程序中使用用户控件的时候，它会在运行时会获得 WebPart 控件的全部能力。关于详细内容，请参考“在 Web 部件应用程序中使用 ASP.NET 服务器控件”。用户控件同样保持了它自己的常规服务控件的能力，但是有一个例外：当用户控件被用在 Web 部件应用程序中的时候，输出缓存会被禁用。Web 部件的控件集在发生每一个页面请求的时候都需要把所有的控件添加到控件树中。这是个性化正常工作时所必需的，并且个性化数据能够在控件之间来回传递。但是，当用户控件的输出缓存被启用之后，它就不能够添加到控件树中，因为会干扰 Web 部件的正常特征。这就是为什么在 Web 部件应用程序中使用用户控件的时候会禁用输出缓存的原因。

创建 Web 部件页面来托管用户控件

创建一个新的 ASP.NET 页面。添加下列页面声明到页面的顶部。
```
<@page language="C#" %>
```

在刚才被添加的页面声明的下面，使用 HTML 标记添加下列基本页面结构。

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form runat="server">
  <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>

在页面中添加 Web 部件的控件

在页面中的 <form> 元素下面，添加一个 WebPartManager 控件。
```
<asp:webpartmanager id="WebPartManager1" runat="server" />
```
在 <Asp:WebPartManager> 元素的下面，以及表格的第一个 <td> 标记集之间（第一个表格列）添加一个 WebPartZone 控件来包含将要在下一个步骤中被添加的用户控件。
```
<asp:webpartzone id="SideBarZone" runat="server" 
  headertext="Sidebar Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>
```
在刚才被添加的区域的 <ZoneTemplate> 元素中，添加一个现有的服务器控件和一些静态内容，这些静态内容在运行时也将被当成另一个 Web 部件控件（它同样在一个 Web 部件区域中）：
```
<asp:label runat="server" id="linksPart" title="My Links">
  <a href="www.asp.net">ASP.NET site</a> 
  <br />
  <a href="www.gotdotnet.com">GotDotNet</a> 
  <br />
  <a href="www.contoso.com">Contoso.com</a> 
  <br />
</asp:label>
```
在表格的第二个 <td> 标记集中（第二个表格列）添加另一个 WebPartZone 控件来包含将要在下一个步骤中被添加的用户控件。
```
<asp:webpartzone id="MainZone" runat="server" 
  headertext="Main Zone">
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>
```
在表格的第三个 <td> 元素（第三个列）中添加一个 <Asp:EditorZone> 元素。添加一个 <ZoneTemplate> 元素，然后添加一个 <Asp:AppearanceEditorPart> 和一个 <Asp:LayoutEditorPart> 元素。编辑器区域中的代码看起来应该像这样：
```
<asp:editorzone id="EditorZone1" runat="server">
  <zonetemplate>
    <asp:appearanceeditorpart runat="server" 
      id="AppearanceEditorPart1" />
    <asp:layouteditorpart runat="server" 
      id="LayoutEditorPart1" />
  </zonetemplate>
</asp:editorzone>
```
保存页面。

创建用户控件

在文本编辑器中创建一个新文件。这个文件将要包含一个同样能够当成 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 标记或者脚本。一旦验证被启用，你就不需要再在用户输入中对脚本或 HTML 元素进行检查了。更多信息，请参考“脚本开发概览”。

在主 Web 部件区域中对用户控件进行引用

在 Web 页面的顶部，正好在页面声明的下面，添加下列声明来引用刚才所创建的用户控件。如果你没有使用实例中所提供的用户控件，src 参数需要设置到被使用的用户控件的路径以及文件名称，并且你也可以有选择地为 tagname 参数指派不同的值。
```
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
    src="searchusercontrolcs.ascx" %>
```
在主区域的 <ZoneTemplate> 元素中，引用先前被创建的用户控件。
```
<uc1:SearchUserControl id="searchPart" runat="server"
  title="Search" />
```
保存并关闭页面。

实例

下列代码实例提供了一个使用 Web 部件页面来托管用户控件的完整代码列表。同样也为把实例用户控件当成 Web 部件控件引用到页面中提供了代码。注意，要把用户控件当成真正拥有个性化能力的 Web 部件控件，它必须使用 [Personalizable] 代码参数来暴露一个公共的属性。

<!-- 托管用户控件的 Web 部件页面 -->
<%@ page language="C#" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrol.ascx" %>

<html>
<head>
  <title>Web Parts Demo Page</title>
</head>
<body>
  <h1>Web Parts User Control Demonstration</h1>
  <form runat="server" id="form1">
  <asp:webpartmanager id="WebPartManager1" runat="server" />
  <asp:webpartpagemenu
    id="pagemenu1"
    runat="server"
    Mode="Menu"
    MenuStyle-BorderWidth="1">
    <browsemodeverb text="Browse" />
    <designmodeverb text="Design" />
    <editmodeverb text="Edit" />
  </asp:webpartpagemenu>
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
        <asp:webpartzone id="SideBarZone" runat="server" 
          headertext="Sidebar Zone">
          <zonetemplate>
            <asp:label runat="server" id="linksPart" title="My Links">
              <a href="www.asp.net">ASP.NET site</a> 
              <br />
              <a href="www.gotdotnet.com">GotDotNet</a> 
              <br />
              <a href="www.contoso.com">Contoso.com</a> 
              <br />
            </asp:label>
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <td valign="top">
        <asp:webpartzone id="MainZone" runat="server" 
          headertext="Main Zone">
          <zonetemplate>
            <uc1:SearchUserControl id="searchPart" runat="server"
              title="Search" />
          </zonetemplate>
        </asp:webpartzone>
      </td>
      <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>
    </tr>
  </table>
  </form>
</body>
</html>


<!-- Web 部件的用户控件 -->
<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
  private int results;
  
  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}
    
    set
      {results = value;}
  }    
</script>
<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />

如果你运行代码实例并单击 Display Mode 页面菜单，你能够在不同的个性化模式（浏览、设计、编辑）之中进行轮换。在设计模式中，你可以通过单击两个 Web 部件控件之间的标题来排列页面的布局。在编辑模式中，你可以单击标题或者 Web 部件控件中的编辑图片，然后为该控件设置不同的 UI 属性。

posted on 2007-01-05 18:16 Laeb 阅读(327) 评论(0) 编辑收藏举报

刷新页面返回顶部

ASP.NET Lab

创建 Web 部件页面来托管用户控件

在页面中添加 Web 部件的控件

创建用户控件

在主 Web 部件区域中对用户控件进行引用

实例