MSDN Library

Verwenden des ASP.NET-UpdatePanel-Steuerelements mit Masterseiten

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.

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.

    UpdatePanel-Lernprogramm
  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.

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

    UpdatePanel-Lernprogramm
  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="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="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>
    
    
    

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.

    UpdatePanel-Lernprogramm

    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.

    UpdatePanel-Lernprogramm
  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 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 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 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 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 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" %>
    
    
    
  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.

    UpdatePanel-Lernprogramm
  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="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="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>
    
    
    

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.

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.

Community-Beiträge

Anzeigen:
© 2016 Microsoft