Non è necessario utilizzare JavaScript per aggiungere un orologio per una pagina Web ASP.NET. Il linguaggio di programmazione ASP.NET supporta estensori AJAX, che sono in grado di aggiornamento e rinfrescanti ASP.NET pagine Web in tempo reale. Con la creazione di un controllo utente, si può facilmente incorporare un orologio all'interno di qualsiasi pagina Web. Grazie al consumo orologio interno del computer per la sincronizzazione, il vostro orologio ASP.NET sarà accurato come quello sul computer.

istruzione

Create User Control

1 Avviare Microsoft Visual Studio e fare clic sul pulsante "File" nel menu. Fai clic su "Nuovo" e quindi su "Sito Web". Selezionare l'opzione "Visual C #" per evidenziarlo. Fare doppio clic su "Sito Web ASP.NET." Il programma crea un nuovo progetto di sito web e mette i suoi file nella finestra Esplora soluzioni.

2 Fare clic sul pulsante del menu "Sito" e selezionare "Aggiungi nuovo elemento." Fai clic su "Web User Control" e tipo "Orologio" nella casella di testo Nome. Fai clic su "Aggiungi" per aggiungere un nuovo controllo utente denominato "Clock" per il progetto. Visual Studio inserisce un nuovo file "Clock.ascx" nella finestra di Esplora soluzioni. il codice sorgente del controllo viene visualizzata nella finestra di origine.

3 Incolla il testo mostrato sotto nella finestra di codice direttamente sotto la prima riga di codice.

<Div style = "background-color: giallo; width: 80px; colore: Blu; border-style: solido; border-color: red;">

<Asp: UpdatePanel runat = "server" ID = "UpdatePanelClock">
<ContentTemplate>
<Asp: Label runat = "server" ID = "LabelClock" />
</ ContentTemplate>
<Trigger>
<Asp: AsyncPostBackTrigger ControlID = EventName "TimerClock" = "Tick" />
</ Trigger>
</ Asp: UpdatePanel>
<Asp: Timer ID = "TimerClock" runat = "server" onTick = "TimerClock_Tick" Intervallo = "1000" />
</ Div>

Questo codice aggiunge un blocco div alla pagina. Il div contiene un pannello di aggiornamento ASP.NET AJAX. Il pannello contiene un modello di contenuti con un controllo etichetta che visualizza l'ora corrente. Le "trigger" associati a blocchi un trigger AJAX con il controllo del timer sull'ultima riga di codice prima del tag div.

4 Premere il tasto "F7" per visualizzare il codice C # associato al modulo. tag di chiusura del modulo - una staffa di destra - compare in fondo alla pagina. Incollare il seguente codice sopra quel tag.

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

Questo codice crea il metodo l'orologio del timer che passa ogni secondo. La singola riga di codice in questo metodo aggiorna l'etichetta del controllo utente. Poiché il timer zecche ogni secondo, ASP.NET aggiorna l'etichetta con l'ora corrente ogni secondo.

Creare Modulo Test

5 Fare clic sul pulsante del menu "Sito", fai clic su "Add New Item" e poi cliccare su "Web Form." Tipo "TestForm" - senza le virgolette - nella casella di testo Nome e fare clic su "Aggiungi". Visual Studio aggiunge il modulo per la finestra Esplora soluzioni. Si utilizzerà questo modulo per testare il controllo utente.

6 Fare doppio clic sul modulo aggiunto per visualizzare il codice sorgente di default nella finestra di origine. Incollare il seguente codice sotto la prima riga di codice nella finestra Origine:

<% @ Register TagPrefix = "UC" TagName = "Clock" src = "Clock.ascx"%>

Questo codice registra il controllo utente creato. Il codice imposta il valore di TagPrefix per "UC" e il valore di TagName a "Orologio". Il valore del attributo Src è il nome del controllo utente.

7 Trovare il tag form che compare nel codice. Un tag div appare sotto quel tag. Incollare il seguente codice sotto il tag div:

<Asp: ScriptManager ID = runat "ScriptManager1" = "server">
</ Asp: ScriptManager>
<Uc: Orologio id = "Clock" runat = "server" />

Questo è tutto il codice è necessario effettuare il controllo utente e l'orologio appaiono in questa forma. Le prime due righe rendono il ScriptManager disposizione della forma; la terza linea aggiunge il controllo utente al form.

8 Premere il tasto "F5". Visual Studio visualizza la pagina Web nel browser e appare l'orologio sulla pagina.

Consigli e avvertenze

• Dal momento che l'orologio risiede in un controllo utente ASP.NET separata, è possibile incorporare in qualsiasi pagina Web ASP.NET come descritto in questi passaggi. Lo stile orologio come vuoi modificando i parametri di stile nel tag div del controllo dell'utente.