次の方法で共有


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

更新 : 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 コントロール内にないかのように表示されます。

Bb386573.alert_note(ja-jp,VS.90).gifメモ :

レガシ描画向けに構成されている 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 クラスの概要