UpdatePanel-Steuerelement – Einführung

Artikel
10/22/2014

Aktualisiert: November 2007

In diesem Lernprogramm fügen Sie Unterstützung für Teilaktualisierungen von Seiten hinzu, indem Sie zwei ASP.NET-AJAX-Serversteuerelemente verwenden: das ScriptManager Steuerelement und das UpdatePanel Steuerelement. Durch diese Steuerelemente ist es nicht mehr erforderlich, dass bei jedem Postback die gesamte Seite aktualisiert wird. Dadurch wird die Benutzerfreundlichkeit verbessert. Weitere Hintergrundinformationen zu Teilaktualisierungen von Seiten finden Sie unter Übersicht über das Teilrendering von Seiten.

Vorbereitungsmaßnahmen

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

Microsoft Visual Studio 2005 oder Microsoft Visual Web Developer Express Edition.
Eine AJAX-fähige ASP.NET-Website.

So verwenden Sie ein UpdatePanel-Steuerelement

Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das Steuerelement ScriptManager, um es dieser Seite hinzuzufügen.
Doppelklicken Sie auf das UpdatePanel-Steuerelement, um es der Seite hinzuzufügen.
Klicken Sie in das UpdatePanel-Steuerelement, und doppelklicken Sie dann in der Toolbox auf der Registerkarte Standard auf die Steuerelemente Label und Button, um sie dem UpdatePanel-Steuerelement hinzuzufügen.

Hinweis:

Stellen Sie sicher, dass Sie das Label-Steuerelement und das Button-Steuerelement innerhalb des UpdatePanel-Steuerelements hinzufügen.
Legen Sie dann die Text-Eigenschaft von Label auf Bereich erstellt fest.
Doppelklicken Sie auf das Button-Steuerelement, um einen Handler für das Click-Ereignis der Schaltfläche hinzuzufügen.

Hinweis:
Stellen Sie sicher, dass Sie das Label-Steuerelement und das Button-Steuerelement innerhalb des UpdatePanel-Steuerelements hinzufügen.

Fügen Sie dem Click-Handler den folgenden Code hinzu, durch den für den Wert der Bezeichnung im Anzeigebereich die aktuelle Zeit festgelegt wird.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

Speichern Sie die Änderungen, und drücken Sie STRG+F5, um die Seite in einem Browser anzuzeigen.

Klicken Sie auf die Schaltfläche.

Beachten Sie, dass sich der Text in diesem Bereich verändert, sodass der Zeitpunkt angezeigt wird, an dem die letzte Aktualisierung der Inhalte des Bereichs stattgefunden hat. Dieser Text wird im Click-Ereignishandler der Schaltfläche festgelegt.

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

<%@ Page Language="VB" %>

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

<script >
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </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 >

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

    </div>
    </form>
</body>
</html>

Der Bereichsinhalt ändert sich bei jedem Klick auf die Schaltfläche, jedoch wird dabei nicht die gesamte Seite aktualisiert. Die ChildrenAsTriggers-Eigenschaft eines UpdatePanel-Steuerelements ist in der Standardeinstellung auf true festgelegt. Wenn diese Eigenschaft auf true festgelegt wird, beteiligen sich die Steuerelemente innerhalb des Bereichs an Teilaktualisierungen von Seiten, sobald irgendein Steuerelement im Bereich einen Postback auslöst.

Vorteile des UpdatePanel-Steuerelements

Die Vorteile des UpdatePanel-Steuerelements zeigen sich am besten, wenn der Seite einige Steuerelemente hingefügt werden, die nicht im UpdatePanel enthalten sind. Dann zeigt sich, wie weit sich ihr Verhalten von dem der Steuerelemente im Updatebereich unterscheidet.

So veranschaulichen Sie die Vorteile des UpdatePanel-Steuerelements

Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement, um es dieser Seite hinzuzufügen.
Doppelklicken Sie auf das UpdatePanel-Steuerelement, um es der Seite hinzuzufügen.
Klicken Sie in das UpdatePanel-Steuerelement, und doppelklicken Sie dann in der Toolbox auf der Registerkarte Standard auf ein Calendar-Steuerelement, um es dem UpdatePanel-Steuerelement hinzuzufügen.

Hinweis:

Stellen Sie sicher, dass Sie das Calendar-Steuerelement innerhalb des UpdatePanel-Steuerelements hinzufügen.
Klicken Sie außerhalb des UpdatePanel-Steuerelements, und fügen Sie der Seite dann ein zweites Calendar-Steuerelement hinzu.

Dieses Steuerelement ist nicht Teil des UpdatePanel-Steuerelements.
Speichern Sie die Änderungen. Drücken Sie dann STRG+F5, um die Seite in einem Browser anzuzeigen.
Navigieren Sie in einem Kalender, der sich innerhalb des UpdatePanel-Steuerelements befindet, zum vorherigen oder nächstem Monat.

Der angezeigte Monat ändert sich, ohne dass die ganze Seite aktualisiert wird.

Hinweis:
Stellen Sie sicher, dass Sie das Calendar-Steuerelement innerhalb des UpdatePanel-Steuerelements hinzufügen.

Navigieren Sie in einem Kalender, der sich außerhalb des UpdatePanel-Steuerelements befindet, zum vorherigen oder nächstem Monat.

Die ganze Seite wird aktualisiert.

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

<%@ Page 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 Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Aktualisieren eines UpdatePanel-Steuerelements mit einer externen Schaltfläche

Standardmäßig verursacht ein Postback-Steuerelement (z. B. eine Schaltfläche) in einem UpdatePanel-Steuerelement eine Teilaktualisierung einer Seite. Wie bereits gezeigt wurde, löst dagegen eine Schaltfläche oder ein anderes Steuerelement außerhalb eines UpdatePanel-Steuerelementes standardmäßig die Aktualisierung der gesamten Seite aus.

Sie können darüber hinaus ein Steuerelement außerhalb des UpdatePanel konfigurieren, das als Trigger nur die Aktualisierung des UpdatePanel auslöst.

So aktualisieren Sie ein UpdatePanel-Steuerelement mit einer externen Schaltfläche

Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement und das UpdatePanel-Steuerelement, um der Seite je ein Steuerelement hinzuzufügen.
Klicken Sie innerhalb des UpdatePanel-Steuerelements, und doppelklicken Sie dann in der Toolbox auf der Registerkarte Standard auf das Label-Steuerelement, um es dem UpdatePanel-Steuerelement hinzuzufügen.
Legen Sie dann die Text-Eigenschaft der Bezeichnung auf Bereich erstellt fest.
Klicken Sie außerhalb des UpdatePanel -Steuerelements, und fügen Sie dann ein Button Steuerelement hinzu.
Doppelklicken Sie auf das Button-Steuerelement, um einen Handler für das Click-Ereignis der Schaltflächen hinzuzufügen.

Fügen Sie dem Click-Handler den folgenden Code hinzu, durch den für den Wert der Bezeichnung im Anzeigebereich die aktuelle Zeit festgelegt wird.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

Wechseln Sie in die Entwurfsansicht, wählen Sie UpdatePanel, und prüfen Sie anschließend die Anzeige im Fenster Eigenschaften.

Hinweis:

Wenn das Fenster Eigenschaften nicht angezeigt wird, drücken Sie F4.
Doppelklicken Sie im Feld Trigger auf die Schaltfläche mit den Auslassungszeichen (...).

Das Dialogfeld UpdatePanelTrigger-Auflistungs-Editor wird angezeigt.
Klicken Sie auf Hinzufügen, um einen neuen Trigger hinzuzufügen.
Wählen Sie im Feld ControlID der Triggereigenschaften in der Dropdownliste die Option Button1 aus.

In diesem Beispiel wurde die EventName-Eigenschaft des Triggers nicht angegeben. Daher löst das Standardereignis der Schaltfläche (das Click-Ereignis) die Aktualisierung des UpdatePanel-Steuerelements aus.
Klicken Sie im Auflistungs-Editor auf OK.
Speichern Sie die Änderungen. Drücken Sie dann STRG+F5, um die Seite in einem Browser anzuzeigen.
Klicken Sie auf die Schaltfläche.

Der Text im Bereich ändert sich, um den Zeitpunkt anzuzeigen, an dem der Bereichsinhalt zuletzt aktualisiert wurde.

Hinweis:
Wenn das Fenster Eigenschaften nicht angezeigt wird, drücken Sie F4.

Klicken Sie noch einige weitere Male auf die Schaltfläche.

Die Zeitangabe ändert sich, jedoch wird nicht die ganze Seite aktualisiert.

Wenn Sie außerhalb von UpdatePanel auf die Schaltfläche klicken, wird der Bereichsinhalt aktualisiert, weil die Schaltfläche als Trigger für das UpdatePanel-Steuerelement konfiguriert wurde. Wenn Sie auf eine Schaltfläche klicken, die als Trigger konfiguriert wurde, wird ein asynchrones Postback ausgeführt und eine Aktualisierung des damit verbundenen UpdatePanel ausgelöst. Dieses Verhalten ist vergleichbar mit dem Verhalten im ersten Beispiel dieses Lernprogramms, bei dem sich die Schaltfläche innerhalb des UpdatePanel befunden hat.

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

<%@ Page Language="VB" %>

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

<script >
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></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 >

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

Zusammenfassung

Dieses Lernprogramm enthält die Grundlagen zur Verwendung eines UpdatePanel-Steuerelements für Teilaktualisierungen von Seiten. Sie müssen stets ein ScriptManager-Steuerelement und anschließend ein UpdatePanel-Steuerelement hinzufügen. Standardmäßig bewirken Steuerelemente innerhalb des Bereiches, dass bei der Ausführung eines Postbacks der Bereich aktualisiert wird. Durch externe Steuerelemente kann die Aktualisierung eines UpdatePanel ausgelöst werden, wenn diese als Trigger für diesen Bereich konfiguriert wurden.

Im nächsten Schritt erfahren Sie, wie der Seite mehrere UpdatePanel-Steuerelemente hinzugefügt werden. Weitere Informationen finden Sie unter Erstellen einer einfachen ASP.NET-Seite mit mehreren UpdatePanel-Steuerelementen.

Siehe auch

Konzepte

Übersicht über das Teilrendering von Seiten

Referenz

UpdatePanel

ScriptManager

UpdatePanel-Steuerelement – Einführung

Vorbereitungsmaßnahmen

So verwenden Sie ein UpdatePanel-Steuerelement

Vorteile des UpdatePanel-Steuerelements

So veranschaulichen Sie die Vorteile des UpdatePanel-Steuerelements

Aktualisieren eines UpdatePanel-Steuerelements mit einer externen Schaltfläche

So aktualisieren Sie ein UpdatePanel-Steuerelement mit einer externen Schaltfläche

Zusammenfassung

Siehe auch

Konzepte

Referenz

Zusätzliche Ressourcen