Brains Engineering - Il Blog

Creare un Ticker con Ajax utilizzando un UpdatePanel e un Asp:Timer

scritto da guru 09/04/2008 8.23.00

Nell’articolo Aggiornare un Update Panel in modo Condizionale abbiamo visto come alterare i contenuti di un UpdatePanel in maniera condizionale. In questo articolo, vedremo come modificarne i contenuti sempre asincronamente ma in maniera automatica (l’utente non deve scatenare il postback).

Per raggiungere il nostro scopo utilizzeremo il Timer (asp:Timer). Questo utilissimo componente esegue dei postback ad intervalli predefiniti. E’ inoltre possibile associare un metodo (con il quale aggiorneremo i contenuti dell’UpdatePanel) all’evento tick dello stesso.

L’esempio mostra due UpdatePanel che contengono due label. Il primo viene aggiornato ogni secondo mentre il secondo ogni 5 secondi.

 

<%@ Page Language="C#" %>

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack)
        {
            lbStatus.Text = "Page Post Back";
        }
        else
        {
            lbStatus.Text = "First Load";
        }

    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        lbTicker1.Text = DateTime.Now.ToLongTimeString();
    }
    protected void Timer2_Tick(object sender, EventArgs e)
    {
        lbTicker2.Text = DateTime.Now.ToLongTimeString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:Label ID="lbStatus" runat="server" Text="Label"></asp:Label>
    <hr />

    <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
    </asp:Timer>
    <asp:Timer ID="Timer2" runat="server" Interval="5000" OnTick="Timer2_Tick">
    </asp:Timer>
   
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <Triggers>
          <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />         
       </Triggers>
       <ContentTemplate>
          <div style="border-style:solid;background-color:Gray;">
              <asp:Label ID="lbTicker1" runat="server" Text=""></asp:Label>
          </div>
          <br />
       </ContentTemplate>
    </asp:UpdatePanel>
   
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
       <Triggers>
          <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" />         
       </Triggers>
       <ContentTemplate>
          <div style="border-style:solid;background-color:Gray;">
              <asp:Label ID="lbTicker2" runat="server" Text=""></asp:Label>
          </div>
          <br />
       </ContentTemplate>
    </asp:UpdatePanel>

</form>
</body>
</html>

Correntemente valutato 1.5 da 2 utenti

  • Currently 1,5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , ,

Categorie: ASP.Net Ajax

Post correlati

Commenti

21/06/2011 15.52.12

online casino

idea molto interessante. piuttosto sorprendente. Grazie per le informazioni fornite.

online casino it

Aggiungi commento


(Visualizza la tua icona Gravatar)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Anteprima

20/05/2012 1.47.39

Cerca



Calendario

<<  maggio 2012  >>
lumamegivesado
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

© Copyright 2012

Sign in