Ovaj patern se koristi za dimačko prikazivanje sadržaja, poput vremenske prognoze, berzanskih izveštaja, praćenja saobraćaja (pogotovo avionskih letova), praćenje proizvoda u e-commerce aplikacijama i za još mnogo sličnih primera. Cilj ovog paterna (nemojte mi zameriti što ne prevodim reč pattern, jer bih morao da napišem obrazac, šablon ilil kalup, a to sve tako glupo zvuči) je da omogući održavanje stalne veze između klijenta i servera. Na ovaj način možemo našu aplikaciju da unapredimo i usmerimo procesiranje različitih zahteva na jednu stranicu. U prilogu članka sam postavio i ceo kod, pa oni nestrpljivi mogu odmah da ga preuzmu 
.
Pokazaću vam tri krajnje jednostavna načina da izvedete ovaj patern. Preko update panela, pomoću javascripta i pozivanjem WebServisa. U ovom primeru simuliraćiemo prikazivanje vremenke prognoze sa Novi Sad, Beograd i Niš. Kod koji simulira prikupljanje ovih podataka sa nekog servera izgledao bi ovako:
private void GetLatestData()
{
Random rnd = new Random();
List<Prognoza> lista = new List<Prognoza>();
lista.Add(new Prognoza("Novi Sad", rnd.Next(-2, 2)));
lista.Add(new Prognoza("Baograd", rnd.Next(-2, 3)));
lista.Add(new Prognoza("Niš", rnd.Next(-3, 2)));
GridView gv = new GridView();
gv.DataSource = lista;
gv.DataBind();
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
gv.RenderControl(htw);
divResults.InnerHtml = sw.ToString();
}
U code behind-u stranice pravimo listu objekata Prognoza. Ovaj objekat ima dva atributa, Grad i Temperatura. Kada popunimo listu, vežemo je za GridView koji fizički ne postoji na stranici već ćemo ga dinamički izrenderovati. To ćemo uraditi preko HtmlTextWriter klase. Metod GridView.RenderControl nam pruža mogućnost da ceo sadržaj grida pošaljemo bilo gde. U ovom slučaju ćemo ga izrenderovati u DIV elementu koji se nalazi na stranici. Ovaj kod će nam simulirati prikupljanje podataka u sva tri primera.
1. Implementacija paterna preko UpdatePanela i Timera
Ovo je najjednostavniji način primene paterna. Na donjem primeru možete da vidite kako izgleda html source stranice koja će prikazivati rezultate koje generiše naša GetLatestData metoda.
Na stranici imamo UpdatePanel u okviru koga se nalazi div u kome će biti renderovan grid. Pored ovoga, imamo i Ajax Timer, koji će podizati svoj Tick event na svakih 5000 milisekundi, odnosno pet sekundi. Ovo ćemo iskoristiti i dodati update panel Trigger koji će ažurirati UpdatePanel svaki put kada se okine Tick događaj. Na ovaj način smo dobili permanentno osvežavanje korisničkog interfejsa. Poslednje što treba da uradimo je da u Page_Load hendleru dodamo poziv metodi GetLatestData().
protected void Page_Load(object sender, EventArgs e)
{
GetLatestData();
}
2. Implementacija pomoću JavaScripta
Code behind klasa za ovaj primer je potpuno ista kao i za prethodni. Imaćemo GetLatesData() metod koji će se pozvati u okviru Page_Load hendlera. Ono što se razlikuje je html source, jer će kompletno osvežavanja da obavlja JavaScript funkcija.
Na slici sam uokvirio dve najvažnije celine. Prvo što treba da uradimo je da instanciramo PageRequestManager-a da bi mogli da izvšimo post back. Drugo, inicijalizovaćemo JavaScript Timer koji će na svakih 5 sekundi da pozove JavaScript funkciju UpdateResults(). Naša funkcija će izvršiti post back i ponovo podesiti timer. Ovim smo ponovo dobili permanentno osvežavanje stranice.
3. Implementacija pozivom WebServisa
Poslednji primer koji ću vam pokazati je osvežavanje pozivanjem lokalnog WebServisa. Ovde ćemo simulirati pozivanje WebServisa recimo neke metereološke firme. Pretpostavićemo da je naš lokalni WebServis samo "wrapper" nekog stvarnog servisa. Prvo što moramo da uradimo je da dodamo [ScriptService] tag iznad definicije klase. Oni koji su bili na WebFu događaju se možda sećaju zašto je ovo važno, a ko nije bio može da pogleda source kod sa predavanja koje smo održali moja koleginica Milica i ja, a koji sam objavio u jednom od prehodnih članaka. Ukratko, ovim omogućavamo JavaScript funkcijama da pozovu naš servis.
U naš projekat ćemo dodati web servis (asmx) i u code behind-u uraditi nekoliko stvari. Kao što sam na početku napomenuo kod za simulaciju rezultata će ostati isti, osim što će naš WebServis umesto da pošalje sadržaj u DIV, da vrati html markup kao string.
[WebMethod]
[ScriptMethod]
public string GetResults() {
Random rnd = new Random();
List<Prognoza> lista = new List<Prognoza>();
lista.Add(new Prognoza("Novi Sad", rnd.Next(-2, 2)));
lista.Add(new Prognoza("Baograd", rnd.Next(-2, 3)));
lista.Add(new Prognoza("Niš", rnd.Next(-3, 2)));
GridView gv = new GridView();
gv.DataSource = lista;
gv.DataBind();
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
gv.RenderControl(htw);
return sw.ToString();
}
Ovaj markup ćemo izrenderovati u DIV elementu na stranici. Ono što nam je na stranici potrebno pokazuje sledeća slika.
Prvo moramo da registrujemo naš WebServis u okviru <Services> kolekcija ScriptManagera tako što ćemo uneti putanju do asmx fajla. Na stranici više nema UpdatePanela, već samo jedan html DIV u kome će se html markup izrenderovati. Za ovo će biti zadužene dve funkcije: RefreshData() koja će svakih 5 sekundi pozvati WebServis i vratiti rezultat i OnRefresh() koji kao parametar prima rezultat i renderuje ga u DIV elementu.
Da bi ceo primer radio potrebno je napraviti funkciju koja će započeti čitav proces, u našem slučaju funckija Start() i pozvati je iz onload eventa body elementa.
Šta na kraju?
U ovom primeru ste videli kako da implementirate Ajax persistent communication pattern, koji nam omogućava da od jedne stranice napravimo pravu malu aplikaciju i prenesemo web development na novi nivo komunikacije sa korisnicima. Ukoliko ste zainteresovani za Ajax patterne predlažem vam da pogledate http://ajaxpatterns.org/ gde je objašnjen veliki broj njih. U prilogu se nalazi ceo kod koji sam koristio u ovom članku, možete ga pogledati i prepravljati.
Lepo se provedite za praznike, nemojte mnogo da jedete, već se odmorite, a posle Nove Godine nastavljamo. Biće tu još Ajaxa, naprednijeg Silverlighta, RIA i mnogo drugih stvari!
Uživajte! 