Hvordan lage en hel rad Klikkbart i Repeater Java

December 31

Javascript gjør det mulig for ASP.NET webutviklere å manipulere repeater kontroll elementer raskt. Den repeater kontrollen fungerer som et bord. Selv om det ligner på Gridview kontroll, har repeater tilpass layout maler. Bruke Sak Mal, for eksempel, kan du legge til HTML-elementer til å designe din egen unike layout. For å tillate brukere til å klikke en repeater hele raden, legge til en Javascript-funksjonen på websiden.

Bruksanvisning

Opprett Repeater

1 Åpne Microsoft Visual Studio og velg "File".

2 Velg "Nye nettsider" fra rullegardinmenyen for å åpne "Nye nettsider" vinduet. Klikk "C #" og dobbeltklikk på "ASP.NET nettsted." Visual Studio vil opprette et nytt nettsted prosjektet. Prosjektfiler vises i Solution Explorer. HTML-koden for standard form, "default.aspx," vises i koden vinduet.

3 Legg til følgende kode i "kroppen" delen av dokumentet:

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

</ HeaderTemplate>

<Tr>

</ Tr>

</ ItemTemplate>

</ Asp: Repeater>

Dette skaper en repeater kontroll som inneholder to rader, to kolonner og en knapp.

4 Høyreklikk hvor som helst på siden og velg "Vis kode". C # -kode vises i kodevinduet og vise denne metoden:

beskyttet void Page_Load (objekt avsenderen, EventArgs e)

{

}

Legg merke til de to brakett symbolene nedenfor den første linjen med kode. Det er der tilleggskode går.

5 Lim inn følgende kode mellom de to brakett symboler:

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

dataTable.Columns.Add (ny System.Data.DataColumn ( "Month", typeof (string)));

dataTable.Columns.Add (ny System.Data.DataColumn ( "Temperatur", typeof (string)));

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

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

Repeater1.DataSource = Datatable;

Repeater1.DataBind ();

Denne koden skaper en datakilde til forsterkeren.

6 Høyreklikk hvor som helst i koden, og velg "Vis Designer." Web skjemaet vises viser repeater. Høyreklikk på repeater og velg "Properties" for å åpne vinduet Egenskaper.

7 Klikk på "Hendelser" fanen øverst i vinduet Egenskaper for å vise en liste over hendelser.

8 Dobbeltklikk på "ItemDataBound" hendelse. Retningslinjene vindu vil åpne og vise denne koden blokken:

beskyttet void Repeater1_ItemDataBound (objekt avsenderen, RepeaterItemEventArgs e)

{

}

Denne koden kjøres etter repeater laster sine data.

9 Klikk på "Events" -fanen øverst i vinduet og dobbeltklikk på "ItemCommand." Koden vinduet C # vil gjenåpne og vise denne koden:

beskyttet void Repeater1_ItemCommand (objekt kilde, RepeaterCommandEventArgs e)

{

}

Denne koden kjøres når du klikker på knappen kontrollen på forsterkeren.

10 Lim inn følgende kode mellom de to brakett symboler:

int selectedRow = e.Item.ItemIndex;

Skriv scriptBlockType = this.GetType ();

ClientScriptManager Script = Page.ClientScript;

string javaScriptFunction = "selectRow (" + " '» + selectedRow + "'" + ")";

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

Denne koden kaller en Javascript-funksjon som vil markere den valgte raden.

Konfigurer Java

11 Klikk på "Source" fanen nederst på skjermen. HTML-koden for skjemaet vises.

12 Legg til følgende Javascript-koden etter at dokumentet er "<title>" tag:

funksjon selectRow (selectedRow) {

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

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

}

Denne koden velger og fremhever den raden du klikker.

1. 3 Trykk "F5" for å starte nettstedet. Den befolkede repeater kontroll vil vises i nettleseren.

14 Klikk på en av radene. Javascript-koden vil velge raden og markere det.