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.

Post Cruzado de AJDev.net

Anuncios

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

  1. Me uno a las felicitaciones, la verdad que me parece que el contenido es bastante …. Es muy interesante tu blog.
    Puedes visitar estos sitios, parecen interesantes.

    Ich einer in den Glückwünschen, der Wahrheit, die mir scheint, dass der Inhalt genug ist…. Es ist dein Blog sehr interessant.
    Du kannst diese Plätze besuchen, sie wirken interessant.

    Me one to the congratulations, the truth that seems to me that the content is enough…. Your blog Is very interesting.
    You can visit these places, they seem interesting.

    mugen-kan Karate Goju-ryu

    videoinformatica.net ip3122, cámaras de seguridad

  2. Pingback: Articulo Indexado en la Blogosfera de Sysmaya

  3. Me uno a las felicitaciones, la verdad que me parece que el contenido es bastante …. Es muy interesante tu blog.
    Puedes visitar estos sitios, parecen interesantes.

    Ich einer in den Glückwünschen, der Wahrheit, die mir scheint, dass der Inhalt genug ist…. Es ist dein Blog sehr interessant.
    Du kannst diese Plätze besuchen, sie wirken interessant.

    Me one to the congratulations, the truth that seems to me that the content is enough…. Your blog Is very interesting.
    You can visit these places, they seem interesting.

    mugen-kan Karate Goju-ryu

    videoinformatica.net ip3122, cámaras de seguridad

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s