チュートリアル : 個別に更新する 2 つの領域を持つページを作成する方法

  • [アーティクル]

このチュートリアルでは、1 つのページで複数の UpdatePanel コントロールを使用します。1 つのページで複数の UpdatePanel コントロールを使用すると、ページの領域の段階的な更新を個別に、または同時に行うことができます。ページの部分的な更新の詳細については、「部分ページ レンダリングの概要」を参照してください。

すべての ASP.NET AJAX コントロールが正常に機能するためには、web.config ファイル内に特定の設定が必要です。これらのコントロールのいずれかを使用しようとしたときに、サイトに必要な web.config ファイルが存在しない場合、コントロールが表示されるはずのページの [デザイン] ビューにエラーが表示されます。[デザイン] ビューでその状態のコントロールをクリックすると、Microsoft Expression Web のオプションが表示されて、新しい web.config ファイルを作成するか、既存の web.config ファイルを更新するかの選択を求められます。

個別に更新する 2 つの領域を持つページを作成するには

  1. [ファイル] メニューの [新規作成] をポイントし、[ASPX] をクリックします。

  2. ASPX ページの [デザイン] ビューにカーソルを置きます。

  3. [ツールボックス] パネルの [ASP.NET コントロール] の [AJAX] で ScriptManager コントロールをダブルクリックしてページに追加します。.NET Framework バージョン 3.5 をサポートするためにサイトに web.config ファイルを追加するよう求めるダイアログ ボックスが表示された場合は、[はい] をクリックします。非ビジュアル コントロールの視覚補助をオンにするかどうかを確認するダイアログ ボックスが表示されたら、[はい] をクリックします。

  4. [ツールボックス] パネルの [ASP.NET コントロール] の [AJAX] で、UpdatePanel コントロールを 2 回ダブルクリックして、2 つの UpdatePanel コントロールをページに追加します。

  5. ページで UpdatePanel コントロールの 1 つを選択し、[タグのプロパティ] パネルで、[UpdateMode] プロパティを [Conditional] に設定します。他の UpdatePanel コントロールに対してこの手順を繰り返します。

  6. [ツールボックス] パネルの [ASP.NET コントロール] の [標準] カテゴリで、Label コントロールを [デザイン] ビューの UpdatePanel コントロールの 1 つにドラッグします。

  7. ページで Label コントロールを選択し、[タグのプロパティ] パネルで、[Text] プロパティを "Panel Created" に設定します。

  8. [ツールボックス] パネルの [ASP.NET コントロール] の [標準] カテゴリで、Button コントロールを UpdatePanel コントロールと同じ UpdatePanel コントロールにドラッグします。

  9. ページでボタンを選択し、[タグ プロパティ] パネルで、[Text] プロパティを "Refresh Panel" に設定します。

  10. [ツールボックス] パネルの [ASP.NET コントロール] の [標準] カテゴリで、Calendar コントロールを [デザイン] ビューのもう 1 つの UpdatePanel コントロールにドラッグします。

    Cc295469.8a3d2b47-5420-4c03-b422-bfb6b63ef2bd(ja-jp,Expression.40).png

  11. ページの [コード] ビューで、そのページのページ言語に応じて </head> タグの前に次のいずれかのコード サンプルを追加します。

    <script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

    <script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

  12. [コード] ビューで、<asp:Button runat="server" Text="Refresh Panel" id="Button1" /> タグを探し、"OnClick="Button1_Click" をタグに追加します。

  13. [ファイル] メニューの [上書き保存] をクリックします。

  14. F12 キーを押して、Web ブラウザーでページをプレビューします。

  15. Web ブラウザーのページで、ボタンをクリックします。パネルのテキストが変化し、パネルのコンテンツが最後に更新された時刻が表示されます。カレンダーで、別の月に移動します。もう 1 つのパネルの時刻は変化しません。両方のパネルのコンテンツは個別に更新されます。

    最終的なページのコードを次に示します。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

    レビュー

    このチュートリアルでは、1 つのページで複数の UpdatePanel コントロールを使用する概念を紹介しました。UpdatePanel コントロールが入れ子になっていない場合は、UpdateMode プロパティを Conditional に設定することで、各パネルを個別に更新できます (UpdateMode プロパティの既定値は Always で、パネルはすべての非同期ポストバックに応じて更新されます)。

    パネルが入れ子になっているときは、動作が若干異なります。外側のコントロールと入れ子になっているコントロールの両方で UpdateMode プロパティを Conditional に設定すると、外側のパネルを更新しなくても内側のパネルを更新できます。ただし、外側の更新パネルを更新した場合、内側の更新パネルも更新されます。

    UpdatePanel コントロールの使用方法に関する他のチュートリアルについては、MSDN ライブラリの 「UpdatePanel コントロールの概要 Cc295469.xtlink_newWindow(ja-jp,Expression.40).png」にある方法とチュートリアルのトピックへのリンクを参照してください。これらのチュートリアルは Microsoft Visual Web Developer 用に作成されたものですが、いくつかの例外を除いて Microsoft Expression Web でも同様の方法で使用できます。

関連項目

概念

部分ページ レンダリングの概要
UpdatePanel コントロール
ScriptManager コントロール