ASP.NET UpdatePanel コントロールとユーザーコントロールの使用

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

Web ページの他のコントロールについてと同様、ユーザーコントロールに対して部分ページ更新を有効にできます。ScriptManager コントロールをページに追加し、その EnablePartialRendering プロパティを true に設定する必要があります。ScriptManager コントロールは、ASP.NET Web ページに直接配置されているか、ページのユーザーコントロール内に配置されている UpdatePanel コントロールを管理します。

単純な状況では、更新パネル内にユーザーコントロールを配置できます。更新パネルのコンテンツが更新されるときに、ユーザーコントロールが再表示されます。ユーザーコントロールが部分ページ更新をサポートするように、UpdatePanel コントロールをユーザーコントロール内に配置することもできます。ただし、その場合、ページにユーザーコントロールを追加するページ開発者が、ホスト Web ページに明示的に ScriptManager コントロールを追加する必要があります。

プログラムによってユーザーコントロールにコントロールを追加する場合は、ScriptManager コントロールがページに配置されているかどうかを判別できます。配置されている場合、UpdatePanel コントロールをユーザーコントロールに追加する前に、EnablePartialRendering プロパティが true に設定されていることを確認できます。Web サーバーコントロールでこれを行う方法の例については、「ASP.NET UpdatePanel コントロールとデータバインドコントロールの使用」を参照してください。

個別に更新する複数のユーザーコントロールが Web ページにある場合があります。その場合、1 つ以上の UpdatePanel コントロールをユーザーコントロール内に含め、そのユーザーコントロールを拡張して、子 UpdatePanel コントロールの機能をパブリックに公開できます。

このチュートリアルの例には、2 つのユーザーコントロールが含まれます。そのユーザーコントロールのコンテンツは UpdatePanel コントロール内にあります。各ユーザーコントロールは、それぞれに明示的にプロパティが設定できるように、内部 UpdatePanel コントロールの UpdateMode プロパティを公開します。各ユーザーコントロールは、そのコンテンツを外部ソースで明示的に再表示できるように、内部 UpdatePanel コントロールの Update メソッドも公開します。

複数のユーザーコントロールを持つ ASP.NET Web ページを作成する

このチュートリアルの例では、AdventureWorks サンプルデータベースから従業員情報のマスター/詳細ページを作成します。1 つのユーザーコントロールでは、GridView コントロールを使用して、従業員の名前の一覧を表示し、選択、ページの切り替え、および並べ替えをサポートします。もう 1 つのユーザーコントロールでは、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();
}

Web ページにユーザーコントロールを追加する

ここで、ASP.NET Web ページにユーザーコントロールを追加し、内部 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 イベントのハンドラが含まれています。このイベントは、内部 SelectedIndexChanged コントロールの GridView イベントが発生したときに発生します。ハンドラ内のコードは、従業員が選択されるか、選択されている従業員が従業員一覧の現在のページに表示されなくなったときに、明示的に従業員詳細情報のユーザーコントロールを更新します。

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

ASP.NET UpdatePanel コントロールとユーザー コントロールの使用

複数のユーザー コントロールを持つ ASP.NET Web ページを作成する

ユーザー コントロールに UpdatePanel コントロールを含める