Utilizzo del controllo UpdatePanel ASP.NET con controlli utente
Aggiornamento: novembre 2007
È possibile attivare aggiornamenti a pagina parziale per i controlli utente, esattamente come per gli altri controlli di una pagina Web. È necessario aggiungere un controllo ScriptManager alla pagina e impostarne la proprietà EnablePartialRendering su true. Il controllo ScriptManager gestirà gli aggiornamenti a pagina parziale per i controlli UpdatePanel che si trovano direttamente nella pagina Web ASP.NET o all'interno di un controllo utente nella pagina.
In uno scenario semplice è possibile inserire i controlli utente in un riquadro di aggiornamento, affinché vengano aggiornati contemporaneamente al contenuto del suddetto riquadro. È anche possibile inserire un controllo UpdatePanel all'interno di un controllo utente, affinché questo supporti gli aggiornamenti a pagina parziale. In tal caso, tuttavia, gli sviluppatori di pagine che aggiungono il controllo utente a una pagina devono aggiungere in modo esplicito un controllo ScriptManager nella pagina Web host.
In caso di aggiunta di controlli a livello di codice al controllo utente, è possibile determinare se un controllo ScriptManager esiste o meno nella pagina. Successivamente, è possibile accertare che la proprietà EnablePartialRendering sia stata impostata su true prima di aggiungere un controllo UpdatePanel al controllo utente. Per un esempio che illustra come procedere in un controllo server Web, vedere Utilizzo del controllo UpdatePanel ASP.NET con più controlli con associazione a dati.
In una pagina Web, è possibile avere più controlli utente da aggiornare in modo indipendente. In tal caso, è possibile includere uno o più controlli UpdatePanel all'interno del controllo utente ed estendere il controllo utente per esporre pubblicamente le funzionalità dei controlli UpdatePanel figlio.
L'esempio in questa esercitazione include due controlli utente il cui contenuto si trova all'interno dei controlli UpdatePanel. Ogni controllo utente espone la proprietà UpdateMode del controllo UpdatePanel interno, in modo tale che questa possa essere impostata in modo esplicito per ciascun controllo utente. Ogni controllo utente espone anche il metodo Update del controllo UpdatePanel interno, in modo tale che un'origine esterna possa aggiornare in modo esplicito il contenuto del controllo utente.
Creazione di una pagina Web ASP.NET con più controlli utente
L'esempio in questa esercitazione consente di creare una pagina Master-Details di informazioni sul personale dal database di esempio AdventureWorks. Un controllo utente utilizza un controllo GridView per visualizzare un elenco di nomi di dipendenti e supportare la selezione, il paging e l'ordinamento. Un altro controllo utente utilizza un controllo DetailsView per visualizzare i dettagli per un dipendente selezionato.
Il controllo utente dell'elenco di dipendenti archivia l'ID del dipendente selezionato in stato di visualizzazione. Verifica che solo il dipendente selezionato sia evidenziato nel controllo GridView, indipendentemente dalla pagina di dati visualizzata o dalla modalità di ordinamento dell'elenco. Il controllo utente assicura anche che il controllo utente dei dettagli del dipendente venga visualizzato soltanto quando il dipendente selezionato è visibile nell'elenco dei dipendenti.
Nell'esempio, il controllo utente dei dettagli del dipendente contiene un controllo UpdatePanel. Il riquadro di aggiornamento viene aggiornato quando si seleziona un dipendente. Viene inoltre aggiornato quando l'utente esce dalla pagina del controllo GridView che visualizza il dipendente selezionato. Se l'utente visualizza una pagina del controllo GridView che non include il dipendente selezionato, il controllo utente dei dettagli del dipendente non viene visualizzato e il riquadro di aggiornamento non viene aggiornato.
Aggiunta di un controllo UpdatePanel nel controllo utente
Per creare controlli utente che si aggiornano in modo indipendente, includere innanzitutto un controllo UpdatePanel nel controllo utente, come illustrato nell'esempio che segue.
<%@ 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>
Esposizione pubblica delle funzionalità del controllo UpdatePanel
Il passaggio successivo consiste nell'esporre la proprietà UpdateMode e il metodo Update del controllo UpdatePanel interno. Così facendo sarà possibile impostare le proprietà del controllo UpdatePanel interno dall'esterno del controllo utente, come illustrato nell'esempio che segue.
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();
}
Aggiunta dei controlli utente alla pagina Web
Ora è possibile aggiungere i controlli utente a una pagina Web ASP.NET e impostare in modo dichiarativo la proprietà UpdateMode del controllo UpdatePanel interno. Per questo esempio, la proprietà UpdateMode di entrambi i controlli utente viene impostata su Conditional. Ciò significa che i controlli vengono aggiornati soltanto su richiesta esplicita, come illustrato nell'esempio che segue.
<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>
Aggiunta di codice per aggiornare i controlli utente
Per aggiornare in modo esplicito il controllo utente, chiamare il metodo Update del controllo UpdatePanel interno. Nell'esempio seguente è incluso un gestore per l'evento SelectedIndexChanged del controllo utente dell'elenco di dipendenti, generato contemporaneamente all'evento SelectedIndexChanged del controllo GridView interno. Il codice nel gestore aggiorna in modo esplicito il controllo utente dei dettagli del dipendente se viene selezionato un dipendente, oppure se la pagina corrente nell'elenco dei dipendenti non visualizza più il dipendente selezionato.
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();
}
Vedere anche
Concetti
Cenni preliminari sui controlli UpdatePanel
Cenni preliminari sui controlli utente ASP.NET