JavaScript permette agli sviluppatori Web di ASP.NET di manipolare gli elementi del controllo repeater rapidamente. Il controllo repeater funziona come una tabella. Anche se è simile al controllo GridView, il ripetitore ha modelli di layout personalizzabili. Utilizzando il modello di elemento, ad esempio, è possibile aggiungere elementi HTML per progettare il proprio layout unico. Per consentire agli utenti di fare clic su tutta la riga di un ripetitore, è necessario aggiungere una funzione JavaScript al vostro Web page.

Istruzioni

Creare Repeater

1

Aprire Microsoft Visual Studio e selezionare "File".

2

Selezionare "Nuovo sito" dal menu a discesa per aprire la finestra "Nuovo sito". Fare clic su "C#" e quindi fare doppio clic su "Sito ASP.NET". Visual Studio creerà un nuovo progetto di sito Web. File di progetto vengono visualizzati in Esplora soluzioni. Il codice HTML per il modulo predefinito, "Default. aspx," verrà visualizzato nella finestra del codice.

3

Aggiungere il seguente codice alla sezione "corpo" del documento:

< id asp: Repeater = "Repeater1" runat = "server" onitemcommand = "Repeater1_ItemCommand" >

< HeaderTemplate >

< tavolo border = 1 >

< / HeaderTemplate >

< ItemTemplate >

< tr >

< td >< asp: LinkButton runat = "server" ID = "SelectRow" CommandName = "SelectRow" > Seleziona riga < / asp: LinkButton >< /td >

< td >< % # Container. DataItem % >< /td >

< larghezza td = "33%" >< % # DataBinder. Eval (container. DataItem, "Mese") % >< /td >

< larghezza td = "33%" >< % # DataBinder. Eval (container. DataItem, "Temperatura") % >< /td >

< /tr >

< / ItemTemplate >

< / asp: Repeater >

Questo crea un controllo repeater che contiene due righe, due colonne e un pulsante.

4

Fare clic destro sulla pagina e selezionare "Visualizza codice". Il codice c# apparirà nella finestra del codice e questo metodo di visualizzazione:

protected void Page_Load (object sender, EventArgs e)

{

}

Nota i simboli di due staffa sotto la prima riga di codice. Questo è dove va il codice aggiuntivo.

5

Incollare il seguente codice tra i simboli di due staffa:

System.Data.DataTable dataTable = nuovo System.Data.DataTable();

dataTable.Columns.Add (nuovo System.Data.DataColumn ("Mese", String.Class.ToType;

dataTable.Columns.Add (nuovo System.Data.DataColumn ("Temperatura", String.Class.ToType;

dataTable.Rows.Add (string [] {"giugno", "100"});

dataTable.Rows.Add (string [] {"dicembre", "45"});

Repeater1.DataSource = dataTable;

Repeater1.DataBind();

Questo codice crea un'origine dati per il ripetitore.

6

Pulsante destro del mouse in un punto qualsiasi nel codice e selezionare "Visualizza finestra di progettazione." Il modulo Web apparirà mostrando il ripetitore. Il ripetitore di destro e selezionare "Proprietà" per aprire la finestra Proprietà.

7

Fare clic sulla scheda "Eventi" nella parte superiore della finestra proprietà per visualizzare un elenco di eventi.

8

Doppio clic sull'evento "ItemDataBound". La finestra del codice per aprire e visualizzare questo blocco di codice:

protected void Repeater1_ItemDataBound (object sender, RepeaterItemEventArgs e)

{

}

Questo codice viene eseguito dopo il ripetitore per caricare i dati.

9

Fare clic sulla scheda "Eventi" nella parte superiore della finestra e quindi fare doppio clic su "ItemCommand." La finestra di codice c# sarà riaprire e visualizzare questo codice:

protected void Repeater1_ItemCommand (object source, RepeaterCommandEventArgs e)

{

}

Questo codice viene eseguito quando si sceglie il pulsante di controllo sul repeater.

10

Incollare il seguente codice tra i simboli di due staffa:

selectedRow int = e.Item.ItemIndex;

Digitare scriptBlockType = this. GetType ();

ClientScriptManager scriptManager = ClientScript;

String javaScriptFunction = "selectRow (" + "'" + selectedRow + "'" + "")";";

ClientScript.RegisterStartupScript(GetType(), "selectRow", javaScriptFunction, true);

Questo codice chiama una funzione JavaScript che verrà evidenziata la riga selezionata.

Configurare JavaScript

11

Fare clic sulla scheda "Source" situata nella parte inferiore dello schermo. Verrà visualizzato il codice HTML per il modulo.

12

Aggiungere il seguente codice JavaScript dopo il documento "< title >" tag:

Function selectRow(selectedRow) () {

var repeaterRows = document.getElementsByTagName("tr");

.style.backgroundColor repeaterRows [selectedRow] = "giallo";

}

Questo codice consente di selezionare ed evidenzia la riga che si sceglie.

13

Premere "F5" per lanciare il sito. Il controllo repeater popolate verrà visualizzato nel browser.

14

Fare clic su una delle righe. Il codice JavaScript sarà selezionare la riga ed evidenziarla.