JavaScript rende possibile per gli sviluppatori Web ASP.NET di manipolare gli elementi di controllo ripetitore rapidamente. Il controllo ripetitore funziona come un tavolo. 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 intera fila di un ripetitore, aggiungere una funzione JavaScript per la vostra pagina web.

istruzione

creare Ripetitore

1 Aprire Microsoft Visual Studio e selezionare "File".

2 Selezionare "Nuovo sito" dal menu a discesa per aprire la finestra "nuovo sito". Fai clic su "C #" e quindi fare doppio clic su "ASP.NET sito web." Visual Studio creerà un nuovo progetto di sito web. I file di progetto vengono visualizzati in Esplora soluzioni. Il codice HTML per il modulo predefinito, "Default.aspx," apparirà nella finestra del codice.

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

<Asp: Repeater id = "Repeater1" runat = "server" OnItemCommand = "Repeater1_ItemCommand">

<HeaderTemplate>

<Table border = 1>

</ HeaderTemplate>

<ItemTemplate>

<Tr>

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

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

<Td width = "33%"> <% # DataBinder.Eval (Container.DataItem, "Mese")%> </ td>

<Td width = "33%"> <% # DataBinder.Eval (Container.DataItem, "temperatura")%> </ td>

</ Tr>

</ ItemTemplate>

</ Asp: Repeater>

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

4 Pulsante destro del mouse in un punto qualsiasi della pagina e selezionare "Visualizza codice." Il codice C # verrà visualizzato nella finestra del codice e visualizzare questo metodo:

protetto void Page_Load (object sender, EventArgs e)

{

}

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

5 Incollare il codice seguente tra i due simboli della staffa:

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

dataTable.Columns.Add (nuova System.Data.DataColumn ( "Mese", typeof (string)));

dataTable.Columns.Add (nuova System.Data.DataColumn ( "temperatura", typeof (string)));

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

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

Repeater1.DataSource = dataTable;

Repeater1.DataBind ();

Questo codice crea una fonte di dati per il ripetitore.

6 Pulsante destro del mouse in qualsiasi punto del codice e selezionare "Visualizza finestra di progettazione." Viene visualizzato il modulo Web che mostra il ripetitore. Fare clic con il ripetitore e selezionare "Proprietà" per aprire la finestra delle proprietà.

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

8 Fare doppio clic l'evento "ItemDataBound". La finestra del codice si apre e visualizza questo blocco di codice:

protetto Repeater1_ItemDataBound void (object sender, RepeaterItemEventArgs e)

{

}

Questo codice viene eseguito dopo il ripetitore carica i suoi dati.

9 Fare clic sulla scheda "Eventi" nella parte superiore della finestra e quindi fare doppio clic "ItemCommand." La finestra di codice C # riaprirà e visualizza questo codice:

protetto Repeater1_ItemCommand void (fonte oggetto, RepeaterCommandEventArgs e)

{

}

Questo codice viene eseguito quando si fa clic sul controllo pulsante sul ripetitore.

10 Incollare il codice seguente tra i due simboli della staffa:

int selectedRow = e.Item.ItemIndex;

Tipo scriptBlockType = this.GetType ();

ClientScriptManager ScriptManager = Page.ClientScript;

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

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

Questo codice chiama una funzione JavaScript che metterà in evidenza la riga selezionata.

Configurare JavaScript

11 Fare clic sulla scheda "Sorgente" che si trova nella parte inferiore dello schermo. Viene visualizzato il codice HTML per il modulo.

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

Funzione selectRow (selectedRow) {

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

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

}

Questo codice seleziona e mette in evidenza la riga che si sceglie.

13 Premere il tasto "F5" per lanciare il sito web. Il controllo ripetitore popolato apparirà nel browser.

14 Fare clic su una delle righe. Il codice JavaScript selezionerà la riga e evidenziarla.