部分ページレンダリングの概要

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

更新 : 2007 年 11 月

部分ページレンダリングにより、ポストバックの結果としてページ全体を再表示する必要がなくなります。代わりに、変更された個々のページ領域のみが更新されます。このため、ポストバックのたびにページ全体の再読み込みが表示されることはなくなり、Web ページとのやり取りがよりシームレスになります。ASP.NET を使用すると、クライアントスクリプトを記述しなくても、新しい ASP.NET Web ページおよび既存の ASP.NET Web ページに部分ページレンダリングを追加できます。

このトピックは、次のセクションで構成されています。

シナリオ
機能
背景
コード例
クラスリファレンス

シナリオ

既存の ASP.NET アプリケーションを拡張して、AJAX (Asynchronous JavaScript and XML) 機能が組み込まれた新しいアプリケーションを開発できます。以下の目的で、AJAX 機能を使用します。

機能が豊富で、ユーザーの操作への応答が良く、従来からのクライアントアプリケーションと同様に動作する Web ページを開発することにより、ユーザーエクスペリエンスを向上させるため。
ページ全体の再表示を削減し、ページのちらつきを回避するため。
クライアントスクリプトの作成を排除し、ブラウザ間に互換性を持たせるため。
クライアントスクリプトを記述の作成を排除し、AJAX スタイルのクライアント/サーバー通信を実行するため。
ASP.NET AJAX Control Toolkit のコントロールおよびコンポーネントを使用するため。
カスタムの ASP.NET AJAX コントロールを開発するため。

部分ページレンダリング機能

部分ページレンダリングは、ASP.NET のサーバーコントロールおよび Microsoft AJAX Library のクライアント機能に依存しています。部分ページレンダリングを有効にするために、Microsoft AJAX Library を使用する必要はありません。この機能は、ASP.NET AJAX サーバーコントロールを使用するときに自動的に提供されるためです。ただし、クライアントライブラリに公開されている API を使用すると、追加の AJAX 機能を利用できます。

部分ページレンダリングをサポートする ASP.NET の主な機能は次のとおりです。

ASP.NET サーバーコントロールに類似した動作の宣言モデル。多くの場合、宣言マークアップを使用するのみで、部分ページレンダリングを指定できます。
部分ページ更新に必要な基になるタスクを実行するサーバーコントロール。これには、ScriptManager コントロールおよび UpdatePanel コントロールが含まれます。
共通タスクのための、ASP.NET AJAX サーバーコントロールと Microsoft AJAX Library との統合。このタスクには、ユーザーがポストバックを取り消すことができるようにすること、非同期のポストバック中にカスタムの進捗メッセージを表示すること、および同時に実行されている非同期ポストバックの処理方法を決定することが含まれます。
部分ページレンダリングのエラー処理オプション。これにより、ブラウザでのエラーの表示方法をカスタマイズできます。
ASP.NET の AJAX 機能に組み込まれている、ブラウザ間での互換性。サーバーコントロールを使用するだけで、自動的に正しいブラウザ機能が起動されます。

背景

ASP.NET Web サーバーコントロールを使用して構築された通常の Web ページでは、ページでのユーザーによる操作 (ボタンをクリックするなど) で開始されたポストバックを実行します。その応答として、サーバーが新しいページを表示します。この場合、ポストバック間で変更されなかったコントロールおよびテキストが頻繁に再表示されます。

部分ページレンダリングを使用すると、ページの個々の領域を非同期に再表示できるため、ユーザーへのページの応答が速くなります。ASP.NET AJAX Web サーバーコントロールを使用して部分ページレンダリングを実装できます。オプションで、Microsoft AJAX Library 内の API を使用するクライアントスクリプトを記述することもできます。

部分ページ更新用のサーバーコントロール

ASP.NET Web ページに AJAX 機能を追加するには、ページ内の更新する個々のセクションを指定します。次に、そのセクションのコンテンツを UpdatePanel コントロールに含めます。UpdatePanel コントロールのコンテンツは、HTML でも、その他の ASP.NET コントロールでもかまいません。UpdatePanel コントロールは、他のコントロールと同様にページに追加できます。たとえば、Visual Studio で、ツールボックスから Web ページにドラッグすることも、ページの宣言マークアップを使用することにより追加することもできます。UpdatePanel コントロールのマークアップの例を次に示します。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- Place updatable markup and controls here. -->
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- Place updatable markup and controls here. -->
    </ContentTemplate>
</asp:UpdatePanel>

既定では、更新パネル内のコントロール (子コントロール) から発生するポストバックは、自動的に非同期のポストバックを開始し、部分ページ更新を実行します。更新パネル外のコントロールで非同期ポストバックを実行し、UpdatePanel コントロールのコンテンツを再表示するように指定することもできます。非同期ポストバックを実行するコントロールは、トリガと呼ばれます。トリガの詳細については、「複数の UpdatePanel コントロールを使用した単純な ASP.NET ページの作成」を参照してください。

非同期ポストバックは、同期ポストバックに類似した動作をします。サーバーページのライフサイクルイベントはすべて発生し、ビューステートおよびフォームデータは保持されます。ただし、描画フェーズでは、UpdatePanel コントロールのコンテンツのみがブラウザに送信されます。ページの他の部分は変更されません。

部分ページレンダリングをサポートするには、ページに ScriptManager コントロールを含める必要があります。ScriptManager コントロールにより、ページのすべての更新パネルおよびそのトリガが追跡されます。サーバー間で部分ページレンダリングの動作が調整され、非同期ポストバックの結果、表示するページのセクションが決定されます。

ポストバックがパネル内から発生するたびにコンテンツが再表示される UpdatePanel コントロールの例を次に示します。

<%@ Page Language="VB" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
        Content to update incrementally without a full
        page refresh. 
        <br />
        Last update:  <%=DateTime.Now.ToString() %>
        <br />
        <asp:Calendar ID="Calendar" runat="server"/>
        </fieldset>
      </ContentTemplate>
      </asp:UpdatePanel>
      <script type="text/javascript" language="javascript">
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_pageLoaded(PageLoadedEventHandler);
      function PageLoadedEventHandler() {
         // custom script
      }
      </script>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
        Content to update incrementally without a full
        page refresh. 
        <br />
        Last update:  <%=DateTime.Now.ToString() %>
        <br />
        <asp:Calendar ID="Calendar" runat="server"/>
        </fieldset>
      </ContentTemplate>
      </asp:UpdatePanel>
      <script type="text/javascript" language="javascript">
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_pageLoaded(PageLoadedEventHandler);
      function PageLoadedEventHandler() {
         // custom script
      }
      </script>
    </div>
    </form>
</body>
</html>

部分ページレンダリングを有効にする UpdatePanel コントロールの使用方法の他の例については、「コード例」に記載されているトピックを参照してください。

部分ページ更新に対するクライアントスクリプトの使用方法

Microsoft AJAX Library の ECMAScript (JavaScript) PageRequestManager クラスは、部分ページ更新をサポートします。これはブラウザで実行され、非同期ポストバックへの応答を管理し、個々の領域のコンテンツを更新します。この機能を有効にするために必要な作業はありません。ページに 1 つ以上の UpdatePanel コントロールと 1 つの ScriptManager コントロールを追加すると、自動的に発生します。

JavaScript および PageRequestManager クラスを使用して、ページの部分ページ更新をカスタマイズすることもできます。たとえば、複数のポストバックが実行中の場合に特定の非同期ポストバックを優先するスクリプトを記述できます。また、進行中のポストバックをユーザーが取り消すことができるようにすることもできます。

ページの読み込みが完了したときに呼び出されるイベントハンドラを提供するクライアントスクリプトの例を次に示します。

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
   // custom script
}
</script>

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
   // custom script
}
</script>

部分ページレンダリングに Microsoft AJAX Library を使用する方法の詳細については、「PageRequestManager のイベントの処理」および「ASP.NET PageRequestManager クラスの概要」を参照してください。

部分ページレンダリングサポートの有効化

ScriptManager コントロールの EnablePartialRendering プロパティを設定することにより、ページの部分ページレンダリングを有効または無効にできます。ScriptManager コントロールの SupportsPartialRendering プロパティを設定することにより、ページに対して部分ページレンダリングがサポートされているかどうかを指定することもできます。SupportsPartialRendering プロパティを設定せず、さらに EnablePartialRendering プロパティが既定値の true の場合、部分ページレンダリングがサポートされているかどうかは、ブラウザの機能を使用して判別されます。

ページに対して部分ページレンダリングが有効になっていない場合、無効にされた場合、またはブラウザでサポートされていない場合は、フォールバック動作がページで使用されます。通常は非同期ポストバックを実行する操作で、代わりに同期ポストバックが実行され、ページ全体が更新されます。ページの UpdatePanel コントロールはすべて無視され、そのコンテンツは UpdatePanel コントロール内にないかのように表示されます。

メモ :
レガシ描画向けに構成されている ASP.NET Web ページは、AJAX 機能をサポートしません。詳細については、「ASP.NET と XHTML」を参照してください。

コード例

部分ページレンダリングの利用例を次に示します。2 つの UpdatePanel コントロールがあります。一方のコントロールはユーザー入力を受け取り、もう一方は入力の概要を表示します。

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>

<!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 id="Head1" runat="server">
    <title>Enter New Employees</title>
    <script runat="server">
        Private EmployeeList As List(Of Employee)

        Protected Sub Page_Load()
            If Not IsPostBack Then
                EmployeeList = New List(Of Employee)
                EmployeeList.Add(New Employee(1, "Jump", "Dan"))
                EmployeeList.Add(New Employee(2, "Kirwan", "Yvette"))
                ViewState("EmployeeList") = EmployeeList
            Else
                EmployeeList = CType(ViewState("EmployeeList"), List(Of Employee))
            End If

            EmployeesGridView.DataSource = EmployeeList
            EmployeesGridView.DataBind()
        End Sub

        Protected Sub InsertButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            If String.IsNullOrEmpty(FirstNameTextBox.Text) Or _
               String.IsNullOrEmpty(LastNameTextBox.Text) Then Return

            Dim employeeID As Integer = EmployeeList(EmployeeList.Count - 1).EmployeeID + 1

            Dim lastName As String = Server.HtmlEncode(FirstNameTextBox.Text)
            Dim firstName As String = Server.HtmlEncode(LastNameTextBox.Text)

            FirstNameTextBox.Text = String.Empty
            LastNameTextBox.Text = String.Empty

            EmployeeList.Add(New Employee(employeeID, lastName, firstName))
            ViewState("EmployeeList") = EmployeeList

            EmployeesGridView.DataBind()
            EmployeesGridView.PageIndex = EmployeesGridView.PageCount
        End Sub

        Protected Sub CancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            FirstNameTextBox.Text = String.Empty
            LastNameTextBox.Text = String.Empty
        End Sub

        <Serializable()> _
        Public Class Employee
            Private _employeeID As Integer
            Private _lastName As String
            Private _firstName As String

            Public ReadOnly Property EmployeeID() As Integer
                Get
                    Return _employeeID
                End Get
            End Property

            Public ReadOnly Property LastName() As String
                Get
                    Return _lastName
                End Get
            End Property

            Public ReadOnly Property FirstName() As String
                Get
                    Return _firstName
                End Get
            End Property

            Public Sub New(ByVal employeeID As Integer, ByVal lastName As String, ByVal firstName As String)
                _employeeID = employeeID
                _lastName = lastName
                _firstName = firstName
            End Sub
        End Class

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;</div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
        <table>
            <tr>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="InsertEmployeeUpdatePanel" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                          <table cellpadding="2" border="0" style="background-color:#7C6F57">
                            <tr>
                              <td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox" 
                                             Text="First Name" ForeColor="White" /></td>
                              <td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox" 
                                             Text="Last Name" ForeColor="White" /></td>
                              <td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td>
                                <asp:LinkButton ID="InsertButton" runat="server" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
                                <asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
                              </td>
                            </tr>
                          </table>
                          <asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="EmployeesUpdatePanel" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                                BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
                                <FooterStyle BackColor="Tan" />
                                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                <Columns>
                                    <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
                                    <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                                    <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                                </Columns>
                                <PagerSettings PageButtonCount="5" />
                            </asp:GridView>
                            <asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>

<!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>Enter New Employees</title>
    <script runat="server">
        private List<Employee> EmployeeList;

        protected void Page_Load()
        {
            if (!IsPostBack)
            {
                EmployeeList = new List<Employee>();
                EmployeeList.Add(new Employee(1, "Jump", "Dan"));
                EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
                ViewState["EmployeeList"] = EmployeeList;
            }
            else
                EmployeeList = (List<Employee>)ViewState["EmployeeList"];

            EmployeesGridView.DataSource = EmployeeList;
            EmployeesGridView.DataBind();
        }

        protected void InsertButton_Click(object sender, EventArgs e)
        {
            if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
               String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }

            int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;

            string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
            string firstName = Server.HtmlEncode(LastNameTextBox.Text);

            FirstNameTextBox.Text = String.Empty;
            LastNameTextBox.Text = String.Empty;

            EmployeeList.Add(new Employee(employeeID, lastName, firstName));
            ViewState["EmployeeList"] = EmployeeList;

            EmployeesGridView.DataBind();
            EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
        }

        protected void CancelButton_Click(object sender, EventArgs e)
        {
            FirstNameTextBox.Text = String.Empty;
            LastNameTextBox.Text = String.Empty;
        }

        [Serializable]
        public class Employee
        {
            private int _employeeID;
            private string _lastName;
            private string _firstName;

            public int EmployeeID
            {
                get { return _employeeID; }
            }

            public string LastName
            {
                get { return _lastName; }
            }

            public string FirstName
            {
                get { return _firstName; }
            }

            public Employee(int employeeID, string lastName, string firstName)
            {
                _employeeID = employeeID;
                _lastName = lastName;
                _firstName = firstName;
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;</div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
        <table>
            <tr>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="InsertEmployeeUpdatePanel" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                          <table cellpadding="2" border="0" style="background-color:#7C6F57">
                            <tr>
                              <td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox" 
                                             Text="First Name" ForeColor="White" /></td>
                              <td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox" 
                                             Text="Last Name" ForeColor="White" /></td>
                              <td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td>
                                <asp:LinkButton ID="InsertButton" runat="server" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
                                <asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
                              </td>
                            </tr>
                          </table>
                          <asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="EmployeesUpdatePanel" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                                BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
                                <FooterStyle BackColor="Tan" />
                                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                <Columns>
                                    <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
                                    <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                                    <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                                </Columns>
                                <PagerSettings PageButtonCount="5" />
                            </asp:GridView>
                            <asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

方法およびチュートリアルのトピック

クラスリファレンス

部分ページレンダリングの主要なサーバークラスの一覧を次の表に示します。

クラス	説明
UpdatePanel	部分ページレンダリングで更新されるページの領域を指定します。
ScriptManager	ASP.NET 内の AJAX コンポーネント、部分ページレンダリング、クライアント要求、および ASP.NET Web ページでのサーバー応答を管理します。
ScriptManagerProxy	ScriptManager コントロールが既に親要素に含まれるページに、入れ子になったコンポーネントがスクリプト参照およびサービス参照を追加できるようにします。

部分ページレンダリングの主要なクライアントクラスの一覧を次の表に示します。

クラス	説明
Sys.WebForms.PageRequestManager クラス	クライアントの部分ページレンダリングを管理し、カスタムのクライアントスクリプトにメンバを公開します。

参照

概念

UpdatePanel コントロールの概要

ASP.NET PageRequestManager クラスの概要

部分ページ レンダリングの概要

シナリオ

部分ページ レンダリング機能

背景

部分ページ更新用のサーバー コントロール

部分ページ更新に対するクライアント スクリプトの使用方法

部分ページ レンダリング サポートの有効化