通过

将 ASP.NET UpdatePanel 控件与用户控件一起使用

  • 项目

更新：2007 年 11 月

可以像为网页上的其他控件启用部分页更新一样为用户控件启用部分页更新。必须向页添加 ScriptManager 控件，并将其 EnablePartialRendering 属性设置为 true。ScriptManager 控件将管理 UpdatePanel 控件的部分页更新，这些控件直接位于 ASP.NET 网页上或位于页上的用户控件内。

在一个简单的方案中，可以将用户控件置于更新面板内，当对更新面板的内容进行更新时，将刷新这些用户控件。也可以将 UpdatePanel 控件置于用户控件内，从而使用户控件支持部分页更新。但是，在此情况下，将用户控件添加到页的页开发人员必须在宿主网页上显式添加 ScriptManager 控件。

如果以编程方式将控件添加到用户控件，则可以确定页上是否存在 ScriptManager 控件。然后，可以确保在将 UpdatePanel 控件添加到用户控件之前，EnablePartialRendering 属性已设置为 true。有关演示如何在 Web 服务器控件中执行此操作的示例，请参见将 ASP.NET UpdatePanel 控件与数据绑定控件一起使用。

您可能会在要单独更新的网页上包含多个用户控件。在此情况下，可以在用户控件内包含一个或多个 UpdatePanel 控件，并扩展用户控件以公开子 UpdatePanel 控件的功能。

本教程中的示例包括两个用户控件，其内容位于 UpdatePanel 控件内。每个用户控件公开内部 UpdatePanel 控件的 UpdateMode 属性，以便能够为每个用户控件显式设置该属性。每个用户控件也公开内部 UpdatePanel 控件的 Update 的方法，以便外部资源可以显式刷新用户控件的内容。

创建带有多个用户控件的 ASP.NET 网页

本教程中的示例创建包含 AdventureWorks 示例数据库中的雇员信息的主-详细信息页。一个用户控件使用 GridView 控件来显示雇员姓名列表并支持选择、分页和排序。另一个用户控件使用 DetailsView 控件来显示所选雇员的详细信息。

雇员列表用户控件将所选雇员的 ID 存储在视图状态中。这样可确保 GridView 控件中仅突出显示选定雇员，而与显示哪一页的数据或列表的排序方式无关。用户控件还可以确保仅当所选雇员在雇员列表中可见时显示雇员详细信息用户控件。

在此示例中，雇员详细信息用户控件包含一个 UpdatePanel 控件。在选择某个雇员时，将刷新更新面板。当用户从显示所选雇员的 GridView 控件页移开时，也将刷新此面板。如果用户查看未包含所选雇员的 GridView 控件的页，则不会显示雇员详细信息用户控件且不会对更新面板进行更新。

在用户控件中包含 UpdatePanel 控件

创建单独刷新的用户控件的第一步是在用户控件中包含 UpdatePanel 控件，如以下示例所示。

<%@ Control Language="VB" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.vb" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" runat="server">
  <ContentTemplate>
    <asp:Label ID="LastUpdatedLabel" runat="server"></asp:Label>
    <asp:DetailsView ID="EmployeeDetailsView" runat="server" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
      <FooterStyle BackColor="Tan" />
      <EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
      <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
      <Fields>
        <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
        <asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
        <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
        <asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
        <asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
        <asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
      </Fields>
      <HeaderStyle BackColor="Tan" Font-Bold="True" />
      <AlternatingRowStyle BackColor="PaleGoldenrod" />
    </asp:DetailsView>
    <asp:SqlDataSource ID="EmployeeDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
        SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
      <SelectParameters>
        <asp:Parameter Name="SelectedEmployeeID" />
      </SelectParameters>
    </asp:SqlDataSource>
  </ContentTemplate>
</asp:UpdatePanel>

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.cs" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" runat="server">
  <ContentTemplate>
    <asp:Label ID="LastUpdatedLabel" runat="server"></asp:Label>
    <asp:DetailsView ID="EmployeeDetailsView" runat="server" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
      <FooterStyle BackColor="Tan" />
      <EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
      <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
      <Fields>
        <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
        <asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
        <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
        <asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
        <asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
        <asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
      </Fields>
      <HeaderStyle BackColor="Tan" Font-Bold="True" />
      <AlternatingRowStyle BackColor="PaleGoldenrod" />
    </asp:DetailsView>
    <asp:SqlDataSource ID="EmployeeDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
        SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
      <SelectParameters>
        <asp:Parameter Name="SelectedEmployeeID" />
      </SelectParameters>
    </asp:SqlDataSource>
  </ContentTemplate>
</asp:UpdatePanel>

公开 UpdatePanel 控件的功能

下一步是公开内部 UpdatePanel 控件的 UpdateMode 属性和 Update 方法。这使您可以从用户控件的外部设置内部 UpdatePanel 控件的属性，如以下示例所示。

Public Property UpdateMode() As UpdatePanelUpdateMode
    Get
        Return Me.EmployeeInfoUpdatePanel.UpdateMode
    End Get
    Set(ByVal value As UpdatePanelUpdateMode)
        Me.EmployeeInfoUpdatePanel.UpdateMode = value
    End Set
End Property

Public Sub Update()
    Me.EmployeeInfoUpdatePanel.Update()
End Sub

public UpdatePanelUpdateMode UpdateMode
{
    get { return this.EmployeeInfoUpdatePanel.UpdateMode; }
    set { this.EmployeeInfoUpdatePanel.UpdateMode = value; }
}

public void Update()
{
    this.EmployeeInfoUpdatePanel.Update();
}

将用户控件添加到网页

现在可以将用户控件添加到 ASP.NET 网页，并以声明方式设置内部 UpdatePanel 控件的 UpdateMode 属性。对于本示例，两个用户控件的 UpdateMode 属性设置为 Conditional。这意味着只有在显式请求更新时才会更新这两个用户控件，如以下示例所示。

<asp:ScriptManager ID="ScriptManager1" runat="server"
                   EnablePartialRendering="true" /> 
<table>
    <tr>
        <td valign="top">
            <uc2:EmployeeList ID="EmployeeList1" runat="server" UpdateMode="Conditional"
                              OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
        </td>
        <td valign="top">
            <uc1:EmployeeInfo ID="EmployeeInfo1" runat="server" UpdateMode="Conditional" />
        </td>
    </tr>
</table>

<asp:ScriptManager ID="ScriptManager1" runat="server"
                   EnablePartialRendering="true" /> 
<table>
    <tr>
        <td valign="top">
            <uc2:EmployeeList ID="EmployeeList1" runat="server" UpdateMode="Conditional"
                              OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
        </td>
        <td valign="top">
            <uc1:EmployeeInfo ID="EmployeeInfo1" runat="server" UpdateMode="Conditional" />
        </td>
    </tr>
</table>

添加代码以刷新用户控件

若要显式更新用户控件，请调用内部 UpdatePanel 控件的 Update 方法。下面的示例包括雇员列表用户控件的 SelectedIndexChanged 事件的处理程序，此事件在内部 GridView 控件的 SelectedIndexChanged 事件引发时引发。如果已选定雇员或雇员列表中的当前页不再显示选定雇员，则此处理程序中的代码将显式更新雇员详细信息用户控件。

protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
    if (EmployeeList1.SelectedIndex != -1)
        EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
    else
        EmployeeInfo1.EmployeeID = 0;

    EmployeeInfo1.Update();
}

protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
    if (EmployeeList1.SelectedIndex != -1)
        EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
    else
        EmployeeInfo1.EmployeeID = 0;

    EmployeeInfo1.Update();
}

请参见

概念

UpdatePanel 控件概述

ASP.NET 用户控件概述

参考

UpdatePanel

ScriptManager

其他资源

UpdatePanel Control Tutorials