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

Artikel
10/22/2014

Aktualisiert: November 2007

In diesem Lernprogramm arbeiten Sie mit mehreren UpdatePanel-Steuerelementen auf einer Seite. Durch das Verwenden mehrerer UpdatePanel-Steuerelemente auf einer Seite können Sie Bereiche der Seite einzeln oder zusammen inkrementell aktualisieren. Weitere Informationen über Teilaktualisierungen von Seiten finden Sie unter Übersicht über das Teilrendering von Seiten und UpdatePanel-Steuerelement – Einführung

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 erstellen Sie eine Seite mit zwei unabhängig aktualisierbaren Bereichen

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 der Seite hinzuzufügen.
Doppelklicken Sie in der Toolbox zweimal auf das UpdatePanel-Steuerelement, um der Seite zwei UpdatePanel-Steuerelemente hinzuzufügen.
Legen Sie im Eigenschaftenfenster die UpdateMode-Eigenschaft beider UpdatePanel()-Steuerelemente auf Conditional fest.
Fügen Sie einem der UpdatePanel-Steuerelemente ein Label-Steuerelement hinzu, und legen Sie dessen Text-Eigenschaft auf Bereich erstellt fest.
Fügen Sie im selben UpdatePanel-Steuerelement ein Button-Steuerelement hinzu, und legen Sie dessen Text-Eigenschaft auf Aktualisierungsbereich fest.
Fügen Sie im anderen UpdatePanel-Steuerelement ein Calendar-Steuerelement hinzu.
Doppelklicken Sie auf die Schaltfläche Aktualisierungsbereich, um einen Ereignishandler für das Click-Ereignis hinzuzufügen.

Fügen Sie dem Handler den folgenden Code hinzu, mit dem das Label-Steuerelement auf die aktuelle Zeit festgelegt wird.

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

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Panel 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.

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

Wechseln Sie im Kalender in einen anderen Monat.

Die Zeit im anderen Bereich ändert sich nicht. Der Inhalt beider Bereiche wird unabhängig aktualisiert.

Das Beispiel ist so formatiert, dass der Bereich der Seite, der das UpdatePanel-Steuerelement 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 = "Panel 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, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </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 = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

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

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

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.

Schachteln von UpdatePanel-Steuerelementen

In einigen Szenarien können Sie durch Schachteln von UpdatePanel-Steuerelementen Benutzeroberflächenfunktionen bereitstellen, die auf andere Weise schwer zu realisieren wären. Geschachtelte Bereiche sind hilfreich, wenn Sie in der Lage sein möchten, bestimmte Bereiche der Seite einzeln und mehrere Bereiche gleichzeitig zu aktualisieren. Sie können dies bewerkstelligen, indem Sie die UpdateMode-Eigenschaft sowohl des äußeren als auch des geschachtelten Steuerelements auf Conditional festlegen. Dadurch wird der Seitenbereich des äußeren Bereichs beim Aktualisieren des inneren Bereichs nicht aktualisiert. Beim Aktualisieren des äußeren Bereichs werden jedoch auch die geschachtelten Bereiche aktualisiert.

Im folgenden Beispiel wird dies in vereinfachter Form veranschaulicht.

So schachteln Sie UpdatePanel-Steuerelemente

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 der Seite hinzuzufügen.
Doppelklicken Sie in der Toolbox auf das UpdatePanel-Steuerelement, um der Seite ein UpdatePanel-Steuerelement hinzuzufügen.
Klicken Sie innerhalb des UpdatePanel-Steuerelementes, und doppelklicken Sie dann in der Toolbox auf der Registerkarte Standard das Steuerelement Button, um dies dem UpdatePanel-Steuerelement hinzuzufügen.
Legen Sie die Text-Eigenschaft der Schaltfläche auf Äußeren Bereich aktualisieren fest.
Legen Sie im Eigenschaftenfenster die UpdateMode-Eigenschaft des UpdatePanel()-Steuerelements auf Conditional fest.
Wechseln Sie in die Quellansicht, und fügen Sie dem <ContentTemplate>-Element des <asp:UpdatePanel>-Elements den folgenden Code hinzu.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
Der Code zeigt die Zeit an und wird verwendet, um den Zeitpunkt anzugeben, an dem das Markup zuletzt gerendert wurde.
Wechseln Sie in die Entwurfsansicht, klicken Sie in das UpdatePanel-Steuerelement, und fügen Sie dann innerhalb des ersten Bereichs ein zweites UpdatePanel-Steuerelement hinzu.
Legen Sie im Eigenschaftenfenster die UpdateMode-Eigenschaft des geschachtelten UpdatePanel()-Steuerelements auf Conditional fest.
Fügen Sie ein Calendar-Steuerelement innerhalb des geschachtelten UpdatePanel-Steuerelements hinzu.
Wechseln Sie in die Quellansicht, und fügen Sie dem <ContentTemplate>-Element des geschachtelten <asp:UpdatePanel>-Elements den folgenden Code hinzu.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```

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

Wenn Sie im Kalender im geschachtelten UpdatePanel-Steuerelement in den vorherigen oder nächsten Monat wechseln, ändert sich die Zeit des äußeren Bereichs nicht, da der Inhalt nicht neu gerendert wird. Im Gegensatz dazu wird die Zeit im inneren Bereich jedoch aktualisiert, wenn Sie auf die Schaltfläche im äußeren Bereich klicken. Der Kalender ändert sich nicht, da die EnableViewState-Eigenschaft des Calendar-Steuerelements standardmäßig auf true festgelegt ist.

Das Beispiel ist so formatiert, dass der Bereich der Seite, der das UpdatePanel-Steuerelement 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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Hinweis:
Das Calendar-Steuerelement wurde nur scheinbar nicht aktualisiert. In der Standardeinstellung wird der Kalender beim Rendern auf den aktuellen Monat und Tag gesetzt. In diesem Schritt zeigt der Kalender beim Klicken auf die Schaltfläche jedoch den Monat und Tag an, den Sie vorher ausgewählt haben. Im Hintergrund verwendet die Seite den Ansichtszustand des Calendar-Steuerelements, um den Kalender mit dem von Ihnen ausgewählten Monat und Tag zu rendern. Dies veranschaulicht, dass das UpdatePanel-Steuerelement die geeignete Logik ausführt, mit der sichergestellt wird, dass die Seite nach einem asynchronen Postback den erwarteten Zustand beibehält. Sie können dies testen, indem Sie die EnableViewState-Eigenschaft des Calendar-Steuerelements auf false festlegen und diese Schritte erneut ausführen. In diesem Fall wird der Kalender unabhängig vom ausgewählten Monat auf den aktuellen Monat zurückgesetzt, wenn Sie auf die Schaltfläche klicken.

Das Calendar-Steuerelement wurde nur scheinbar nicht aktualisiert. In der Standardeinstellung wird der Kalender beim Rendern auf den aktuellen Monat und Tag gesetzt. In diesem Schritt zeigt der Kalender beim Klicken auf die Schaltfläche jedoch den Monat und Tag an, den Sie vorher ausgewählt haben. Im Hintergrund verwendet die Seite den Ansichtszustand des Calendar-Steuerelements, um den Kalender mit dem von Ihnen ausgewählten Monat und Tag zu rendern. Dies veranschaulicht, dass das UpdatePanel-Steuerelement die geeignete Logik ausführt, mit der sichergestellt wird, dass die Seite nach einem asynchronen Postback den erwarteten Zustand beibehält. Sie können dies testen, indem Sie die EnableViewState-Eigenschaft des Calendar-Steuerelements auf false festlegen und diese Schritte erneut ausführen. In diesem Fall wird der Kalender unabhängig vom ausgewählten Monat auf den aktuellen Monat zurückgesetzt, wenn Sie auf die Schaltfläche klicken.

Zusammenfassung

In diesem Lernprogramm wurde das Verwenden mehrerer UpdatePanel-Steuerelemente auf einer Seite vorgestellt. Wenn UpdatePanel-Steuerelemente nicht geschachtelt sind, können Sie jeden Bereich unabhängig aktualisieren, indem Sie die UpdateMode-Eigenschaft auf Conditional festlegen. (Der Standardwert der UpdateMode-Eigenschaft ist Always. Dadurch wird der Bereich als Reaktion auf ein beliebiges asynchrones Postback aktualisiert.)

Bei geschachtelten Bereichen ist das Verhalten etwas anders. Wenn Sie die UpdateMode-Eigenschaft sowohl des äußeren als auch des geschachtelten Steuerelements auf Conditional festlegen, kann der innere Bereich aktualisiert werden, ohne den äußeren Bereich zu aktualisieren. Beim Aktualisieren des äußeren UpdatePanel wird jedoch auch das innere UpdatePanel aktualisiert.

Siehe auch

Aufgaben

UpdatePanel-Steuerelement – Einführung

Konzepte

Verwenden des ASP.NET UpdatePanel-Steuerelements mit datengebundenen Steuerelementen

Share via