viernes, 18 de marzo de 2016

Simple Clock Control AJAX ASP

 Un problema común  en las páginas web es el asunto del hecho de dar la hora. Se puede hacer con javascript, pero daría la hora del lado Cliente, en algunos casos es probable que la computadora esté fuera de hora, generalmente porque son unos bagres y no le cambian la pila.
Supongamos que en nuestra aplicación empresarial (si es empresarial está demás decir que tiene que ser en ASP.Net) a veces necesito dar a conocer al usuario, qué hora tiene el Servidor.
 Esto se puede resolver directamente con ASP.Net sin hacer muchos malabares y simplemente usando Ajax y un UpdatePanel.
 Quiero suponer que cualquier persona que lleve 3 o 4 meses de experiencia en ASP.Net, ya tiene la librería Ajax Toolkit, que la puede descargar desde cualquier lado, incluso desde el mismo Visual Studio.
 Acá vamos a usar Visual Studio, el proyecto será un WebForm (No voy a usar MVC).

El WebForm tiene lo siguiente:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ServerClock.WebForm1" %>

<%@ Register src="ServerClockControl.ascx" tagname="ServerClockControl" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <uc1:ServerClockControl ID="ServerClockControl1" runat="server" />
 
    </div>
    </form>
</body>
</html>


Como verán, llamo al Control ServerClockControl que es el que tiene el reloj:
Ahora veamos que tiene adentro el ServerClockControl:


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ServerClockControl.ascx.cs" Inherits="ServerClock.ServerClockControl" %>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Timer ID="TimerFecha" runat="server" Interval="2000" 
                ontick="TimerFecha_Tick">
            </asp:Timer>
            <asp:Timer ID="TimerHora" runat="server" Interval="1000" 
                ontick="TimerHora_Tick">
            </asp:Timer>
            <style type="text/css">
.txtAlign { TEXT-ALIGN: center }
</style>
            <p align="center" style="margin:1% 0;">
            
                <asp:Label ID="Label2" runat="server" Text="Date:"></asp:Label>
            
                </p>
            <p align="center" style="margin:-1% 0;" style="height: 20px">
                &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<asp:Label CssClass="txtAlign" ID="LabelFecha" runat="server" Text="12/12/2012 " 
                    BorderColor="#FF3300" BorderStyle="Outset" BorderWidth="1px"></asp:Label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </p>
                
                <p style="margin:1% 0;" align="center">
                <asp:Label ID="Label1" runat="server" Text="Time:"></asp:Label>
                </p>
                <p align="center" style="margin:-1% 0;" style="height: 20px">
                    
                <asp:Label CssClass="txtAlign" ID="LabelHora" runat="server" Text="--:--:--" 
                    style="height: 32px; " 
                    Font-Size="Larger" Font-Bold="True" BackColor="White" BorderColor="#FF3300" 
                        BorderWidth="2px" Height="35px" Width="92px"></asp:Label>
           
            </p>
            
            <br>
            <br>
            <br>
            <br>
        </ContentTemplate>
    </asp:UpdatePanel>


El ServerClockControl posee un UpdatePanel, la magia del UpdatePanel está en que todo lo que esté adentro, puede actualizarse con el Servidor sin necesidad de refrescar la página, el que  lo hace es AJAX, pero el UpdatePanel, es un control que simplifica el proceso.
Dentro del UpdatePanel está el <ContentTemplate> y dentro están dos controles Timer, uno actualiza la fecha y el otro la hora, uno está puesto para que actualice cada 2000 milisegundos y el otro cada 1000 milisegundos, osea 2 segundos y 1 segundo respectivamente. Podría haber sido solamente un Timer que actualice la fecha y la hora, pero se me ocurrió hacer 2 Timer y no tengo que andar explicando por qué, porque no tengo ganas.


Pero cómo es que actualiza la hora?
Bueno, eso le corresponde al código C# que está en ServerClockControl.ascx.cs
El método siguiente es el que se encarga de actualizar la fecha y la hora.
protected void TimerHora_Tick(object sender, EventArgs e)
{
 LabelHora.Text = DateTime.Now.ToString("hh:mm:ss");//ho.GetHora();

LabelFecha.Text = DateTime.Now.ToString("dd/MM/yyyy");// fe.GetFecha().Substring(0, 11);
}

Sí, tal cuál en Windows Form y en WPF, así, en LabelHora coloco el resultado de
DateTime.Now.ToString("hh:mm:ss"); en ese formato coloco hora, minutos y segundos, lo mismo va para la fecha, día, mes, año.
Finalmente queda así el control:

Gracias por leer!!! Yo soy Ger.
Bye!


Descarguen desde Codeplex, soy el usuario Becklespinax:
https://simpleajaxclockasp.codeplex.com/releases/view/101601

Proyecto en Codeplex:


No hay comentarios:

Publicar un comentario

Escriba su comentario...