[CodeSnippet] Mostrar un Label en ASP.NET por 3 segundos
Requerimiento: Después de procesar una operación contra la base de datos, se desea mostrar un mensaje de confirmación en un Label, pero que el mismo desaparezca en unos tres segundos, ver pregunta.
Solución: Conociendo el funcionamiento de la infraestructura web, el browser es quien automáticamente pasado los 3 segundos debe ocultar el mensaje mostrado. Dado que la funcionalidad que necesitamos es del lado del cliente, la opción es usar JavaScript. Dentro de los eventos Timing de JavaScript, existe el método setTimeout() que pertenece al DOM Window, este método permite ejecutar una sentencia o función JavaScript, después de un determinado tiempo. Y la propuesta será tener dos funciones, una que muestre el “Label” y que a la vez llame dentro de 3 segundos a otra función que oculta el Label. Y finalmente para integrarlo con nuestro botón de ASP.NET, al finalizar la ejecución del mismo podemos registrar el script del lado cliente, usando el método RegisterStartupScript de la propiedad Page.ClientScript. Nota: no es necesario usar un Label, podemos usar el elemento HTML Div para mostrar el mensaje.
Código ASPX:
1: <head runat="server">
2: <title></title>
3: <script type="text/javascript" language="javascript"> 1:
2: function MostrarLabel() {
3: setTimeout("OcultarLabel()", 3000);
4: var msj = document.getElementById("lblMensaje");
5: msj.style.visibility = "visible";
6: }
7: function OcultarLabel() {
8: var msj = document.getElementById("lblMensaje");
9: msj.style.visibility = "hidden";
10: }
</script>
4: </head>
5: <body >
6: <form id="form1" runat="server" >
7: <div>
8: <div id="lblMensaje" style="visibility:hidden;">
9: <h3>Mensaje mostrado por tres segundos...</h3>
10: <br />
11: </div>
12: <input type="button" value="click aqui" onclick="MostrarLabel()" />
13: <asp:Button ID="btnMostrarMensaje" runat="server" Text="Mostrar"
14: onclick="btnMostrarMensaje_Click" />
15: <asp:Button ID="btnNada" runat="server" Text="No Muestra nada" />
16: </div>
17: </form>
18: </body>
Código Evento:
1: protected void btnMostrarMensaje_Click(object sender, EventArgs e)
2: {
3: //codigo de operaciones contra la base de datos
4: Page.ClientScript.RegisterStartupScript(
5: Page.ClientScript.GetType(), "onLoad", "MostrarLabel();", true);
6: }
Navegadores Probados: Todos sobre Windows Vista SP1.
- Firefox 3.0.6
- Internet Explorer 7.0.6001
- Opera 9.52
- Google Chrome 1.0.154.48
- Safari 3.1.2
Notas:
Recursos:
P.D.: Cuando tenga este tipo de requerimientos, no inventen marcianadas para hacerlo con ASP.NET 3.5++, puede ser tan simple de hacerlo con JavaScript. Ojo, tampoco se quiere concluir que todo lo vamos hacer con JavaScript, debemos buscar el equilibrio, sin afectar la seguridad y el rendimiento.
Saludos,