Alex Jimenez

El éxito no se terminaría de lograr si no tienes la fe en tus cualidades y en DIOS para lograrlo
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.

Published 21/8/2010 20:13 por Alexander Jimenez

Comparte este post:

Comentarios

# Tips & Trucos: Mostrar Alerta o Dialog desde el Servidor ASP.net (JavaScript y JQuery UI)@ Tuesday, September 21, 2010 6:57 AM

Existen muchas formas de emitir un mensaje al usuario luego de que se registra una acción, la mas común

Alex Jimenez

# re: Tips & Trucos: Mostrar Alerta o Dialog desde el Servidor ASP.net (JavaScript y JQuery UI)@ Tuesday, January 18, 2011 2:15 AM

HERMANO SUPER.

sigue realizando aportes de esta manera.

JESUS LONDOÑO

# re: Tips & Trucos: Mostrar Alerta o Dialog desde el Servidor ASP.net (JavaScript y JQuery UI)@ Friday, May 20, 2011 7:52 PM

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

JOHANNN