Implementar mediante programación devoluciones de llamada de cliente sin devoluciones de datos en páginas web de ASP.NET

Actualización: noviembre 2007

En el modelo predeterminado para las páginas Web ASP.NET, el usuario interactúa con una página y hace clic en un botón o realiza alguna otra acción que da como resultado una devolución de datos. La página y sus controles se vuelven a crear, se ejecuta el código de la página en el servidor y se representa una nueva versión de la página en el explorador. Sin embargo, en algunas situaciones, es útil ejecutar código del servidor desde el cliente sin realizar una devolución de datos. Si el script de cliente de la página incluye información de estado (por ejemplo, valores de variables locales), enviar la página y obtener una nueva copia ocasiona la destrucción de dicho estado. Además, las devoluciones de datos de página producen una sobrecarga de procesamiento que puede disminuir el rendimiento y obligar al usuario a esperar a que la página se procese y se vuelva a crear.

Para evitar la pérdida del estado del cliente y no incurrir en la sobrecarga de procesamiento que supone enviar los datos al servidor y esperar a que los devuelva tras procesarlos, puede agregar código a una página Web ASP.NET para que pueda realizar devoluciones de llamada del cliente. En una devolución de llamada del cliente, una función de script de cliente envía una solicitud a una página web ASP.NET. La página web ejecuta una versión modificada de su ciclo de vida normal. Se inicia la página y se crean sus controles y otros miembros; a continuación, se invoca un método marcado. Dicho método realiza el procesamiento especificado en el código y, a continuación, devuelve al explorador un valor que otra función de script de cliente puede leer. A lo largo de este proceso, la página está activa en el explorador.

Varios controles de servidor web pueden usar devoluciones de llamada del cliente. Por ejemplo, el control TreeView utiliza devoluciones de llamada del cliente para implementar su funcionalidad de rellenar a petición del usuario. Para obtener más información, vea Información general sobre TreeView (Control de servidor Web).

Hay varias opciones para automatizar las devoluciones de llamada del cliente en una página web ASP.NET. Las características de AJAX en ASP.NET como el control de servidor UpdatePanel pueden automatizar actualizaciones parciales de página asincrónicas y la característica de comunicación del servicio web puede automatizar llamadas asincrónicas al servicio web.

Para obtener información general sobre las características de AJAX en ASP.NET que automatizan las devoluciones de llamada del cliente, vea los temas siguientes:

• Información general sobre el control UpdatePanel

• Información general sobre AJAX en ASP.NET

• Información general sobre la representación parcial de páginas

• Servicios web de AJAX en ASP.NET

También puede escribir su propio script de cliente para implementar directamente las devoluciones de llamada del cliente. En este tema se explica cómo implementar sus propias devoluciones de llamada de cliente para la comunicación asincrónica entre cliente y servidor.

Componentes de las devoluciones de llamada del cliente

La creación de una página ASP.NET que implemente devoluciones de llamada del cliente mediante programación es una operación similar a la creación de cualquier página ASP.NET, excepto por unas pocas diferencias. El código de servidor de la página debe realizar las tareas siguientes:

• Implementar la interfaz ICallbackEventHandler. Puede agregar esta declaración de interfaz a cualquier página Web ASP.NET.

• Proporcione una implementación para el método RaiseCallbackEvent. Este método se invocará para realizar la devolución de llamada en el servidor.

• Proporcione una implementación para el método GetCallbackResult. Este método devolverá el resultado de la devolución de llamada al cliente.

Además, la página debe contener tres funciones de script de cliente que realicen las acciones siguientes:

• Una función que llama a un método auxiliar que realiza la solicitud real al servidor. En esta función, puede incluir lógica personalizada para preparar en primer lugar los argumentos de evento. Puede enviar una cadena como parámetro al controlador de eventos de servidor de devolución de llamadas de cliente.

• Otra función que recibe (y a la que llama) el resultado del código de servidor que ha procesado el evento de devolución de llamada y acepta una cadena que representa los resultados. Esto se conoce como la función de devolución de llamada del cliente.

• Una tercera función es la función auxiliar que realiza la solicitud real al servidor. ASP.NET genera automáticamente esta función cuando se genera una referencia a ella mediante el método GetCallbackEventReference en código de servidor.

Tanto las devoluciones de llamada del cliente como las devoluciones de datos son solicitudes para la página de origen. Por tanto, ambas devoluciones se graban en los registros del servidor web como una solicitud de página.

Implementar las interfaces necesarias en código de servidor

Para ejecutar código de servidor desde script de cliente sin que se realice ninguna devolución de datos, debe implementar varias interfaces en el código de servidor.

Declarar la interfaz ICallbackEventHandler

Puede declarar la interfaz ICallbackEventHandler como parte de la declaración de clase para la página. Si crea una página de código subyacente, puede declarar la interfaz utilizando una sintaxis como la siguiente.

Partial Class CallBack_DB_aspx
    Inherits System.Web.UI.Page
    Implements System.Web.UI.ICallbackEventHandler

public partial class CallBack_DB_aspx : 
    System.Web.UI.Page, System.Web.UI.ICallbackEventHandler

Si trabaja en un control de usuario o de página de un solo archivo, puede agregar la declaración mediante una directiva @ Implements en la página, como en los ejemplos de código siguientes:

<%@ Page Language="VB" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

Nota:
Para el nombre de la interfaz se distingue entre mayúsculas y minúsculas.

Crear un método de devolución de llamada del servidor

En el código del servidor, debe crear un método que implemente el método RaiseCallbackEvent y un método que implemente el método GetCallbackResult. El método RaiseCallbackEvent toma un único argumento de cadena en lugar de los dos argumentos que se suelen utilizar con los controladores de eventos. Parte de este método podría ser similar al siguiente ejemplo:

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _
    Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent

End Sub

public void RaiseCallbackEvent(String eventArgument)
{

}

El método GetCallbackResult no toma ningún argumento y devuelve una cadena. Parte de este método podría ser similar al siguiente ejemplo:

Public Function GetCallbackResult() As String Implements _
    System.Web.UI.ICallbackEventHandler.GetCallbackResult
    Return aStringValue
End Function

public string GetCallbackResult()
{
    return aStringValue;
}

Crear funciones de script de cliente

Debe agregar funciones de script de cliente a la página para realizar dos funciones: enviar la devolución de llamada a la página del servidor y recibir los resultados. Ambas funciones de script de cliente están escritas en ECMAScript (JavaScript).

Enviar la devolución de llamada

La función utilizada para enviar la devolución de llamada se genera en el código del servidor. La devolución de llamada real la realiza una función de biblioteca que está disponible para cualquier página que implemente la interfaz ICallbackEventHandler. Para obtener una referencia a la función de biblioteca, llame al método GetCallbackEventReference de la página, al que se puede obtener acceso a través de la propiedad ClientScript de la página. A continuación, cree dinámicamente una función de cliente que incluya una llamada al valor que devuelve el método GetCallbackEventReference. Pase a dicho método una referencia a la página (this en C# o Me en Visual Basic), el nombre del argumento que usará para pasar los datos, el nombre de la función de script de cliente que recibirá los datos de la devolución de llamada y un argumento que pasa el contexto deseado.

Cuando haya creado la función, insértela en la página llamando al método RegisterClientScriptBlock.

En el ejemplo siguiente se muestra cómo crear dinámicamente una función denominada CallServer que invoca la devolución de llamada.

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load
    Dim cm As ClientScriptManager = Page.ClientScript
    Dim cbReference As String
    cbReference = cm.GetCallbackEventReference(Me, "arg", _
        "ReceiveServerData", "")
    Dim callbackScript As String = ""
    callbackScript &= "function CallServer(arg, context)" & _
        "{" & cbReference & "; }"
    cm.RegisterClientScriptBlock(Me.GetType(), _
        "CallServer", callbackScript, True)End Sub

void Page_Load(object sender, EventArgs e)
{
    ClientScriptManager cm = Page.ClientScript;
    String cbReference = cm.GetCallbackEventReference(this, "arg",
        "ReceiveServerData", "");
    String callbackScript = "function CallServer(arg, context) {" +
        cbReference + "; }";
    cm.RegisterClientScriptBlock(this.GetType(),
        "CallServer", callbackScript, true);
}

Los nombres de los argumentos aceptados por la función que está generando deben coincidir con los nombres de los valores pasados al método GetCallbackEventReference.

En el ejemplo siguiente se muestra marcado que se puede utilizar para invocar la devolución de llamada y procesar su valor devuelto:

<input type="button" value="Callback" 
    onclick="CallServer(1, alert('Callback'))"/>
<br />
<span id="Message"></span>

<input type="button" value="Callback" 
    onclick="CallServer(1, alert('Callback'))"/>
<br />
<span id="Message"></span>

Recibir la devolución de llamada

Puede escribir una función de cliente que reciba las devoluciones de llamada de forma estática en la página. El nombre de la función debe coincidir con el nombre pasado en la llamada al método GetCallbackEventReference. La función receptora acepta dos valores de cadena: uno para el valor devuelto y un segundo valor opcional para el valor de contexto que se devuelve del servidor.

La función podría ser similar al siguiente ejemplo:

<script type="text/javascript">
function ReceiveServerData(arg, context)
{
    Message.innerText = 'Processed callback.';
}
</script>

Vea también

Conceptos

Ejemplo de implementación de la devolución de llamada del cliente (Visual Basic)

Ejemplo de implementación de devolución de llamada de cliente (C#)

Referencia

ClientScriptManager