ASP.NET Ajax: ScriptManager y OnAsyncPostBackError

Debido a que dentro del ScriptManager ya no tenemos un ErrorTemplate que nos permita definir errores que se dan dentro de un partial postback, debemos realizar una implementación parecida, combinando eventos que tenemos dentro del ScriptManager y el Control ModalPopupExtender, como realizariamos esto?

Primero: Agregamos el Control ScriptManager en nuestra página tal como sigue:

<asp:ScriptManager ID="smMaster" runat="server" EnablePartialRendering="True" OnAsyncPostBackError="smMaster_AsyncPostBackError"></asp:ScriptManager>

asp:ScriptManager ID="smMaster" runat="server" EnablePartialRendering="True" OnAsyncPostBackError="smMaster_AsyncPostBackError"></asp:ScriptManager>

Segundo: Definimos en nuestro Code Behind un método que maneje el evento OnAsyncPostBackError de la siguiente manera:

protected void smMaster_AsyncPostBackError(object sender, Microsoft.Web.UI.AsyncPostBackErrorEventArgs e)
{
Microsoft.Web.UI.ScriptManager.GetCurrent(this.Page).AsyncPostBackErrorMessage = ErrorManager.ObtenerMensajeSistema();
}

lo que hemos definido aca es asignar a la propiedad AsynPostBackErrorMessage un mensaje del sistema personalizado, si uds quieren mostrar el verdadero error que esta causando la excepción lo asignarian  a "e.Exception.Message".

Tercero: Definimos un control ModalPopupExtender que contenga el Panel a mostrar con el mensaje de error(Esto hara que el mensaje salga centrado en la pantalla y de acuerdo a los estilos definidos bloquear el fondo de la misma).

<asp:Button ID="btnCambiarDatos" runat="server" Style="display: none;" />
<asp:ModalPopupExtender ID="ModalPopupExtender" runat="server" BehaviorID="mppDatos" TargetControlID="btnCambiarDatos" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground1" OkControlID="btnAceptar" DropShadow="false" CancelControlID="imgCerrar">
</asp:ModalPopupExtender> 

Ojo, Uds deben definir el PopupControlID que seria un panel con el mensaje a mostrar, pornerle algun label para mostrar el mensaje.

Cuarto: Ahora si debemos manejar el resultado del partial postback, esto lo hacemos a través del Objeto PageRequestManager encargado de manejar los partial postback de los diferentes UpdatePanel que se tuviera, aprovechando uno de sus eventos: "add_endRequest", este evento justamente se da luego de haberse dado el partial postback y nos trae cierta información para trabajar, lo hacemos de la siguiente manera:

<script type="text/javascript" language="javascript">
var messageElem = '<%= lblDatos.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined && args.get_error().httpStatusCode == '500')
{
var errorMessage = args.get_error().message
args.set_errorHandled(true);
$get(messageElem).innerHTML = errorMessage;
$find("mppDatos").show();
}
}

script type="text/javascript" language="javascript">
var messageElem = '<%= lblDatos.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined && args.get_error().httpStatusCode == '500')
{
var errorMessage = args.get_error().message
args.set_errorHandled(true);
$get(messageElem).innerHTML = errorMessage;
$find("mppDatos").show();
}
}

 

</script>

Pd: Si les sale un error respecto a que Sys.WebForms no está definido, es porque la propiedad EnablePartialRendering del ScriptManager está en false, solo borrándola ya que es por defecto en true, problema solucionado, esto es muy bueno ya que ahora solo se envía al cliente el javascript necesario para trabajar :).

Si analizamos el Snippet anterior se tiene que analizamos el mensaje de error y si existe lo manejamos nosotros mismos, ponemos el mensaje que nos devuelve el servidor en el label antes definido dentro de el popup que mostraremos y luego de ello ya mostramos nuestro Popup 🙂 utilizando el método show(), ojo el Id que usamos como parámetro del "find" viene a ser la propiedad BehaviorID que viene con el control ModalPopupExtender.

Ya uds. pueden personalizarlo mucho mas, como por ejemplo agregarle un DragPanelExtender para poder arrastrar la ventana en la pantalla o combinar con el framework de animaciones de ASP.NET Ajax para darle un mejor acabado 🙂

Buen dia,

Ivan Mostacero.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *