Dynamiska webbsystem. Ajax

Transkript

1 Dynamiska webbsystem Ajax

2 AJAX och web 2.0 Web 2.0 är egentligen bara ett buzzword för en modern webbsajt. Innehållet skulle till exempel vara: Rich internet application (ajax, flash, silverlight) (rich user experience) Web services (rich user experience) Blogs (collaboration) Wikis (collaboration) Social networking (collaboration) Social bookmarking (collaboration) RSS/Atom (prenumerera på data)

3 Varför använda AJAX? Fördelar: Reducerat behov av bandbredd Laddar data vid behov Service-baserad tillämpning i samband med webbutveckling Rich user experience Nackdelar: Oönskad webbläsarfunktionalitet (tex back och refreshknappar) Affärslogik kan finnas i javascript Svårt att testa koden i rätt miljö

4 ASP.NET 4 AJAX server controls 1 1.ScriptManager control Möjliggör användandet av AJAX, genererar kod, etc. Bara en per sida (observera att ej går att ha denna både på master och content) 2.ScriptManagerProxy control Låter dig utöka ScriptManagerns funktionalitet, tex ladda javascript-filer och registrera WCF-services (kan användas på content page om det finns en ScriptManager på mastern) 3.UpdatePanel control En container som kan hålla flera andra kontroller som ska uppdateras då postback sker. Kan på så vis styra vad som ska uppdateras (en sida kan ha flera UpdatePanels)

5 ASP.NET 4 AJAX server controls 2 4.UpdateProgress control Visuell indikation när en asynkron postback sker, användaren ser att en updatering pågår 5.Timer control En eller flera UpdatePanel controls kan uppdateras automatiskt då viss tid förflutit. Dessa AJAX-kontroller finns med i ASP.NET 4 vid installation. Utöver dessa kan med fördel även AJAX control toolkit installeras för att få tillgång till mycket mer färdiga AJAX-tillämpningar!

6 AJAX control toolkit (för ASP.NET 4) Installation av AJAX control toolkit Tutorials - hur kan AJAX toolkit användas? Några exempel på innehåll AJAX control toolkit

7 Några exempel: Uppdatering av Listrutor: Exemplet är skrivet med javascript utan inbyggda AJAX-komponenter som jämförelse med kommande exempel där ASP.NET nyttjas. svar Val av datum: CalendarExtender i AJAX toolkit Ger oss möjlighet att enkelt välja datum då ett träningspass läggs till i systemets databas vilket kan minska risken för fel och ge användaren en mer rik upplevelse, se addpost.aspx Kalenderexemplet visar även hur man kan visa poster för det datum användaren klickar på, se default.aspx anrop getmodels.aspx Exempel 1: ajax-kod/code - ajaxdropdowns.aspx och getmodels.aspx Exempel 2: calendar - addpost.aspx och default.aspx

8 UpdatePanel En container som kan hålla flera andra kontroller som ska uppdateras då postback sker. Kan på så vis styra vad som ska uppdateras (en sida kan ha flera UpdatePanels) Jämför gärna skillnaden mot det tidigare visade exemplet med javascript vad drar ni för slutsatser av det? Välj Landskap Orter ändrar sig själv efter landskap har valts. Bara orter för det valda landskapet finns tillgängliga. Informationen som presenteras är i detta exempel hämtat ifrån två tabeller i en databas på ideweb.hh.se Exempel 3: CascadingDropDownsAjax.aspx Exempel 4: UpdatePanelSimple.aspx Vad kan vi använda UpdatePanels till i vårt projekt?

9 UpdatePanel 2 En container som kan hålla flera andra kontroller som ska uppdateras då postback sker. Kan på så vis styra vad som ska uppdateras (en sida kan ha flera UpdatePanels) Triggers för UpdatePanel Vi söker i fritext efter filmer, men snabbar upp med ajax (Updatepanels) Exemplet består av två UpdatePanels där vi procedurellt (i koden) uppdaterar den andra Hur kan vi använda UpdatePanels på detta sätt? Vi såg ett exemplet att logik placerades i en klassfil - sökfunktionen låg ju i klassen Movie i katalogen App_Code Varför skulle det finnas värde i att skapa klasser på detta vis? Exempel 5: UpdateUpdatePanel.aspx Exempel 6: TriggerUpdatePanel.aspx Finns det andra ställen som vi placerar logik i våra system?

10 UpdateProgress Visuell indikation när en asynkron postback sker, användaren ser att en updatering pågår Då användaren klickar på knappen visar UpdateProgress att en uppdatering Pågår När kan denna kontroll vara användbar? Exempel 7: ShowUpdateProgress.aspx

11 Timer En eller flera UpdatePanel controls kan uppdateras automatiskt då viss tid förflutit. Här triggas en UpdatePanel med hjälp av en timer. En slupmässig text uppdateras med jämna mellanrum. Är detta användbart? Exempel 7: TimerPage.aspx Exempel 8: TimerQuote.aspx

12 Latjolajbanlådan och fortsättningen Det var huvudsakliga ajaxkontrollerna exemplifierade det Vi fortsätter att ta fram fina delprototyper som ni kan ha användning av i ert projekt Var beredda på att nya problem/möjligheter alltid kan uppstå då delar ska anpassas och sättas samman i sin rätta kontext Tänk på att testa så att helheten fungerar bra. Testa även i tid att implementering på servern ideweb.hh.se fungerar. Det kan uppstå problem när ni driftsätter ert system, tex att kopplingssträngar behöver fixas, databas behöver skapas på servern, t ex för login mm. Är kraven specificerade så att ni enkelt kan mäta att ni nått upp till kraven i slutligt system?