Blog ASP.NET
Actualizar información fuera del UpdatePanel
1. Concepto:
Existen situaciones en que a nivel de capa de presentación es necesario actualizar mediante Ajax uno o varios controles HTML
que no pertenece al UpdatePanel que dispara una actualización parcial de página.
2. Modelo General:
En el model general de uso de Ajax en .NET, para actualizar un dato colocamos los controles dentro de un UpdatePanel.
Por ejemplo, para actualizar la hora en una pagina mediante Ajax.
El código necesario para generar este ejemplo:
a) Capa de presentación:
<div style="border:solid 1px #f1f2f3;">
<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="UpdatePanel_Modelo_1">
<ProgressTemplate>
Cargando datos ...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="UpdatePanel_Modelo_1">
<ContentTemplate>
<asp:Label runat="server" id="LblHora"></asp:Label>
<asp:Button runat="server" Text="Actualizar hora" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
a) Capa de negocio:
protected void
Page_Load(object sender,
EventArgs e)
{
if
(!this.Page.IsPostBack) {
LblFecha.Text = System.DateTime.Now.ToLongTimeString());
}
}
protected void
Btn_Actualizar_Click(object sender,
EventArgs e)
{
//Pausa de dos
segundo para visualizar panel de actualizacion
System.Threading.Thread.Sleep(2000);
LblFecha.Text =
DateTime.Now.ToLongTimeString();
}
3. Modelo con etiqueta fuera del panel de actualización:
En este ejemplo el control fecha se encuentra fuera del UpdatePanel
Hora: 14:56:36
Sección UpdatePanel
Cargando datos ...
4. Codificación:
Utilizando el modelo general no se realizará ningúna actualización ya que el control lblHora_2 se encuentra fuera del panel.
Para esto puedo recurrir al método RegisterDataItem del objeto ScriptManager.
Este método tiene dos implementación. En la más sencilla requiere un control y un datos de tipo string. Este dato se registra y posteriormente
se asigna en capa de presentación al recibir la llamada Ajax.
protected void btnActualizar_2_Click(object sender, EventArgs e)
{
//Pausa de dos segundos
para visualizar panel de actualizacion
System.Threading.Thread.Sleep(200);
//La siguiente implementación no funciona ya que el control LblHora_2 se encuentra fuera del panel
//LblHora_2.Text = DateTime.Now.ToLongTimeString();
ScriptManager scriptmanager = ScriptManager.GetCurrent(Page);
if (scriptmanager!=null) {
scriptmanager.RegisterDataItem(lblHora_2,
DateTime.Now.ToLongTimeString();
}
}
Referencio el objecto scriptManager y asigno al objeto lblHora_2 la cadena:
DateTime.Now.ToLongTimeString()
Posteriormente en capa de presentación mediante JQuery registro el método MostrarFecha y recupero el control lblHora_2 registrado en capa de negocio. Compruebo que exista y lo asigno mediante el método html de JQuery.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//Agrego funcion en evento Load
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(MostrarFecha);
//Muestro fecha
function MostrarFecha(sender, args)
{
var ItemsDatos = args.get_dataItems();
if (ItemsDatos["<%=lblHora_2.ClientID
%>"]!=null) {
$("#<%=lblHora_2.ClientID
%>").html (ItemsDatos["<%=lblHora_2.ClientID
%>"]);
}
}
});
</script>
El método lblHora_2.ClientID me devuelve el valor asignado por .NET en el código HTML al control original lblHora_2.