Como criar um relógio no ASP.NET

Escrito por kevin lee | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar um relógio no ASP.NET
Você pode criar o seu próprio relógio no ASP.NET (Stockbyte/Stockbyte/Getty Images)

Você não precisa usar JavaScript para adicionar um relógio a uma página web ASP.NET. A linguagem ASP.NET suporta extensores AJAX, os quais são capazes de atualizar as páginas em tempo real. Crie um controle de usuário e poderá implementar um relógio facilmente. Como ele usará o relógio interno do computador para mostrar a hora, terá a mesma precisão.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

    Criar o controle de usuário

  1. 1

    Inicie o Microsoft Visual Studio e clique no menu "File" (Arquivo) do menu. Clique em "New" (Novo) e depois em "Website": Clique na opção "Visual C#" para selecioná-la. Clique duas vezes em "ASP.NET Web Site" (Site ASP.NET). O programa criará um novo projeto de site e colocará os arquivos na janela "Solution Explorer" (Navegador de soluções)

  2. 2

    Clique no botão de menu "Website" e selecione "Add New Item" (Adicionar elemento). Clique em "Web User Control" (Controle web de usuário) e digite "Clock" (Relógio) na caixa de texto "Name" (Nome). Clique em "Add" (Adicionar) para adicionar o controle "Clock" ao relógio. O Visual Studio exibirá um novo arquivo "Clock.ascx" na janela "Solution Explorer", e o código do mesmo na janela "Source" (Fonte).

  3. 3

    Cole o texto abaixo na janela de código, embaixo da primeira linha:

    <div style="background-color:Yellow; width:80px; color:Blue; border-style:solid; border-color:Red;">

    <asp:UpdatePanel runat="server" ID="UpdatePanelClock"> <ContentTemplate> <asp:Label runat="server" ID="LabelClock" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="TimerClock" EventName="Tick" /> </Triggers> </asp:UpdatePanel> <asp:Timer ID="TimerClock" runat="server" OnTick="TimerClock_Tick" Interval="1000" /> </div>

    Esse código adiciona um bloco "div" à página, o qual contém um painel de atualização AJAX do ASP.NET. O painel possui um modelo de conteúdo com um controle "label" (Etiqueta) que exibirá a hora. O bloco "Triggers" associa um trigger AJAX com o controle do relógio na última linha de código, embaixo da tag "</div>".

  4. 4

    Pressione "F7" para visualizar o código C# associado com o formulário. A tag de término do formulário aparecerá na parte inferior da página. Cole o seguinte código acima dele:

    protected void TimerClock_Tick(object sender, EventArgs e) { LabelClock.Text = DateTime.Now.ToLongTimeString(); }

    Esse código criará o método do evento "Tick" do relógio, o qual se executará uma vez por segundo, atualizando a hora exibida.

    Criar um formulário de provas

  1. 1

    Clique no menu "Website", depois em "Add New Item" e finalmente em "Web Form" (Formulário web). Digite "TestForm", sem as aspas, na caixa de texto "Name" e clique em "Add". O Visual Studio adicionará o formulário à janela "Solution Explorer". Você o usará para testar o controle de usuário.

  2. 2

    Clique duas vezes no formulário que você adicionou para ver o código na janela Source. Cole o seguinte texto embaixo da primeira linha de código:

    <%@ Register TagPrefix="uc" TagName="Clock" Src="Clock.ascx" %>

    Isso registrará o controle de usuário que você criou. O código define a propriedade "TagPrefix" com o valor "uc" e "TagName" com o valor "Clock": O valor do atributo "Src" é o nome do controle de usuário.

  3. 3

    Busque a tag do formulário que aparece no código, com uma tag "div" embaixo dele. Cole o seguinte código embaixo deles:

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <uc:Clock id="Clock" runat="server" />

    Esse é todo o código necessário para fazer com que o controle de usuário e o relógio apareçam no formulário. As primeiras duas linhas disponibilizarão o "ScriptManager" para o formulário, e a terceira adicionará o controle ao mesmo.

  4. 4

    Pressione "F5". O Visual Studio exibirá a página web no seu navegador e o relógio aparecerá na página.

Dicas & Advertências

  • Como o relógio se encontra em um controle de usuário ASP.NET separado, você poderá utilizá-lo em qualquer página web com os passos descritos. Estilize o relógio de acordo com as suas preferências, ajustando os parámetros de estilo na tag "div" do controle de usuário.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível