Использование элемента управления ASP.NET UpdatePanel с пользовательскими элементами управления

Visual Studio 2010

Обновлен: Ноябрь 2007

Можно включить частичное обновление страницы для пользовательских элементов управления, как и для других элементов управления на веб-странице. Необходимо добавить элемент управления ScriptManager на страницу и присвоить свойству EnablePartialRendering значение true. Элемент управления ScriptManager будет управлять частичным обновлением страницы для элементов управления UpdatePanel, расположенных непосредственно на веб-странице ASP.NET или внутри пользовательского элемента управления на странице.

В простом сценарии можно поместить пользовательские элементы управления в панель обновления и они будут обновляться при обновлении содержимого панели обновления. Также можно поместить элемент управления UpdatePanel внутрь пользовательского элемента управления, чтобы пользовательский элемент управления поддерживал частичные обновления страницы. Однако, в этом случае, разработчики страниц, добавляющие пользовательский элемент управления на страницу, должны явно добавить элемент управления ScriptManager на веб-страницу узла.

При добавлении элементов управления к пользовательским элементам управления программными средствами можно определить, имеется ли на странице элемент управления ScriptManager. Затем перед добавление элемента управления UpdatePanel к пользовательскому элементу управления можно проверить, присвоено ли свойству EnablePartialRendering значение true. Пример выполнения описанного выше в серверном веб-элементе управления представлен в разделе Использование элемента управления UpdatePanel ASP.NET с элементами управления с привязкой к данным.

Может иметься несколько пользовательских элементов управления на одной веб-странице, которые необходимо обновлять отдельно друг от друга. В таком случае можно включить один или несколько элементов управления UpdatePanel внутрь пользовательского элемента управления и расширить пользовательский элемент управления так, чтобы он предоставлял общий доступ к функциям дочерних элементов управления UpdatePanel.

Приведенный здесь пример включает два пользовательских элемента управления, содержимое которых находится внутри элементов управления UpdatePanel. Каждый пользовательский элемент управления предоставляет доступ к свойству UpdateMode внутреннего элемента управления UpdatePanel, чтобы это свойство могло быть задано явно для каждого из пользовательских элементов управления. Каждый пользовательский элемент управления также предоставляет доступ к методу Update внутреннего элемента управления UpdatePanel, чтобы внешний источник мог явно обновлять содержимое пользовательского элемента управления.

В примере, приведенном в данном руководстве, создается страница типа «основной-подробности» сведений о сотрудниках из образца базы данных AdventureWorks. Один пользовательский элемент управления использует элемент управления GridView для отображения списка имен сотрудников и для поддержки выбора, разбиения по страницам и сортировки. Другой пользовательский элемент управления использует элемент управления DetailsView для отображения подробных сведений о выбранном сотруднике.

Пользовательский элемент управления «Список» сотрудников сохраняет идентификатор выбранного сотрудника в состоянии просмотра. Он проверяет, чтобы только выбранный сотрудник был выделен в элементе управления GridView, независимо от того, какая отображается страница данных или как отсортирован список. Пользовательский элемент правления также проверяет, чтобы пользовательский элемент управления «сотрудник-подробности» отображался только тогда, когда выбранный сотрудник отображается в списке сотрудников.

В примере пользовательский элемент управления «сотрудник-подробности» содержит элемент управления UpdatePanel. Панель обновления обновляется при выборе сотрудника. Она также обновляется и при перемещении пользователя за пределы страницы элемента управления GridView, отображающей выбранного сотрудника. Если пользователь просматривает страницу элемента управления GridView, не содержащую выбранного сотрудника, пользовательский элемент управления «сотрудник-подробности» не отображается и панель обновления не обновляется.

Включение элемента управления UpdatePanel в пользовательский элемент управления

Первым этапом при создании независимо обновляемого пользовательского элемента управления является включение элемента управления 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

Следующий этап — предоставление доступа к свойству UpdateMode и методу Update внутреннего элемента управления UpdatePanel. Это позволяет задать свойства внутреннего элемента управления UpdatePanel из-за пределов пользовательского элемента управления, как показано в следующем примере.

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

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


Добавление пользовательских элементов управления на веб-страницу

Теперь можно добавить пользовательский элемент управления на веб-страницу ASP.NET и задать свойство UpdateMode внутреннего элемента управления UpdatePanel декларативно. В этом примере свойству 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>


Добавление кода для обновления пользовательских элементов управления

Для явного обновления пользовательских элементов управления необходимо вызвать метод Update внутреннего элемента управления UpdatePanel. Следующий пример включает обработчик событий для события SelectedIndexChanged пользовательского элемента управления «Список» сотрудников, который вызывается при возникновении события SelectedIndexChanged внутреннего элемента управления GridView. Код в обработчике явно обновляет пользовательский элемент управления подробностей о сотрудниках, если выбран сотрудник или если текущая страница в списке сотрудников не отображает выбранного сотрудника.

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

    EmployeeInfo1.Update();
}


Показ: