Usando o controle ASP.NET UpdatePanel com controles de usuário
Você pode ativar atualizações de página parcial para controles de usuário como você faz para outros controles em uma página da Web.Você deve adicionar um controle ScriptManager à página e definir sua propriedade EnablePartialRendering como true.O controle ScriptManager gerenciará atualizações de página parcial para controles UpdatePanel que estão diretamente sobre a página da Web do ASP.NET ou dentro de um controle de usuário na página.
Em um cenário simples, você pode colocar controles de usuário dentro de um painel de atualização e eles serão atualizados quando o conteúdo do painel de atualização for atualizado.Você também pode colocar um controle UpdatePanel dentro de um controle de usuário para que o controle de usuário ofereça suporte a atualizações de página parcial.No entanto, nesse caso, desenvolvedores de página que adicionam o controle de usuário a uma página devem explicitamente adicionar um controle ScriptManager na página host.
Se você estiver adicionando controles por meio de programação para o seu controle de usuário, você pode determinar se um controle ScriptManager existe na página.Você pode, em seguida, certificar-se de que a propriedade EnablePartialRendering tenha sido definida como true antes de adicionar um controle UpdatePanel ao controle de usuário.Para obter um exemplo que mostra como fazer isso em um controle de servidor Web, consulte Usando o controle ASP.NET UpdatePanel com controles associado a dados.
Você pode ter vários controles de usuário em um página da Web a qual você deseja atualizar independentemente.Nesse caso, você pode incluir um ou mais controles UpdatePanel dentro do controle de usuário, e estender o controle de usuário para expor publicamente as capacidades dos controles UpdatePanel filhos.
O exemplo neste tutorial inclui dois controles de usuário cujo conteúdo está dentro de controles UpdatePanel.Cada controle de usuário expõe a propriedade UpdateMode do controle UpdatePanel interno para que a propriedade possa ser definida explicitamente para cada controle de usuário.Cada controle de usuário também expõe o método Update do controle UpdatePanel interno para que uma fonte externa possa explicitamente atualizar o conteúdo do controle de usuário.
Criando uma página da Web ASP.NET com vários controles de usuário
O exemplo neste tutorial cria uma página mestre-detalhe das informações do funcionário a partir de banco de dados de exemplo AdventureWorks.Um controle de usuário usa um controle GridView para exibir uma lista de nomes de funcionários e suportar seleção, paginação e a classificação.Outro controle de usuário usa um controle DetailsView para exibir detalhes de um funcionário selecionado.
O controle de usuário lista de funcionários armazena a identificação do funcionário selecionado em estado de exibição.Ele garante que apenas o funcionário selecionado seja realçado no controle GridView, independentemente de qual página de dados é exibida ou como a lista foi classificada.O controle de usuário também garante de que o controle de usuário detalhe de funcionário seja exibido somente quando o funcionário selecionado está visível na lista de funcionários.
No exemplo, o controle de usuário detalhe de funcionário contém um controle UpdatePanel.O painel de atualização é atualizado quando um funcionário é selecionado.Ele também é atualizado quando o usuário move para fora da página de controle GridView que exibe o funcionário selecionado.Se o usuário visualiza uma página do controle GridView que não inclua o funcionário selecionado, o controle de usuário detalhe de funcionário não é exibido e o painel de atualização não é atualizado.
Incluir um controle UpdatePanel no controle de usuário
A primeira etapa na criação de controles de usuário que atualizam de forma independente é incluir um controle UpdatePanel no controle de usuário, conforme mostrado no exemplo a seguir.
<%@ 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>
Expondo os recursos do controle UpdatePanel publicamente
A próxima etapa é expor a propriedade UpdateMode e o método Update do controle UpdatePanel interno.Isso permite que você defina propriedades do controle UpdatePanel interno de fora do controle de usuário, conforme mostrado no exemplo a seguir.
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();
}
Adicionando os Controles de Usuário à Página da Web
Você pode agora pode adicionar os controles de usuário a um página da Web do ASP.NET e definir a propriedade UpdateMode do controle UpdatePanel interno declarativamente.Para esse exemplo, a propriedade UpdateMode para ambos os controles de usuário é definida como Conditional.Isso significa que elas são atualizadas somente quando uma atualização é explicitamente solicitada, como mostrado no exemplo a seguir.
<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>
Adicionando Código para atualizar os controles de usuário
Para atualizar explicitamente o controle de usuário, você chama o método Update do controle UpdatePanel interno.O exemplo a seguir inclui um manipulador para o evento SelectedIndexChanged do controle de usuário lista de funcionários, que é gerado quando o evento SelectedIndexChanged do controle GridView interno é gerado.O código no manipulador explicitamente atualiza o controle de usuário detalhes de funcionário se um funcionário é selecionado, ou se a página atual na lista de funcionários não mostra mais o funcionário selecionado.
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();
}
Consulte também
Conceitos
Visão geral sobre controle UpdatePanel
Visão geral sobre controles de usuário ASP.NET