通过

如何：生成和运行数据绑定 Web 部件控件示例

更新：2007 年 11 月

本主题包含有关生成和运行数据绑定 WebPart 控件的说明。主题数据绑定 Web 部件控件示例中提供了该控件的完整代码示例。此代码示例演示如何创建一个自定义服务器控件，该控件将 GridView 控件绑定到数据源，但同时继承于 WebPart 类，从而使得它可以参与 Web 部件应用程序。本主题提供了编译此代码示例并配置 ASP.NET Web 应用程序以便将该控件作为 Web 部件控件运行所需的相关信息。

编译 Web 部件控件

必须编译此源代码，代码示例才能运行。可以显式编译源代码，并将结果程序集放在网站的 Bin 文件夹或全局程序集缓存中。另外，也可将源代码放入站点的 App_Code 文件夹中，源代码将在运行时在此文件夹中进行动态编译。此代码示例使用动态编译。有关演示如何编译的演练，请参见演练：开发和使用自定义服务器控件。

动态编译数据绑定 Web 部件控件

  1. 在 Web 应用程序的根文件夹中，创建一个名为 App_Code 的文件夹。

  2. 从主题数据绑定 Web 部件控件示例中获取自定义数据绑定 WebPart 控件的源代码。将源代码文件放在 App_Code 文件夹中。文件的名称无关紧要，因为您使用的是动态编译；但文件必须具有与您所使用的语言相对应的适当扩展名（如 .cs 或 .vb）。

使用 Web 部件应用程序中的控件

若要将应用程序配置为使用 Web 部件，您只需具有一个可以对单个用户进行身份验证的 ASP.NET 网站，以及一个允许处理应用程序服务（包括个性化设置）的数据库。对于本示例（因为它使用数据绑定控件），您还需要在 Web.config 文件中创建一个连接字符串，以允许数据源连接到 Northwind 示例数据库。配置应用程序后，在每个 Web 部件应用程序中，您需要向将承载 Web 部件应用程序中的 WebPart 和服务器控件的每个网页添加一个 WebPartManager 控件和至少一个 WebPartZone 控件。下面的第二个过程演示如何添加这些控件，以及如何执行做好页运行数据绑定控件的准备工作所需的其他步骤。

配置 ASP.NET 应用程序以运行 Web 部件控件

  1. 确保您有一个已经过配置为识别单个用户的 ASP.NET Web 应用程序。如果需要有关如何创建此类站点的说明，请参见如何：在 IIS 5.0 和 6.0 中创建和配置虚拟目录或如何：在 IIS 6.0 中创建和配置本地 ASP.NET 网站。

  2. 确保您有一个已配置的个性化设置提供程序和数据库。默认情况下启用 Web 部件个性化设置，而且它使用 SQL 个性化设置提供程序 (SqlPersonalizationProvider) 和 Microsoft SQL Server Express (SSE) 版本来存储个性化设置数据。本主题使用 SSE 和默认的 SQL 提供程序。如果安装了 SSE，则不需要进行任何配置。SSE 是作为 Microsoft Visual Studio 2005 安装的可选部分提供的，也可以从 Microsoft.com 免费下载。若要使用 Microsoft SQL Server 的一个完整版本，必须安装和配置 ASP.NET 应用程序服务数据库，并且将 SQL 个性化设置提供程序配置为连接到该数据库。有关详细信息，请参见为 SQL Server 创建和配置应用程序服务数据库。还可以创建和配置自定义提供程序来使用其他非 SQL 数据库或存储解决方案。有关详细信息和代码示例，请参见实现成员资格提供程序。

  3. 创建一个连接字符串，以便数据绑定控件可以连接到 Northwind 示例数据库。若要运行此示例，您将需要能够访问随 SQL Server 提供的 Northwind 示例数据库。如果没有安装 Northwind 示例数据库，可以从 Microsoft 下载中心下载相应的脚本以创建和安装该数据库。

    对于连接字符串，推荐的方法是将它们放在您的应用程序的 Web.config 文件中。有关配置文件的更多信息，请参见 ASP.NET 配置文件。下面的代码示例演示 Web.config 文件中的一个连接字符串，该字符串连接到在 SSE 上运行的 Northwind 的本地实例。请注意，通常用于分隔数据库文件路径的单引号 (') 呈现为实体 (")。这是必要的，因为 Web.config 是 XML 文件。

    <connectionStrings>
  <add name="nwind" 
    connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=
    &quot;C:\SQL Server 2000 Sample Databases\NORTHWND.MDF&quot;;
    Initial Catalog=Northwind;Integrated Security=True;"
    providerName="System.Data.SqlClient" />
</connectionStrings>
    ms227667.alert_note(zh-cn,VS.90).gif说明：

    建议加密所有敏感信息，如连接字符串中包含的密码。有关加密配置数据的详细信息，请参见演练：使用受保护的配置加密配置信息。

  4. 在 Web.config 文件的 <system.web> 节中，添加一个 <webparts> 元素。这不是每个 Web 部件应用程序所必需的操作；但对于 Web 部件应用程序中的某些功能，必须在该节中进行配置才能使用。已启用示例数据绑定 WebPart 控件，以导出包含其状态和属性数据的配置文件。由于 Web 部件应用程序在默认情况下禁用导出功能，因此您必须在 <webParts> 节中启用该功能。向 <webParts> 元素添加一个 enabledExport 属性，并将该属性的值设置为 True，如下面的代码示例所示。

    <webParts enableExport="true" />

  5. 保存并关闭 Web.config 文件。

准备网页以承载 Web 部件控件

  1. 创建一个用户控件，该控件允许用户在网页上的可用 Web 部件显示模式之间切换。该控件和下一步不是运行数据绑定 Web 部件控件所必需的，但这是在许多 Web 部件页中有用的功能。在编辑器中，粘贴以下用于用户控件的代码，并使用名称 Displaymodemenucs.ascx 或 Displaymodemenuvb.ascx（取决于您使用的语言）将代码文件保存在 Web 应用程序的根文件夹中。

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="vb" classname="DisplayModeMenuVB"%>

<script runat="server">

' Use a field to reference the current WebPartManager.
Dim _manager As WebPartManager


Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) 
    AddHandler Page.InitComplete, AddressOf InitComplete

End Sub 


Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs) 
    _manager = WebPartManager.GetCurrentWebPartManager(Page)

    Dim browseModeName As String = WebPartManager.BrowseDisplayMode.Name

    ' Fill the dropdown with the names of supported display modes.
    Dim mode As WebPartDisplayMode
    For Each mode In  _manager.SupportedDisplayModes
        Dim modeName As String = mode.Name
        ' Make sure a mode is enabled before adding it.
        If mode.IsEnabled(_manager) Then
            Dim item As New ListItem(modeName + " Mode", modeName)
            DisplayModeDropdown.Items.Add(item)
        End If
    Next mode

End Sub 


' Change the page to the selected display mode.
Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) 
    Dim selectedMode As String = DisplayModeDropdown.SelectedValue

    Dim mode As WebPartDisplayMode = _manager.SupportedDisplayModes(selectedMode)
    If Not (mode Is Nothing) Then
        _manager.DisplayMode = mode
    End If

End Sub 


Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name

End Sub 

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 
    runat="server"  
    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="C#" classname="DisplayModeMenuCS"%>

<script runat="server">

 // Use a field to reference the current 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;

    // Fill the dropdown with the names of supported display modes.
    foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)
    {
      String modeName = mode.Name;
      // Make sure a mode is enabled before adding it.
      if (mode.IsEnabled(_manager))
      {
        ListItem item = new ListItem(modeName + " Mode", modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

  }

  // Change the page to the selected display mode.
  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)
  {
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name;
  }

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 
    runat="server"  
    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

  2. 创建一个新的 ASP.NET 页以承载自定义 WebPart 控件和其他控件。在该页的 Page 指令紧下面添加一条 Register 指令，以注册您刚才创建的用户控件。指令内容取决于您使用的语言，而且应类似于下面的示例。

    [Visual Basic]

    <%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>

    [C#]

    <%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>

  3. 现在，为自定义 WebPart 控件添加 Register 指令。由于本主题使用动态编译，因此您无需向该指令添加 Assembly 属性。在文件中上一条指令的紧下面，添加另一条 Register 指令，将一个任意字符串分配给该指令的 tagprefix 属性，并将自定义控件的命名空间分配给 namespace 属性（仍取决于您使用的语言），如下面的示例所示。

    [Visual Basic]

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

  4. 在该页的 <form> 元素中添加一个 <asp:webpartmanager> 元素，如下面的代码示例所示。使用 Web 部件的每页都需要有一个 WebPartManager 控件。

    <asp:webpartmanager id="WebPartManager1" runat="server">
</asp:webpartmanager>

  5. 在 <asp:webpartmanager> 元素之后声明用于切换显示模式的用户控件。如何声明控件取决于您使用的语言，如下面的代码示例所示。

    [Visual Basic]

    <uc1:displaymodevb id="Displaymodevb1" runat="server" />

    <uc1:displaymodecs id="Displaymodecs1" runat="server" />

  6. 在该用户控件之后，添加一个包含一行、两列的表，以便在页上构成控件的布局。表标记应类似于下面的代码示例。

    <table style="width: 80%; position: relative">
  <tr valign="top">
    <td style="width: 40%">
    </td>
    <td style="width: 40%">
    </td>
  </tr>
</table>

  7. 在每一组 <td> 标记中，添加一个 <asp:webpartzone> 元素。若要获取 WebPart 控件并启用它们以获得完整的 Web 部件功能，必须具有从 WebPartZoneBase 类派生的区域。第一个区域的标记类似于下面的代码示例。

    <asp:webpartzone id="WebPartZone1" runat="server" 
  style="position: relative" >
  <parttitlestyle font-size="14" font-names="Verdana" />
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

    第二个区域的标记应类似于下面的代码示例。

    <asp:webpartzone id="WebPartZone2" runat="server" 
  style="position: relative" >
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  8. 在第一个区域的 <zonetemplate> 标记之间声明自定义数据绑定 WebPart 控件，如下面的代码示例所示。请注意，此标记使用在控件的 Register 指令中定义的标记前缀，以及自定义控件的类名。另请注意，在控件中定义的自定义属性 (Property) (ConnectionString) 显示为具有来自分配给它的 Web.config 文件中的连接字符串的属性 (Attribute)。该方法使页开发人员可以确定将什么连接字符串用于控件。该标记应类似于下面的代码。

    <aspSample:SmallGridWebPart id="grid1" runat="server" 
  title="Customer Phone List" width="300" 
  connectionstring="<%$ ConnectionStrings:nwind %>"   />

  9. 为进行比较，在第二个区域的 <zonetemplate> 标记之间声明一个普通的日历服务器控件。由于您将该控件放在 WebPartZone 控件中，因此该控件在运行时的行为类似于 WebPart 控件。有关在 Web 部件应用程序中使用服务器控件的详细信息，请参见在 Web 部件应用程序中使用 ASP.NET 服务器控件。该标记应类似于下面的代码示例。

    <asp:calendar id="Calendar1" runat="server" 
  style="position: relative"></asp:calendar>

  10. 保存和关闭该页。现在，您可以运行该页并测试自定义 WebPart 控件。该页的完整代码应类似于下面的代码示例。

    <%@ Page Language="VB" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:webpartmanager id="WebPartManager1" runat="server">
      </asp:webpartmanager>
      <uc1:displaymodevb id="Displaymodevb1" runat="server" />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1" runat="server" 
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1" runat="server" 
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2" runat="server" 
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1" runat="server" 
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:webpartmanager id="WebPartManager1" runat="server">
      </asp:webpartmanager>
      <uc1:displaymodecs id="Displaymodecs1" runat="server" />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1" runat="server" 
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana, Arial" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1" runat="server" 
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2" runat="server" 
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1" runat="server" 
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

请参见

概念

创建数据绑定 Web 部件控件

数据绑定 Web 部件控件示例