MsgBox en ASP .

NET

Introduccin

Cuando programamos en ASP.NET, los programadores de aplicaciones Windows, muchas

veces extraamos la versatilidad de la funcin MsgBox de Visual Basic, que sirve para
mostrar un mensaje por pantalla o pedir la confirmacin al usuario para realizar alguna tarea
especfica.

En esta oportunidad, vamos a realizar un control que permite emular dicha funcin sobre
ASP.NET.

Antes de comenzar, debemos aclarar que el cdigo expuesto, solo se ha probado en el

navegador Microsoft Internet Explorer y utilizamos JavaScript para mostrar los mensajes
en el equipo cliente. Tambin demostramos como disparar eventos en el servidor desde
JavaScript. El .NET Framework nos permite agregar esta funcionalidad a nuestros controles
Web personalizados a travs de la interfase IPostBackEventHandler.

Funcionamiento

Cuando el control se prepara (mtodo OnPreRender) enva cdigo JavaScript al navegador,

que tiene entre otras cosas, lo siguiente:

window.attachEvent("onfocus", MsgBoxMostrarMensaje)

Esto permite que nuestra funcin MsgBoxMostrarMensaje se ejecute cuando se toma el foco
de la pagina. Dicha funcin evala el contenido de algunas variables y luego, si todava no
se ha mostrado el mensaje, lo hace y marca dicha variable para no mostrarlo de nuevo. En
el caso de la confirmacin, tambin ejecuta una funcin provista por el .NET Framework
para disparar el evento en el servidor. La referencia a esa funcin lo obtenemos tambin
cuando se prepara el control, con Page.GetPostBackEventReference.

Finalmente en el mtodo Render, enviamos a la pgina las variables mencionadas que

harn que nuestra funcin JavaScript muestre el mensaje deseado.

Bien, como un ejemplo vale ms que mil palabras y los desarrolladores nos entendemos
escribiendo cdigo, vamos directamente a crear nuestro control. El ejemplo est escrito en
Visual Basic .NET pero es lo bastante simple como para poder traducirlo a cualquier
lenguaje de .NET sin problemas. Adems comentamos todo el cdigo para su fcil
interpretacin.

Crear el Control MsgBox

El control, que hereda de System.Web.UI.WebControls.WebControl e implementa la

interfase IPostBackEventHandler tiene los siguientes miembros.

ShowMessage. Este mtodo se utiliza para mostrar un mensaje. (Es el "alert" de

JavaScript)
ShowConfirmation. Este mtodo se usa para mostrar un mensaje de confirmacin
que pide al usuario que se acepte o cancele. (Es el "confirm" de JavaScript)
NoChoosed. Evento que se dispara en el servidor cuando el usuario eligi
<Cancelar> en el mensaje de confirmacin.
 YesChoosed. Evento que se dispara en el servidor cuando el usuario eligi
<Aceptar> en el mensaje de confirmacin.

1. Abra Visual Studio .NET.

2. Cree una solucin en blanco llamada MsgBoxTest.
3. Agregue a la solucin un nuevo proyecto. Visual Basic .NET: Biblioteca de Clases,
llamada MsgBox.
4. Agregue una referencia a System.Web.dll.
5. Renombre el archivo Class1.vb que se acaba de crear por MsgBox.vb y asegrese
que contenga lo siguiente.

Option Explicit On
Option Strict On

Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls

Public Class MsgBox

'Heredo de WebControl
Inherits System.Web.UI.WebControls.WebControl
'Implemento IPostBackEventHandler para poder enviar mensajes desde el cdigo
JavaScript
Implements IPostBackEventHandler

'Ac se guarda el mensaje a mostrar

Private _Message As String
'Ac se guarda la clave para poder identificar a que mensaje se responde.
Private _Key As String
'Ac guardamos si se desea disparar el evento en el Si
Private _PostBackOnYes As Boolean
'Y aqu si se desea disparar el evento en el No
Private _PostBackOnNo As Boolean

'Definimos los eventos que puede disparar este control

Public Event YesChoosed(ByVal sender As Object, ByVal Key As String)
Public Event NoChoosed(ByVal sender As Object, ByVal Key As String)

'Este mtodo se utiliza para mostrar un mensaje de confirmacin.

Public Sub ShowConfirmation(ByVal Message As String, ByVal Key As String, _
ByVal PostBackOnYes As Boolean, ByVal PostBackOnNo As Boolean)
'El aa es para identificar que es un mensaje de confirmacin (ver Render)
_Message = "aa" & Message
_Key = Key
_PostBackOnYes = PostBackOnYes
_PostBackOnNo = PostBackOnNo
End Sub

'Este mtodo se usa para mostrar un mensaje simple

Public Sub ShowMessage(ByVal Message As String)
_Message = Message
End Sub

'Preparamos el control para enviar la funcin javascript

Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
 If Not MyBase.Page.IsClientScriptBlockRegistered("MsgBox") Then
'Registro todo el script del control
Page.RegisterClientScriptBlock("MsgBox", FuncionJava1())
End If
End Sub

Private Function FuncionJava1() As String

'Ac esta la clave de todo este ejemplo...

'Si no se dispara el evento en el Si, se vaca la variable.

Dim miPostBackOnYes As String = "MsgBoxTextoMensaje="""";"
'Si no se dispara el evento en el No, se vacia la variable.
Dim miPostBackOnNo As String = "MsgBoxTextoMensaje="""";"

'Dependiendo lo que se elija, hacemos referencia o no, a la funcin que ejecuta el

postback.
'Adems recordamos quien esta disparando el evento. (_Key)
If _PostBackOnYes Then
'El .Net Framework guarda en miPostBackOnYes la llamada a la funcin
'javascript que dispara el evento
miPostBackOnYes = Page.GetPostBackEventReference(Me, "Yes" & _Key)
End If
If _PostBackOnNo Then
'El .Net Framework guarda en miPostBackOnNo la llamada a la funcin
'javascript que dispara el evento
miPostBackOnNo = Page.GetPostBackEventReference(Me, "No_" & _Key)
End If

'Como se ve, se programa el evento onfocus del objeto window y se dispara la funcin.
'La funcin verifica si MsgBoxTextoMensaje esta vaca, si es as, no hace nada, de
'lo contrario muestra el cartel o la confirmacin, y luego vaca la variable.
'En el caso de confirmacin se dispara la funcin java guardada en
'miPostBackOnYes en miPostBackOnNo
Return "<script language=""javascript""> " & _
"var MsgBoxTipoMensaje; " & _
"var MsgBoxTextoMensaje; " & _
"window.attachEvent(""onfocus"", MsgBoxMostrarMensaje); " & _
"function MsgBoxMostrarMensaje() { " & _
"if (MsgBoxTextoMensaje) { " & _
"if (MsgBoxTextoMensaje != """") { " & _
"if (MsgBoxTipoMensaje==2) {" & _
" alert(MsgBoxTextoMensaje); " & _
"} else {" & _
"if (confirm(MsgBoxTextoMensaje)) { " & _
miPostBackOnYes & _
"} else { " & _
miPostBackOnNo & _
"}} MsgBoxTextoMensaje=""""; " & _
" }}} </script>"
End Function

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

'Dibujamos el control
If ModoDisenio(Me) Then
'Si estamos en tiempo diseo. Muestro el nombre del control.
 writer.Write(Me.ID)
Else
'Estamos en tiempo de ejecucin. Envi el script con el contenido
'de las variables de JavaScript que corresponda

If _Message <> String.Empty Then

'Antes de hacer nada reemplazo los Enter por espacios,
'las comillas dobles por comillas simples.
'Sino lo hacemos, no sale el cartel en el navegador.
Dim miSB As System.Text.StringBuilder = New
System.Text.StringBuilder(_Message)
miSB.Replace(Microsoft.VisualBasic.vbCr, " "c)
miSB.Replace(Microsoft.VisualBasic.vbLf, " "c)
miSB.Replace("""", "'"c)

'Verifico el tipo de mensaje

If miSB.ToString.StartsWith("aa") Then
'Es un mensaje de confirmacin. (confirm)
'Envo solo el valor de las variables de JavaScript, la funcin
' se ejecutar cuando tome el foco la pagina. (Ver
OnPreRender)
Me.Page.Response.Write("<script>MsgBoxTipoMensaje=1;
MsgBoxTextoMensaje=""" + _
miSB.ToString.Substring(4) + """;</script>")
Else
'Es un mensaje comn. (alert)
'Envo solo el valor de las variables de JavaScript, la funcin
' se ejecutar cuando tome el foco la pagina. (Ver
OnPreRender)
Me.Page.Response.Write("<script>MsgBoxTipoMensaje=2;
MsgBoxTextoMensaje=""" + _
miSB.ToString + """;</script>")
End If
miSB = Nothing
End If
End If
End Sub

'Funcin privada para verificar si el control esta en modo diseo.

Private Shared Function ModoDisenio(ByVal QueControl As _
System.Web.UI.WebControls.WebControl) As Boolean
Dim DesignMode As Boolean = False
Try
DesignMode = QueControl.Site.DesignMode
Catch : End Try
Return DesignMode
End Function

'Este mtodo se ejecuta cuando el usuario clic en aceptar o cancelar.

Public Sub RaisePostBackEvent(ByVal eventArgument As String) _
Implements IPostBackEventHandler.RaisePostBackEvent
Select Case eventArgument.Substring(0, 3)
Case "Yes"
'Si eligi Aceptar la primera parte del argumento es Yes (Ver FuncionJava1)
'Disparo el evento en la pgina. Le envo en "Key" quien hizo la llamada
 RaiseEvent YesChoosed(Me, eventArgument.Substring(3))
Case "No_"
'Si eligi Aceptar la primera parte del argumento es No_ (Ver FuncionJava1)
'Disparo el evento en la pgina. Le envo en "Key" quien hizo la llamada
RaiseEvent NoChoosed(Me, eventArgument.Substring(3))
End Select
End Sub

End Class

Agregando un icono al control

1. Para identificar el control dentro del cuadro de herramientas es muy til agregar un
icono que lo diferencie de los dems. Cree una imagen de 16x16 y con el nombre
MsgBox.bmp y gurdela en la misma carpeta donde se encuentra la clase
MsgBox.vb.
2. Incluya la imagen en el proyecto y marque: Accin de generacin: Recurso
Incrustado.
3. Compile el proyecto desde el men Generar -> Generar MsgBox.

Probando el control

El control ya esta terminado, ahora slo tenemos que probarlo:

1. Agregue a la solucin un nuevo proyecto. Visual Basic .NET: Aplicacin Web

ASP.NET, llamada MsgBoxTest.
2. En el explorador de soluciones, haga doble clic sobre WebForm1.aspx.
3. Haga clic con el botn secundario del Mouse sobre el Cuadro de Herramientas y elija
personalizar cuadro de herramientas.

4. En la ficha Componentes de .Net Framework, elija examinar.

5. Busque el ensamble MsgBox.dll en la carpeta Bin del proyecto creado en el paso 1.
6. Asegrese que el control MsgBox queden marcados y haga clic en Aceptar.
 8. Una vez con el control en su cuadro de herramientas arrstrelo al WebForm1.aspx.
No se preocupe por la ubicacin dentro del la pgina, ya que en tiempo de ejecucin
no se ver, a cambio de eso se enviar al navegador el cdigo necesario para
mostrar los mensajes.
9. Arrastre dos botones a Webform1.aspx llamados button1 y button2 respectivamente.
10. Seleccione el control button1 y escriba Grabar en la propiedad Text.
11. Seleccione el control button2 y escriba Eliminar en la propiedad Text.

12. Pegue el siguiente el cdigo dentro de la clase Webform1 en el archivo

WebForm1.aspx.vb.

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles Button1.Click
'Ac verifico que pueda grabar.
'.
'.
 'Se encontr una condicin que necesita confirmacin del usuario...

'Se enva True y False como 2 ltimos parmetros ya que en este ejemplo no se
'necesita hacer PostBack cuando el usuario elige cancelar.
MsgBox1.ShowConfirmation("Este movimiento ya esta conciliado. Esta seguro que desea
grabarlo ?", _
"GRABAR", True, False)
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles Button2.Click
'Ac verifico que se pueda a eliminar....
'
'
'Se encontr una condicin que necesita confirmacin del usuario...
'Se enva True y False como 2 ltimos parmetros ya que en este ejemplo no se
'necesita hacer PostBack cuando el usuario elige cancelar.
MsgBox1.ShowConfirmation("La eliminacin de este registro, incluye eliminar todos _
los movimientos que dependen de l. Esta seguro que desea eliminarlo ?", "ELIMINAR",
True, False)
End Sub

Private Sub MsgBox1_YesChoosed(ByVal sender As Object, ByVal Key As String) Handles

MsgBox1.YesChoosed
'Key contiene la clave introducida cuando se llama al mtodo ShowConfirmation.
Select Case Key
Case "GRABAR"
'Se confirm que se desea grabar lo mismo, grabo...
'.
'.

MsgBox1.ShowMessage("Datos grabados correctamente.")

Case "ELIMINAR"
'Se confirm que se desea eliminar lo mismo, elimino
'.
'.

MsgBox1.ShowMessage("Registro eliminado.")

End Select
End Sub

'Private Sub MsgBox1_NoChoosed(ByVal sender As Object, ByVal Key As String) Handles

MsgBox1.NoChoosed
'En este ejemplo no lo utilizamos.
'Pero si necesita realizar alguna accin cuando el usuario hace clic en No, debe escribirlo
aqu.
'End Sub

13. Establezca MsgBoxTest como proyecto de inicio.

14. Ejecute la aplicacin. Si no se cometieron errores, al hacer clic en grabar deber
obtener esto.
 14. Y una vez aceptada la condicin, se enva un nuevo mensaje.

Conclusin

Este es un simple ejemplo de como integrar cdigo JavaScript con nuestros controles de
servidor de ASP.NET. Quiero aclarar antes de despedirme, que debido a la facilidad de
ASP.NET de programar para la Web al estilo de formularios Windows, muchos
programadores (principalmente los que conocen poco las tecnologas de la Web) olvidan en
que ambiente se esta desarrollando e intentan programar una pagina Web como si fuera un
formulario Windows. Y en ese sentido este control puede colaborar aun ms a esa
confusin. Es por eso que recomiendo no abusar del uso del mismo y tener en cuenta que
cada vez que se enva un mensaje de confirmacin y el usuario hace clic en aceptar
cancelar hay un ida y vuelta al servidor con todo lo que eso implica. Teniendo en cuenta
esos factores, este control puede ser una manera muy til de interactuar con el usuario
desde el cdigo del lado del servidor.