Verwenden des ASP.NET-UpdatePanel-Steuerelements mit Masterseiten

  • Artikel

Aktualisiert: November 2007

Für jede ASP.NET-Seite, die ein UpdatePanel-Steuerelement enthält, ist zusätzlich ein ScriptManager-Steuerelement erforderlich. Um UpdatePanel-Steuerelemente mit Masterseiten zu verwenden, können Sie auf der Masterseite ein ScriptManager-Steuerelement hinzufügen. Die Masterseite in diesem Szenario stellt ein ScriptManager-Steuerelement für jede Inhaltsseite bereit. Wenn Teilaktualisierungen von Seiten für einzelne Inhaltsseiten nicht ausgeführt werden sollen, können Sie die Teilaktualisierungen von Seiten für diese Seiten deaktivieren.

Wahlweise können Sie auf jeder Inhaltsseite das ScriptManager-Steuerelement einfügen. Dies empfiehlt sich, wenn nur einige der Inhaltsseiten UpdatePanel-Steuerelemente enthalten sollen.

Vorbereitungsmaßnahmen

Zur Implementierung dieser Prozeduren in Ihrer eigenen Entwicklungsumgebung ist Folgendes erforderlich:

  • Visual Web Developer Express Edition oder Microsoft Visual Studio 2005.

  • Eine AJAX-fähige ASP.NET-Website.

So fügen Sie einer Inhaltsseite ein UpdatePanel-Steuerelement hinzu

  1. Erstellen Sie eine neue Masterseite, und wechseln Sie in die Entwurfsansicht.

  2. Doppelklicken Sie auf der Registerkarte AJAX-Erweiterungen der Toolbox auf das ScriptManager-Steuerelement, um es der Seite hinzuzufügen. Stellen Sie sicher, dass Sie das ScriptManager-Steuerelement außerhalb des ContentPlaceHolder-Steuerelements hinzufügen.

  3. Fügen Sie außerhalb des ContentPlaceHolder-Steuerelements den Text Masterseite hinzu.

  4. Ziehen Sie von der Registerkarte HTML der Toolbox ein Horizontale Trennlinie-Element unter den Text.

  5. Erstellen einer Inhaltsseite für die Masterseite

    Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und klicken Sie anschließend auf Neues Element hinzufügen. Aktivieren Sie im Dialogfeld Neues Element hinzufügen das Kontrollkästchen Masterseite auswählen, und klicken Sie anschließend auf OK.

  6. Geben Sie im Content-Steuerelement den Text Inhaltsseite ein, und fügen Sie anschließend aus der Toolbox ein UpdatePanel-Steuerelement hinzu.

  7. Fügen Sie ein Calendar-Steuerelement in das UpdatePanel-Steuerelement ein.

  8. Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.

  9. Klicken Sie im Kalender auf die Steuerelemente für den vorherigen bzw. nächsten Monat.

    Der Kalender wird geändert, ohne dass die gesamte Seite aktualisiert wird. Dies entspricht dem zu erwartenden Verhalten, wenn sich der Kalender im UpdatePanel-Steuerelement auf einer Seite befindet, die nicht mit einer Masterseite verknüpft ist.

    Das Beispiel ist so formatiert, dass der Bereich der Seite, der das UpdatePanel-Steuerelement darstellt, deutlicher angezeigt wird.

    <%@ 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" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></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" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Aktualisieren des UpdatePanel aus der Masterseite

In diesem Teil des Lernprogramms fügen Sie der Masterseite Steuerelemente hinzu, die ein asynchrones Postback auslösen und anschließend auf der Inhaltsseite das UpdatePanel-Steuerelement aktualisieren.

So aktivieren Sie Teilaktualisierungen von Seiten für alle Inhaltsseiten

  1. Wechseln Sie auf der Masterseite in die Entwurfsansicht.

  2. Fügen Sie auf der Masterseite nach dem ScriptManager-Steuerelement Text und zwei Schaltflächen hinzu.

  3. Legen Sie die ID einer Schaltfläche auf DecrementButton und den Text-Wert dieser Schaltfläche auf "-" fest. Legen Sie die ID der anderen Schaltfläche auf IncrementButton und den Text-Wert dieser Schaltfläche auf "+" fest.

    Mit diesen Schaltflächen wird das im Kalender ausgewählte Datum auf der Inhaltsseite inkrementiert und dekrementiert.

  4. Wählen Sie die +-Schaltfläche (Pluszeichen) aus, und klicken Sie anschließend auf der Symbolleiste des Eigenschaftenfensters auf die Schaltfläche für Ereignisse. Geben Sie im Feld Klicken die Bezeichnung MasterButton_Click ein.

  5. Wiederholen Sie den vorherigen Schritt für die --Schaltfläche (Minuszeichen).

  6. Doppelklicken Sie außerhalb der Steuerelemente auf die Seite, um einen Page_Load-Ereignishandler zu erstellen.

  7. Fügen Sie im Handler den folgenden Code hinzu, um die zwei Schaltflächen als asynchrone Postbacksteuerelemente zu registrieren:

    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);
}

  8. Fügen Sie zum Erstellen eines Click-Handlers mit dem Namen MasterButton_Click den folgenden Code hinzu:

    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;
}

  9. Fügen Sie den folgenden Code hinzu, um auf der Masterseite eine öffentliche Eigenschaft mit dem Namen Offset zu erstellen, mit der die Differenz zwischen dem aktuellen und dem ausgewählten Datum nachverfolgt wird.

    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;}
}

  10. Wechseln Sie auf der Inhaltsseite in die Entwurfsansicht, und doppelklicken Sie anschließend auf das Calendar-Steuerelement, um einen Ereignishandler für das SelectionChanged-Ereignis zu erstellen.

  11. Fügen Sie dem SelectionChanged-Ereignishandler den folgenden Code hinzu. Mit dem Code wird die Offset-Eigenschaft festgelegt, wenn ein Benutzer ein Datum auswählt.

    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;
}

  12. Wechseln Sie auf die Inhaltsseite, und fügen Sie einen Page_Load-Ereignishandler hinzu, mit dem das im Kalender ausgewählte Datum als aktuelles Datum festgelegt wird.

    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;
}

  13. Fügen Sie der Seite eine @ MasterType-Direktive hinzu, sodass auf die Offset-Eigenschaft der Masterseite als Eigenschaft mit starker Typisierung verwiesen werden kann.

    <%@ MasterType VirtualPath="MasterPage.master" %>

    <%@ MasterType VirtualPath="MasterPage.master" %>

  14. Wechseln Sie auf der Inhaltsseite in die Entwurfsansicht, und wählen Sie das UpdatePanel-Steuerelement aus.

  15. Legen Sie im Eigenschaftenfenster für die UpdatePanelUpdateMode-Eigenschaft Conditional fest.

  16. Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.

  17. Klicken Sie im Kalender auf die Steuerelemente für den vorherigen bzw. nächsten Monat.

    Der Kalender wird geändert, ohne dass die gesamte Seite aktualisiert wird.

  18. Wählen Sie im Kalender ein Datum aus. Klicken Sie anschließend auf die Schaltflächen auf der Masterseite, um das ausgewählte Datum zu ändern.

    Diese Änderungen werden durchgeführt, ohne die gesamte Seite zu aktualisieren.

    Das Beispiel ist so formatiert, dass der Bereich der Seite, der das UpdatePanel-Steuerelement darstellt, deutlicher angezeigt wird.

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

<script >
    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"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  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 >
    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"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  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 >
    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" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </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 >
    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" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Deaktivieren von Teilaktualisierungen von Seiten für eine Inhaltsseite

Wenn Sie einer Masterseite ein ScriptManager-Steuerelement hinzufügen, sind Teilaktualisierungen von Seiten standardmäßig für alle Inhaltsseiten aktiviert. Wenn Teilaktualisierungen von Seiten für einzelne Inhaltsseiten nicht ausgeführt werden sollen, können Sie diese Funktionalität deaktivieren. Dies ist empfehlenswert, wenn die Inhaltsseite benutzerdefinierte Steuerelemente enthält, die mit Teilaktualisierungen von Seiten nicht kompatibel sind.

So deaktivieren Sie Teilaktualisierungen von Seiten für eine Inhaltsseite

  • Erstellen Sie auf der Inhaltsseite für das Init-Ereignis der Seite einen Handler, mit dem die EnablePartialRendering-Eigenschaft des ScriptManager-Steuerelements auf false festgelegt wird.

    Der Zustand der EnablePartialRendering-Eigenschaft muss geändert werden, bevor oder während das Init-Ereignis der Inhaltsseite auftritt.

Zusammenfassung

In diesem Lernprogramm wird erläutert, wie ein UpdatePanel-Steuerelement in Masterseiten verwendet wird. Wenn auf der Masterseite ein ScriptManager-Steuerelement verfügbar ist, können Sie auf Inhaltsseiten UpdatePanel-Steuerelemente ohne Deklaration eines ScriptManager-Steuerelements verwenden.

Das Teilrendering für eine einzelne Inhaltsseite muss programmgesteuert deaktiviert werden, wenn für die zugeordnete Masterseite das Teilrendering von Seiten aktiviert ist.

Siehe auch

Aufgaben

UpdatePanel-Steuerelement – Einführung

Erstellen einer einfachen ASP.NET-Seite mit mehreren UpdatePanel-Steuerelementen

Konzepte

Übersicht über ASP.NET-Masterseiten

Verwenden des ASP.NET UpdatePanel-Steuerelements mit datengebundenen Steuerelementen

Referenz

UpdatePanel

ScriptManager