Kurs: Advanced Web Application Technologies
Modul: Kontrole za prikaz i manipulaciju podacima
Autor: Marko Stojićević
Naziv jedinice: DetailsView veb serverska kontrola
Materijali vezani uz ovu lekciju:
-
Test detailsview veb serverska kontrola -
DetailsView veb serverska kontrola (PDF dokument)
Svojstva DetailsView kontrole
DetailsView kontrola se koristi za prikaz jednog zapisa iz baze podataka unutar HTML tabele. O editovanje, brisanje i ubacivanje redova u bazu podataka. DetailsView kontrola se može koristiti samostalno za navigaciju kroz izvor podataka ili u kombinaciji sa drugim kontrolama kao što su GridView, ListBox, DropDownList itd. Ima tri moda rada sa podacima koji se predstavljaju enumeracijom DetailsViewMode sa vrednostima: Edit, Insert i ReadOnly.
GridView kontrola – izvor parametra za DetailsView
Na formu ćemo dodati GridView kontrolu koju ćemo povezati sa prethodno definisanom SqlDataSource1 kontrolom. Omogućićemo selekciju u GridView kontroli. Komanda SELECT SqlDataSource1 kontrole koja služi kao izvor podataka za GridView kontrolu je
SELECT [au_id], [au_lname], [au_fname], [state] FROM [authors]
SqlDataSource2 kao izvor podataka za DetailsView
Na formu ćemo dodati još jednu SqlDataSource kontrolu pod nazivom SqlDataSource2, njenu SELECT komandu ćemo definisati upitom:
SELECT * FROM authors
Klikom na dugme WHERE definisaćemo parametar za ovu kontrolu, kao na slici

Klikom na dugme “Advance“ u prozoru za generisanje SELECT naredbe otvara se prozor u kome ćemo potvrditi generisanje INSERT, UPDATE i DELETE komande.
Povezivanje DetailsView kontrole sa izvorom podataka
DetailsView kontrolu ćemo povezati je sa SqlDataSource kontrolom na potpuno isti način kao što smo to radili i sa GridView kontrolom. Nakon povezivanja sa SqlDataSource kontrolom u prozoru “DetailsView Tasks“ potvrdimo opcije “Enable Paging“ čime ćemo omogućiti navigaciju kroz zapise primenom DetailsView kontrole. U prozoru “DetailsView Tasks...“ omogućićemo ubacivanje, editovanje i brisanje podataka.

Prikaz GridView i DetailsView kontrole
Sada se pokretanjem strane prikazuju GridView i DetailsView kontrola, pri čemu se DetailsView kontrola može koristiti i za editovanje i brisanje postojećih podataka, kao i za unos novih podataka. DetailsView kontrola prikazuje podatke iz reda koji je selektovan u GridView kontroli.

Edit mod DetailsView kontrole
Klikom na link “Edit“ u DetailsView kontroli ulazi se u režim editovanja, odnosno promene postojećih podataka.

INSERT mod DetailsView kontrole
Klikom na link “New“ DetailsView kontrola prelazi u mod za ubacivanje podataka koji je prikazan na slici
Klikom na link “Insert“ dolazi do unosa podataka u bazu, ukoliko su podaci u skladu sa ograničenjima definisanim u bazi podataka. U protivnom, dolazi do “pucanja“ aplikacije. Zbog toga je potrebno obraditi događaj ItemInserted.
Obrada izuzetaka (ItemInserted, ItemUpdated, ItemDeleted )
U kodu koji sledi prikzana je obrada događaja ItemInserted, DetailsView kontrole.
protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
{
if (e.Exception != null)
{
Label1.Text = "Greska prilikom unosa podataka";
e.ExceptionHandled = true;
}
GridView1.DataBind();
}
Ukoliko nije došlo do greške pomoću Bind metode vrši se osvežavanje sadržaja GridView kontrole zbog unosa novog reda. Ukoliko je došlo do greške vrši se obrada izuzetka i na Label kontroli se prikazuje odgovarajuća poruka. Na potpuno isti način treba obraditi događaje ItemUpdated i ItemDeleted.
BoundField, TemplateField
Ako se pogleda markerski kod nastao konfigurisanjem GridView ili DetailsView kontrole videćemo da su kolone u ovim kontrolama predstavljene klasom BoundField.
<asp:BoundField DataField="au_lname" HeaderText="au_lname"
SortExpression="au_lname" />
Klasa BoundField se koristi za prikaz vrednosti u kolonama kontrola za prikaz podataka u vidu teksta. Posredstvom svojstva DataField, BoundField objekat se povezuje sa kolonom iz baze podataka.
Template field
Postoji klasa TemplateField koja omogućava prikaz proizvoljnog sadržaja (najčešće kontrola) u kolonama kontrola za prikaz podataka. Kada se neka kolona proglasi za templejt kolonu ona može imati različite templejte kao što su: ItemTemplate, InsertItemTemplate, EditItemTemplate itd. ItemTemplate specificira sadržaj koji će biti prikazan za stavku u TemplateField objektu, odnosno specificira sadržaj koji će se pojaviti u templejt koloni kada se ona nalazi u režimu prikaza podataka. EditItemTemplate specificira sadržaj koji će biti prikazan unutar polja (kolone) TemplateField kada se odgovarajući red nalazi u režimu editovanja. InsertItemTemplate specificira sadržaj koji će biti prikazan unutar polja TemplateField kada se odgovarajući red nalazi u režimu insertovanja. Samo DetailsView kontrola može koristiti InsertItemTemplate.
U prozoru “DetailsView Tasks...” odaberimo opciju ”EditFields”. Otvara se prozor kao na slici
Selektujmo “state” polje u prozoru “Selected Fields” a zatim kliknimo na link iznad OK dugmeta na kome piše “Convert this field into a Template field”. Ovim postupkom smo kolonu “state” proglasili za templejt kolonu.
Rad sa templejtima
Vratimo u prozor “DetailsView Tasks...”. Kliknimo sada na link “Edit templates“ i dobijamo situaciju kao na slici ispod tj. ulazimo u ItemTemplate kolone “state”.
Korišćenjem ovog templejta možemo promeniti način prikaza stavki u ovoj koloni u režimu pregleda podataka. U ovom trenutku nećemo ništa raditi u ovom templejtu. Klikom na DropDownList “Display“ biće prikazani templejti kao na slici ispod:
Kao što se može videti templejti su grupisani po poljima (kolonama iz baze), pa za svaku templejt kolonu postoje gore prikazani templejti. Sada ćemo ući u EditItemTemplate kolone “state“. Izbrisaćemo TextBox kontrolu koja postoji unutar ovog templejta i na njeno mesto ćemo ubaciti DropDownList kontrolu. Ovo je prikazano na slici ispod.

Povezivanje kontrole unutar templejta sa izvorom podataka
Najpre ćemo DropDownList kontrolu unutar templejta povezati sa novom SqlDataSource kontrolom kao što je prikazano na slici
Sada ćemo u prozoru DropDownListTasks kontrole unutar templejta kliknuti na na link “Edit DataBindings“ .
Sada se otvara prozor kao na slici ispod:
Na ovaj način se, selektovana vrednost DropDownList kontrole koja se pojavljuje u režimu editovanja, povezuje sa poljem state.
Markerski kod generisan ubacivanjem template kolone
U tekstu ispod prikazan je Markerski kod generisan ubacivanjem template kolone.
<asp:TemplateField HeaderText="state" SortExpression="state">
<EditItemTemplate>
<asp:DropDownList ID="DropDownList2" runat="server"
DataSourceID="SqlDataSource3"
DataTextField="state"
DataValueField="state"
SelectedValue='<%# Bind("state") %>'>
</asp:DropDownList>
</EditItemTemplate>
</asp:TemplateField>
DetailsView kontrola u režimu editovanja podataka
Sada DetailsView kontrola u režimu editovanja podataka izgleda kao na slici ispod.

Kao što vidimo pored natpisa “state” pojavljuje se DropDownList kontrola koja je ubačena zahvaljujući upotrebi TemplateField kolone.