Mostrar mensajes con jQuery UI - Asp.net

Espero todos estén bien, antes de empezar el ejemplo de este articulo me tomo unas cuantas lineas para mencionarles a todos los que leen mi blog que por motivos de trabajo y estudio no estaré haciendo artículos muy seguido como lo he hecho casi siempre(tratare de que sea al menos uno al mes), esto no quiere decir que me descuidare del blog para nada en mis tiempos libres tratare de seguir poniendo ejemplos y respondiendo cualquier duda que tengan.

Bien en este articulo veremos algo sencillo pero seguro a mas de alguno le sirve, y es que siempre que desarrollamos aplicaciones web tenemos la necesidad de mostrar mensajes al usuario y muy frecuentemente mostramos este tipo de mensajes en los famosos alert de javascript , pero seguro a muchos esta ventana les parecerá poco atractiva incluso muy sencilla, pues bien ahora haciendo uso de un plugin de jQuery llamado jQuery UI veremos la manera de mostrar mensajes en una ventana con diseños muy bonitos y que al usuario le parecerá mas agradable.

Veremos como hacerlo al lado del cliente y al lado del servidor.

Veamos primero como hacerlo al lado del cliente

        function MostrarMensaje(mensaje, titulo) {

            var ventana = $('

' + mensaje + '
');

            ventana.dialog({

                modal: true,

                buttons: { "OK": function () { $(this).dialog("close"); } },

                show: "fold",

                hide: "scale",

            });

        }


       $(document).ready(function () {

            $('#btnenviar2').click(function () {

                var nombre = $('#<%=txtnombre.ClientID%>').val();

                var edad = $('#<%=txtedad.ClientID%>').val();

                var mensaje = "Hola" + " " + nombre + " " + "tu tienes" + " " + edad + " " + "años de edad";

                MostrarMensaje(mensaje, "Saludos");

            });

        });

Tenemos una función MostrarMensaje() que recibe 2 parámetros que sera el titulo que queremos que se muestre en la venta y el mensaje que queremos mostrar y dentro de esta tenemos algunas características, que podemos configurar de este pluging en este caso le agregamos un botón que al hacer click cierra la ventana y le agregamos algunos efectos (en la web del plugin pueden encontrar las diferentes propiedades que se pueden aplicar al pluging). Esta función nos servirá para mostrar el mensaje del lado del cliente como del lado del servidor

Ahora para mostrar el mensaje desde el servidor usamos el evento click del botón html en este caso un input llamado btnenviar2, y dentro de este capturamos los datos de las cajas de texto y  llamamos a la función MostrarMensaje() y le pasamos estos datos.

Ahora veamos como mostrar el mensaje desde el servidor.

        protected void btnenviar_Click(object sender, EventArgs e)

        {

            string mensaje = string.Format("Hola {0} tu tienes {1} años de edad",txtnombre.Text, txtedad.Text);

            string script = string.Format("MostrarMensaje('{0}', '{1}')", mensaje, "Saludos");

            ScriptManager.RegisterStartupScript(this, typeof(Page), "MostrarMensaje", script, true);

        }

Para mostrar el mensaje desde el lado del servidor lo que tenemos que hacer es dentro del evento click del botón  llamar la función javascript MostrarMensaje() y pasarle los parámetros y para eso hacemos uso del método ScriptManager.RegisterStartupScrip que sirve para registrar código javascript al lado del servidor.




Descargar Proyecto
Si quieren donarme para una soda lo pueden hacer aqui.