マスタページでの ASP.NET UpdatePanel コントロールの使用

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

更新 : 2007 年 11 月

UpdatePanel コントロールを含む ASP.NET ページには、ScriptManager コントロールも必要です。マスタページで UpdatePanel コントロールを使用するには、マスタページに ScriptManager コントロールを配置します。この場合、マスタページはすべてのコンテンツページに ScriptManager コントロールを提供します。個々のコンテンツページで部分ページ更新を有効にしない場合は、それらのページの部分ページ更新を無効にできます。

コンテンツページごとに ScriptManager コントロールを配置することもできます。この方法は、一部のコンテンツページだけに UpdatePanel コントロールを含める場合に使用します。

前提条件

独自の開発環境でこの手順を実装するための要件は次のとおりです。

Visual Web Developer Express Edition または Microsoft Visual Studio 2005。
AJAX 対応の ASP.NET Web サイト。

コンテンツページに UpdatePanel コントロールを追加するには

新しいマスタページを作成し、デザインビューに切り替えます。
ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。この ScriptManager コントロールは、ContentPlaceHolder コントロールの外側に追加する必要があります。
ContentPlaceHolder コントロールの外側に、"Master Page" というテキストを追加します。
ツールボックスの [HTML] タブから、[Horizontal Rule] 要素をテキストの後へドラッグします。
マスタページのコンテンツページを作成します。

ソリューションエクスプローラで、プロジェクトの名前を右クリックし、[新しい項目の追加] をクリックします。[新しい項目の追加] ダイアログボックスで、[マスタページを選択する] チェックボックスをオンにし、[OK] をクリックします。
Content コントロールの内部に "Content Page" というテキストを入力し、ツールボックスから UpdatePanel コントロールを追加します。
UpdatePanel コントロールの内部に Calendar コントロールを追加します。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

予定表で、前後の月に移動するためのコントロールをクリックします。

ページ全体を更新せずに予定表が変更されます。これは、予定表が、マスタページと関連付けられていないページ上の UpdatePanel コントロールの内部にある場合の動作です。

例では、UpdatePanel コントロールが表すページの領域がよくわかるようになっています。

<%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server">
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server"></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server">
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server"></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Master 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>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

<%@ Master 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>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

マスタページからの UpdatePanel コントロールの更新

ここでは、非同期ポストバックが発生するマスタページにコントロールを追加した後で、コンテンツページの UpdatePanel コントロールを更新します。

すべてのコンテンツページで部分ページ更新を有効にするには

マスタページで、デザインビューに切り替えます。
マスタページの ScriptManager コントロールの後に、テキストと 2 つのボタンを追加します。
1 つのボタンの ID を "DecrementButton" に設定し、Text 値を "-" に設定します。もう 1 つのボタンの ID を "IncrementButton" に設定し、Text 値を "+" に設定します。

これらのボタンにより、コンテンツページ内の予定表で選択した日付がインクリメントおよびデクリメントされます。
[+] (プラス) ボタンを選択し、[プロパティ] ウィンドウのツールバーの [イベント] ボタンをクリックし、[クリック] ボックスに「MasterButton_Click」と入力します。
[-] (マイナス) ボタンについても前の手順を繰り返します。
コントロールの外でページをダブルクリックして、Page_Load イベントハンドラを作成します。

ハンドラに次のコードを追加して、2 つのボタンを非同期ポストバックコントロールとして登録します。

Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
}

次のコードを追加して、MasterButton_Click という名前の Click ハンドラを作成します。

Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

    Select Case Sender.ID

        Case "IncrementButton"
            Me.Offset = Me.Offset + 1
        Case "DecrementButton"
            Me.Offset = Me.Offset - 1
    End Select
    Dim upl As UpdatePanel
    upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
    upl.Update()
    Dim cal As Calendar
    cal = ContentPlaceHolder1.FindControl("Calendar1")
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
    cal.SelectedDate = newDateTime
End Sub

protected void MasterButton_Click(object sender, EventArgs e)
{   
    switch (((Control)sender).ID)
    {
        case "IncrementButton":
            this.Offset = this.Offset + 1;
            break;
        case "DecrementButton":
            this.Offset = this.Offset - 1;
            break;
    }
    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
    cal.SelectedDate = newDateTime;
}

次のコードを追加して、今日の日付と選択した日付の差を追跡する Offset というパブリックプロパティをマスタページに作成します。

Public Property Offset() As Integer
    Get
        If ViewState("Offset") Is Nothing Then
            Return 0
        Else : Return ViewState("Offset")
        End If
    End Get
    Set(ByVal value As Integer)
        ViewState("Offset") = value
    End Set
End Property

public Int32 Offset
{
    get
    { return (Int32)(ViewState["Offset"] ?? 0);}
    set
    { ViewState["Offset"] = value;}
}

コンテンツページで、デザインビューに切り替えて Calendar コントロールをダブルクリックし、SelectionChanged イベントのイベントハンドラを作成します。

SelectionChanged イベントハンドラに次のコードを追加して、ユーザーが日付を選択するときの Offset プロパティを設定します。

Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
    Dim selectedDate As DateTime
    selectedDate = Calendar1.SelectedDate
    Master.Offset = _
       Calendar1.SelectedDate.Subtract(DateTime.Today).Days

End Sub

protected void Calendar1_SelectionChanged(object sender, 
    EventArgs e)
{
    DateTime selectedDate = Calendar1.SelectedDate;
    Master.Offset =
       ((TimeSpan)Calendar1.SelectedDate.Subtract(
       DateTime.Today)).Days;
}

コンテンツページに切り替え、選択した日付を現在の日付に設定する Page_Load イベントハンドラを追加します。

Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
    Calendar1.SelectedDate = newDateTime
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    DateTime newDateTime = 
        DateTime.Today.Add(new 
        TimeSpan(Master.Offset, 0, 0, 0));
    Calendar1.SelectedDate = newDateTime;
}

ページに @ MasterType ディレクティブを追加して、マスタページの Offset プロパティを厳密に型指定されたプロパティとして参照できるようにします。
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
コンテンツページで、デザインビューに切り替え、UpdatePanel コントロールを選択します。
[プロパティ] ウィンドウで、UpdatePanelUpdateMode プロパティを Conditional に設定します。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。
予定表で、前後の月に移動するためのコントロールをクリックします。

ページ全体を更新せずに予定表が変更されます。

予定表で日付を選択し、マスタページの選択した日付を変更するボタンをクリックします。

これらの変更は、ページ全体を更新せずに行われます。

例では、UpdatePanel コントロールが表すページの領域がよくわかるようになっています。

<%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script runat="server">
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
        Calendar1.SelectedDate = newDateTime
    End Sub
    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
        Dim selectedDate As DateTime
        selectedDate = Calendar1.SelectedDate
        Master.Offset = _
           Calendar1.SelectedDate.Subtract(DateTime.Today).Days

    End Sub
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime = 
            DateTime.Today.Add(new 
            TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }
    protected void Calendar1_SelectionChanged(object sender, 
        EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Master 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">
    Public Property Offset() As Integer
        Get
            If ViewState("Offset") Is Nothing Then
                Return 0
            Else : Return ViewState("Offset")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("Offset") = value
        End Set
    End Property
    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

        Select Case Sender.ID

            Case "IncrementButton"
                Me.Offset = Me.Offset + 1
            Case "DecrementButton"
                Me.Offset = Me.Offset - 1
        End Select
        Dim upl As UpdatePanel
        upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
        upl.Update()
        Dim cal As Calendar
        cal = ContentPlaceHolder1.FindControl("Calendar1")
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
        cal.SelectedDate = newDateTime
    End Sub
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

<%@ Master 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">
    public Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    protected void MasterButton_Click(object sender, EventArgs e)
    {   
        switch (((Control)sender).ID)
        {
            case "IncrementButton":
                this.Offset = this.Offset + 1;
                break;
            case "DecrementButton":
                this.Offset = this.Offset - 1;
                break;
        }
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
        Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
        DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
        cal.SelectedDate = newDateTime;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

コンテンツページでの部分ページ更新の無効化

マスタページに ScriptManager コントロールを追加した場合、既定では、すべてのコンテンツページで部分ページ更新が有効になります。個々のコンテンツページで部分的な更新を有効にする必要がない場合は、この機能を無効にできます。コンテンツページが部分ページ更新と互換性のないカスタムコントロールを含んでいる場合に、この方法を使用します。

コンテンツページで部分ページ更新を無効にするには

コンテンツページで、ScriptManager コントロールの EnablePartialRendering プロパティを false に設定するページの Init イベントのハンドラを作成します。

EnablePartialRendering プロパティの状態は、コンテンツページの Init イベントの間または前に変更する必要があります。

レビュー

このチュートリアルでは、マスタページで UpdatePanel コントロールを使用する方法を説明しました。マスタページに ScriptManager コントロールがある場合、コンテンツページで ScriptManager コントロールを宣言しなくても、コンテンツページで UpdatePanel コントロールを使用できます。

マスタページで部分ページレンダリングが有効になっているときに個々のコンテンツページの部分ページレンダリングを無効にするには、プログラムによって、コンテンツページの部分ページレンダリングを無効にします。

参照

マスタ ページでの ASP.NET UpdatePanel コントロールの使用

前提条件

コンテンツ ページに UpdatePanel コントロールを追加するには

マスタ ページからの UpdatePanel コントロールの更新

すべてのコンテンツ ページで部分ページ更新を有効にするには

コンテンツ ページでの部分ページ更新の無効化

コンテンツ ページで部分ページ更新を無効にするには