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,
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.
Comparte este post: