Meglévő ASP.NET 2.0 alkalmazás kiegészítése AJAX-szal

Az előadások a következő témára: "Meglévő ASP.NET 2.0 alkalmazás kiegészítése AJAX-szal"— Előadás másolata:

1 Meglévő ASP.NET 2.0 alkalmazás kiegészítése AJAX-szal
MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek Lurdy Ház Meglévő ASP.NET 2.0 alkalmazás kiegészítése AJAX-szal Gincsai Gábor MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék

2 Ismerkedés a kóddal Mintaalkalmazás megismerése
MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek Lurdy Ház Ismerkedés a kóddal Mintaalkalmazás megismerése Kód felkészítése az AJAX-ra 2

3 Miről lesz szó… Szerver oldali vezérlők
Webszolgáltatás hívása kliens oldalról Hibakeresés, optimalizáció Amiről holnap lesz szó…

4 ScriptManager séma <asp:ScriptManager ID=”…” Runat=”server”
EnablePartialRendering = ”true | false” AsyncPostBackTimeout = ”seconds” AsyncPostBackErrorMessage = ”message” AllowCustomErrors = ”true | false” OnAsyncPostBackError = ”handler” ScriptMode=”Auto | Inherit | Debug | Release” ScriptPath = ”path”> <Scripts> <!– Szkript referenciák megadása --> </Scripts> <Services> <!– Webszolgáltatás referenciák megadása --> </Services> </asp:ScriptManager>

5 Szkript referencia <asp:ScriptManager ID=”…” Runat=”server”
<Scripts> <asp:ScriptReference Name=”PreviewScript.js” Assembly=”Microsoft.Web.Preview” /> Name=”PreviewDragDrop.js” <asp:ScriptReference Path=”~/Scripts/UIMap.js” /> </Scripts> </asp:ScriptManager>

6 Webszolgáltatás referencia
<asp:ScriptManager ID=”…” Runat=”server” <Services> <asp:ScriptReference Path=”ZipCodeService.asmx” /> </Services> </asp:ScriptManager> // Webszolgáltatás meghívása JavaScript-ből ZipCodeService.GetCity( ”1117”, onCompleted ); // Függvény amit meghív a WS hívás befejezésekor function onCompleted( result ) { // ”result” az adathalmaz, amit a WS visszaad. } Később a WS-es résznél lesz fontos Érdemes megmutatni az asmx/js odalat, hogy ezt generálja

7 UpdatePanel séma <asp:ScriptManager ID=”…” runat=”server” EnablePartialRendering=”true” /> … <asp:UpdatePanel ID = ”…” Runat = ”server” UpdateMode = ”Always | Conditional” ChildrenAsTriggers = ”true | false” > <Triggers> <!-- Itt lehet Triggereket definiálni --> </Triggers> <ContentTemplate> <!-- Tartalmat itt kell definiálni --> </ContentTemplate> </asp:UpdatePanel>

8 Triggerek AsyncPostBackTrigger PostBackTrigger
Postback  aszinkron callback UpdatePanelen kívüli eseményre frissíteni a panel tartalmát PostBackTrigger UpdatePanelen belül postback legyen

9 Triggeres példa <asp:UpdatePanel ID=”…” Runat=”server” UpdateMode=”Conditional” > <Triggers> <asp:AsyncPostBackTrigger ControlID=”Button1” /> <asp:AsyncPostBackTrigger ControlID=”Treeview1” EventName=”TreeNodeExpanded” /> EventName=”TreeNodeCollapsed” /> <asp:AsyncPostBackTrigger ControlID=”Button2” /> </Triggers> <ContentTemplate> … </ContentTemplate> </asp:UpdatePanel>

10 Periódikus frissítés UpdatePanel + Timer
Bizonyos időnként frissíti a panel tartalmát A timer Tick eseményére kell egy triggert készíteni. <asp:Timer ID=”Timer1” runat=”server” Interval=”5000” OnTick=”Timer1_Tick” /> … <asp:UpdatePanel UpdateMode=”Conditional” …> <Triggers> <asp:AsyncPostBackTrigger ControlId=”Timer1” EventName=”Tick”/> </Triggrs> </asp:UpdatePanel>

11 UpdatePanel.Update() A panel tartalmát kódból frissítjük Tipikus példa
Csak ha az UpdateMode=”Conditional” Tipikus példa Több UpdatePanel láncszerű frissítése protected void OnClick ( object sender, EventArgs e ) { // Click esemény elsütése az UpdatePanelben // Másik UpdatePanel frissítése OtherUpdatePanel.Update() }

12 Mivel nem működik együtt?
Az UpdatePanelen belül nem lehet TreeView és Menu FileUploadControl Ha aszinkron módon szeretnénk feltölteni a fájlt GridView, DetailsView Ha az EnableSortingAndPagingCallback true-ra van állítva. Login vezérlők – Ha nem template-esített

13 UpdateProgress Az UpdatePanel kiegészítő eleme
Jelzi a felhasználónak, hogy aszinkron frissítés folyik a háttérben Automatikusan megjelenik, amikor a frissítés elkezdődik Vagy adott idővel később (DisplayAfter)

14 UpdateProgress séma <asp:UpdateProgress ID = ”…” Runat = ”server”
DisplayAfter = ”milliseconds” DinamicLayout = ”true | false” AssociatedUpdatePanelID = ”UpdatePanelID” > <ProgressTemplate> <!-- Itt kell megadni az UI-t --> </ProgressTemplate> </asp:UpdateProgress> <asp:UpdateProgress ID = ”…” Runat = ”server” DisplayAfter = ”500” <ProgressTemplate> <asp:Image ID=”…” runat=”server” Url=”~/Images/SpinningClock.gif” /> </ProgressTemplate> </asp:UpdateProgress>

15 Szerver oldali vezérlők
MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek Lurdy Ház Szerver oldali vezérlők ScriptManager UpdatePanel UpdateProgress 15

16 History és Back gomb AJAX oldal = URL + DOM változás
Nikhil Kothari készített egy vezérlőt Cél: Állapotok megkülönböztetése History-hoz hozzáadni Odanavigálni, ha kiválasztják

17 Hogyan használjuk Adjunk egy History vezérlőt az oldalhoz
Adjuk az elemeket a Historyhoz <nk:HistoryControl runat="server" ID="history" OnNavigate="OnHistoryNavigate" /> private void OnContentListSelectedIndexChanged(object sender, EventArgs e) { history.AddEntry(contentList.SelectedIndex.ToString()); }

18 Hogyan használjuk II. Kezeljük a navigációt { int selectedIndex = 0;
private void OnHistoryNavigate(object sender, HistoryEventArgs e) { int selectedIndex = 0; if (String.IsNullOrEmpty(e.Identifier) == false) selectedIndex = Int32.Parse(e.Identifier); } contentList.SelectedIndex = selectedIndex; // Frissítsük a tartalmat, amit meg kell jeleníteni // Frissítsük az UpdatePanelt mainUpdatePanel.Update();

19 Miről lesz szó… Szerver oldali vezérlők
Webszolgáltatás hívása kliens oldalról Hibakeresés, optimalizáció Amiről holnap lesz szó…

20 Web szolgáltatás Együttműködik a SOAP és JSON formátummal is.
Állapotmentes kéréseknél ideális Minimális request/response méret A kliens centrikus modellnél hasznos Az UpdatePanel egy alternatívája

21 UpdatePanel vs. Web Services
UpdatePanel – ha szükség van az oldal állapotára a szerver oldali logikában  Egyszerűen használható  Vezérlők, oldal állapotát elérjük  Teljes postback  Egyszerre csak egy kérés Web Services – Ha a szerver oldali logika állapotmentes.  Kis erőforrás igényű  Több kérés párhuzamosan  Kódot kell írni a paraméterek eléréséhez

22 XML vs JSON Mindkettő ideális strukturált adatok ábrázolásra.
XML parszolása lassú és nehézkes a mezőket elérni. JSON célja ennek a gyorsítása.

23 XML <?xml version='1.0' encoding='UTF-8'?> <card>
<fullname>Gincsai Gábor</fullname> <org>MSDN Kompetencia Központ</org> < addrs> <address <address type='home' </ addrs> <telephones> <tel type='work' pref='1'> </tel> <tel type='fax'> </tel> <tel type='mobile'> </tel> </telephones> <addresses> <address type='work' format='us'>1117 Budapest, Magyar Tudósok krt 2.</address> <address type='home' format='us'>1139 Budapest, Kiss u. 2</address> </addresses> <urls> <address type='work'> <address type='home'> </urls> </card>

24 XML használata JS-ből function myHandler() {
if (req.readyState == 4 /*complete*/) // Cím mező frissítése a formon az első megadott lakcímmel var addrField = document.getElementById('addr'); var root = req.responseXML; var addrsElem = root.getElementsByTagName('addresses')[0]; var firstAddr = addrsElem.getElementsByTagName('address')[0]; var addrText = firstAddr.firstChild; var addrValue = addrText.nodeValue; addrField.value = addrValue; }

25 JSON { ”fullname”: ”Gincsai Gábor”, ”org”: ”MSDN Kompetencia Központ”,
” addrs”: [ {”type”: ”work”, ”value”: {”type” : ”home”, ”pref”: 1, ”value” : ], "telephones": [ {”type” : ”work”, ”pref” : 1, ” value ” : ” ”}, {”type” ”fax”, ”value” : ” "}, {”type” : ”mobile”, ”value” : ” ”} ”addresses”: [ {”type” : "work", ”format”: ”us”, ”value”: ”1117 Budapest, Magyar Tudósok krt. 2”}, {”type” : ”home”, ”value” : ”us”, ”value”: ”1139 Budapest, Kiss u. 2"} ”urls”: [ {”type” : ”work”, ”value” : ” {”type” : ”home”, ”value” : ” ] }

26 JSON használata JS-ből
function myHandler() { if (req.readyState == 4 /*complete*/) var addrField = document.getElementById('addr'); var card = eval('(' + req.responseText + ')'); addrField.value = card.addresses[0].value; }

27 Miért jobb a JSON A JSON parszolás 10-szer gyorsabb
Egyszerűbb navigáció Átláthatóbb kód Nem volt benne a gyökérelem Úgyis tudjuk, hogy milyen adatot kapunk { "card": { "fullname": ... }

28 BLL hívása kliensről Logika kivezetése Webszolgáltatásba Lehetőségek
Meglévő ASMX hívása Kivezetni egy meglévő függvényt WCF támogatás majd az Orcas-ban Web Method létrehozása Hozzunk létre egy statikus függvényt az oldalon Adjuk hozzá a [WebMethod] attribútumot Web Method hívása JavaScriptből az automatikusan generált proxy osztályon keresztül

29 MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek
Lurdy Ház Web szolgáltatás 29

30 Miről lesz szó… Szerver oldali vezérlők
Webszolgáltatás hívása kliens oldalról Hibakeresés, optimalizáció Amiről holnap lesz szó…

31 Optimalizálás általában I.
Szkript fájlok elérése Webes erőforrás Fájl rendszer (Cacheli a windows) Másoljuk a szkript fájlokat az alkalmazás mellé ScriptManager-ben referenciát adjunk meg Kapcsoljuk ki a debuggolást Optimalizált szkriptek Kommentek nélkül Tömörítve A böngésző cachelni fogja a szkripteket Web.config <compliation debug=„false”>

32 Optimalizálás általában II.
UpdatePanelben Conditional mód Mikor renderelődik Update() hívása kódból Triggerek segítségével Ha a gyerek elemek frissítést kérnek Kapcsoljuk ki a részleges oldalfrissítést ha nem kell. Csak az UpdatePanel működéséhez kell <asp:UpdatePanel UpdateMode="Conditional“ … > <asp:UpdatePanel ChildAsTriggers=„true”… > <asp:ScriptManager EnablePartialRendering=„false”…>

33 Optimalizáció Mit és mikor kell frissíteni
Conditional mód Triggerek Update() Az postback továbbra is teljes Hol kell mindenképpen postback AutoPostback-kel óvatosan Más interakcióval nem lehet elkerülni a postbacket?

34 VS 2005 JS Debugger A Visual Studio 2005 támogatja a hibakeresést a JavaScript-ben IE-ben JS debuggolás engedélyezése debugger = breakpoint Indítsuk el a konkrét .aspx/.html oldalt Kapcsoljuk hozzá a IExplore.exe processzt a futó szkripthez 34

35 JavaScript debuggolása Visual Studio 2005-tel
35

36 ASP.NET Development Helper
IE kiterjesztés Megnézhetjük vele a ViewState-et Gyorsítótárban lévő elemeket HTTP loggolás Megnézhetjük vele a DOM fát Szkript hiba információk 36

37 ASP.NET Development Helper
37

38 IE Developer Toolbar IE plug-in DOM Explorer with highlighting Sütik
Validáció És még sokminden familyid=e59c d-4511-bb3e-2d5e1db91038&displaylang=en 38

39 Miről lesz szó… Szerver oldali vezérlők
Webszolgáltatás hívása kliens oldalról Hibakeresés, optimalizáció Amiről holnap lesz szó…

40 Mit hozhatunk ki ebből az alkalmazásból AJAX-szal?
MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek Lurdy Ház Mit hozhatunk ki ebből az alkalmazásból AJAX-szal? 40

41 Összefoglalás Töltsük le Használjuk
Microsoft AJAX Extension 1.0 Microsoft AJAX Control Toolkit Használjuk Turbózzuk fel meglévő alkalmazásaink Osszuk meg tapasztalatainkat egymással

42 További információk Fejlesztői Portál: http://www.devportal.hu
MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek Lurdy Ház További információk Fejlesztői Portál: Webfejlesztés témaközpont: ASP.NET 2.0 Induló Készlet: MSDN .NET Developer Center MSDN ASP.NET Developer Center Hivatalos ASP.NET honlap Hivatalos ASP.NET AJAX honlap 42

43 Kérdések és válaszok Értékelőlapok!
MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek Lurdy Ház Kérdések és válaszok Értékelőlapok! 43

44 MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek
Lurdy Ház © 2007 Microsoft Corporation. Minden jog fenntartva. Az előadás csupán tájékoztató jellegű, a Microsoft Magyarország a benne szereplő esetleges hibákért vagy tévedésekért semmilyen felelősséget nem vállal. 44