Tips & Trucos: Mostrar Alerta o Dialog desde el Servidor ASP.net (JavaScript y JQuery UI)

Existen muchas formas de emitir un mensaje al usuario luego de que se registra una acción, la mas común es mostrar el mensaje en un Label.

Aquí les mostrare dos formas con un mismo método, Sonrisa es decir, el primer método es mostrar el tipo alert de javascript y la segunda es usando el Dialog de JQuery UI.

Antes de empezar necesitamos una pagina vacía con un TextBox para escribir el mensaje y dos Buttons:

El primero en la propiedad Text le colocaremos “Mensaje con Javascript” y el Segundo “Mensaje con JQuery”, seria algo así:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtMensaje" runat="server" Width="380px"></asp:TextBox>
        <br />
        <asp:Button ID="btnMensajeJavascript" runat="server" 
            Text="Mensaje con Javascript" onclick="btnMensajeJavascript_Click" />
        <asp:Button ID="btnMensajeJQuery" runat="server" Text="Mensaje con JQuery" 
            onclick="btnMensajeJQuery_Click" />
    </div>
    </form>
</body>

La primera:

Le damos dobleclick al primer botón y escribiremos lo siguiente:

        protected void btnMensajeJavascript_Click(object sender, EventArgs e)
        {
            //Declaramos un StringBuilder para almacenar el alert que queremos mostrar
            StringBuilder sbMensaje = new StringBuilder();
            //Aperturamos la escritura de Javascript
            sbMensaje.Append("<script type='text/javascript'>");
            //Le indicamos al alert que mensaje va mostrar
            sbMensaje.AppendFormat("alert('{0}');",txtMensaje.Text);
            //Cerramos el Script
            sbMensaje.Append("</script>");
            //Registramos el Script escrito en el StringBuilder
            ClientScript.RegisterClientScriptBlock(this.GetType(), "mensaje", sbMensaje.ToString());
        }

La segunda:

Para esta ocasión registraremos en el Head de la pagina las referencias a JQuery y JQuery UI (Pueden descargar el que mas le agrade o usar CDN de Google)

<head runat="server">
    <title>Mostrar Mensajes</title>
     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/javascript"></script> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" /> 
</head>

Le daremos dobleclick al segundo botón y escribiremos el siguiente código:

       protected void btnMensajeJQuery_Click(object sender, EventArgs e)
        {
            //En esta ocasión agregaremos un literal que a su vez agregaremos un div que nos servira de Dialog
            //O si prefieren pueden crear el div directamente en el HTML
            Literal li = new Literal();
            StringBuilder sbMensaje = new StringBuilder();
            //Creamos el Div
            sbMensaje.Append("<div id='dialog' title='Mensaje Prueba'>");
            //Le indicamos el mensaje a mostrar
            sbMensaje.Append(txtMensaje.Text);
            //cerramos el div
            sbMensaje.Append("</div>");
            //Aperturamos la escritura de Javascript
            sbMensaje.Append("<script type='text/javascript'>");
            sbMensaje.Append("$(document).ready(function () {");
            //Destrimos cualquier rastro de dialogo abierto
            sbMensaje.Append("$('#dialog').dialog('destroy');");
            //le indicamos que muestre el dialogo en modo Modal
            sbMensaje.Append(" $('#dialog').dialog({ modal: true });");
            //Si quieres que muestre un boton para cerrar el mensaje seria esta linea que dejare en comentario
            //sbMensaje.Append(" $('#dialog').dialog({ modal: true, buttons: { 'Ok': function() { $(this).dialog('close'); } } });");
            sbMensaje.Append("});");
            sbMensaje.Append("</script>");
            //Agremamos el texto del stringbuilder al literal
            li.Text = sbMensaje.ToString();
            //Agregamos el literal a la pagina
            Page.Controls.Add(li);
        }

Espero que lo mostrado aquí les sea de mucha utilidad.

Publicado por

Alex Jimenez

Soy amante a la tecnología, dedicado al desarrollo de aplicaciones Web ReactJS, WCF, MVC, WebApi y antiguo MVP en ASP .net 2009-2012

3 comentarios sobre “Tips & Trucos: Mostrar Alerta o Dialog desde el Servidor ASP.net (JavaScript y JQuery UI)”

  1. gracias de verdad por el aporte …. lo estaba buscando y ya era un dolor de cabeza porque no sabia como incluir un mensaje JQuery desde el servidor…. me ha ayudado mucho +10 ! jejej xD

Deja un comentario

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