Verwenden des ASP.NET-UpdatePanel-Steuerelements mit Benutzersteuerelementen
Aktualisiert: November 2007
Wie für andere Steuerelemente auf einer Webseite können Sie für Benutzersteuerelemente Teilaktualisierungen von Seiten ermöglichen. Sie müssen der Seite ein ScriptManager-Steuerelement hinzufügen und die zugehörige EnablePartialRendering-Eigenschaft auf true festlegen. Das ScriptManager-Steuerelement verwaltet die Teilaktualisierungen von Seiten für die UpdatePanel-Steuerelemente, die sich direkt auf der ASP.NET-Webseite oder in einem Benutzersteuerelement auf der Seite befinden.
In einem einfachen Szenario können Sie Benutzersteuerelemente in einem UpdatePanel ablegen. Dadurch werden sie aktualisiert, wenn der Inhalt des UpdatePanels aktualisiert wird. Außerdem können Sie ein UpdatePanel-Steuerelement so in einem Benutzersteuerelement ablegen, dass das Benutzersteuerelement Teilaktualisierungen von Seiten unterstützt. In diesem Fall müssen die Seitenentwickler, die einer Seite das Benutzersteuerelement hinzufügen, der Hostwebseite jedoch explizit ein ScriptManager-Steuerelement hinzufügen.
Wenn Sie einem Benutzersteuerelement programmgesteuert Steuerelemente hinzufügen, können Sie ermitteln, ob auf der Seite ein ScriptManager-Steuerelement vorhanden ist. Anschließend können Sie überprüfen, ob die EnablePartialRendering-Eigenschaft auf true festgelegt wurde, bevor Sie dem Benutzersteuerelement ein UpdatePanel-Steuerelement hinzufügen. Ein Beispiel, wie Sie dies in einem Webserversteuerelement durchführen, finden Sie unter Verwenden des ASP.NET UpdatePanel-Steuerelements mit datengebundenen Steuerelementen.
Möglicherweise verfügen Sie über mehrere Benutzersteuerelemente auf einer Webseite, die Sie unabhängig voneinander aktualisieren möchten. In diesem Fall können Sie ein oder mehrere UpdatePanel-Steuerelemente in das Benutzersteuerelement einschließen und es so erweitern, dass es die Fähigkeiten der untergeordneten UpdatePanel-Steuerelemente öffentlich verfügbar macht.
Das Beispiel in diesem Lernprogramm enthält zwei Benutzersteuerelemente, deren Inhalte sich in UpdatePanel-Steuerelementen befinden. Jedes Benutzersteuerelement macht die UpdateMode-Eigenschaft des inneren UpdatePanel-Steuerelements verfügbar, sodass die Eigenschaft für jedes Benutzersteuerelement explizit festgelegt werden kann. Außerdem macht jedes Benutzersteuerelement die Update-Methode des inneren UpdatePanel-Steuerelements verfügbar, sodass eine externe Quelle den Inhalt des Benutzersteuerelements explizit aktualisieren kann.
Erstellen einer ASP.NET-Webseite mit mehreren Benutzersteuerelementen
Im Beispiel in diesem Lernprogramm wird eine Master-Detail-Seite mit Mitarbeiterinformationen aus der AdventureWorks-Beispieldatenbank erstellt. Ein Benutersteuerelement verwendet ein GridView-Steuerelement, um eine Liste mit Mitarbeiternamen anzuzeigen und das Auswählen, Paging und Sortieren zu unterstützen. Ein anderes Benutzersteuerelement verwendet ein DetailsView-Steuerelement, um Details zu einem ausgewählten Mitarbeiter anzuzeigen.
Das Benutzersteuerelement für die Mitarbeiterliste speichert die ID des ausgewählten Mitarbeiters im Ansichtszustand. Es stellt sicher, dass im GridView-Steuerelement nur der ausgewählte Mitarbeiter hervorgehoben wird, unabhängig davon, welche Seite der Daten angezeigt wird oder wie die Liste sortiert wurde. Außerdem wird vom Benutzersteuerelement sichergestellt, dass das Benutzersteuerelement für die Mitarbeiterdetails nur angezeigt wird, wenn der in der Mitarbeiterliste ausgewählte Mitarbeiter sichtbar ist.
Im Beispiel enthält das Benutzersteuerelement für die Mitarbeiterdetails ein UpdatePanel-Steuerelement. Das UpdatePanel wird aktualisiert, wenn ein Mitarbeiter ausgewählt wird. Außerdem wird es aktualisiert, wenn der Benutzer sich von der GridView-Steuerelementseite weg bewegt, die den ausgewählten Mitarbeiter anzeigt. Wenn der Benutzer eine Seite des GridView-Steuerelements anzeigt, die den ausgewählten Mitarbeiter nicht enthält, wird das Benutzersteuerelement für die Mitarbeiterdetails nicht angezeigt und das UpdatePanel nicht aktualisiert.
Einschließen eines UpdatePanel-Steuerelements im Benutzersteuerelement
Der erste Schritt beim Erstellen der Benutzersteuerelemente, die unabhängig voneinander aktualisiert werden, besteht darin, im Benutzersteuerelement ein UpdatePanel-Steuerelement einzuschließen, wie im folgenden Beispiel gezeigt wird.
<%@ Control Language="VB" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.vb" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.cs" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
Öffentliches Verfügbarmachen der Funktionen des UpdatePanel-Steuerelements
Im nächste Schritt machen Sie die UpdateMode-Eigenschaft und die Update-Methode des inneren UpdatePanel-Steuerelements verfügbar. Dadurch können Eigenschaften des inneren UpdatePanel-Steuerelements von außerhalb des Benutzersteuerelements festgelegt werden, wie im folgenden Beispiel gezeigt wird.
Public Property UpdateMode() As UpdatePanelUpdateMode
Get
Return Me.EmployeeInfoUpdatePanel.UpdateMode
End Get
Set(ByVal value As UpdatePanelUpdateMode)
Me.EmployeeInfoUpdatePanel.UpdateMode = value
End Set
End Property
Public Sub Update()
Me.EmployeeInfoUpdatePanel.Update()
End Sub
public UpdatePanelUpdateMode UpdateMode
{
get { return this.EmployeeInfoUpdatePanel.UpdateMode; }
set { this.EmployeeInfoUpdatePanel.UpdateMode = value; }
}
public void Update()
{
this.EmployeeInfoUpdatePanel.Update();
}
Hinzufügen der Benutzersteuerelemente zur Webseite
Nun können Sie die Benutzersteuerelemente einer ASP.NET-Webseite hinzufügen und die UpdateMode-Eigenschaft des inneren UpdatePanel-Steuerelements deklarativ festlegen. In diesem Beispiel wird die UpdateMode-Eigenschaft beider Benutzersteuerelemente auf Conditional festgelegt. Das bedeutet, dass sie nur aktualisiert werden, wenn eine Aktualisierung explizit angefordert wird, wie im folgenden Beispiel gezeigt wird.
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
Hinzufügen von Code zum Aktualisieren der Benutzersteuerelemente
Um das Benutzersteuerelement explizit zu aktualisieren, rufen Sie die Update-Methode des inneren UpdatePanel-Steuerelements auf. Das folgende Beispiel enthält einen Handler für das SelectedIndexChanged-Ereignis des Benutzersteuerelements für die Mitarbeiterliste, das ausgelöst wird, wenn das SelectedIndexChanged-Ereignis des inneren GridView-Steuerelements ausgelöst wird. Der Handlercode aktualisiert das Benutzersteuerelement für die Mitarbeiterdetails explizit, wenn ein Mitarbeiter ausgewählt wird oder die aktuelle Seite der Mitarbeiterliste nicht mehr den ausgewählten Mitarbeiter anzeigt.
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
Siehe auch
Konzepte
Übersicht über das UpdatePanel-Steuerelement
Übersicht über ASP.NET-Benutzersteuerelemente