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

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

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ó…

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>

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>

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

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>

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

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>

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>

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() }

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

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)

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>

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

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 http://www.nikhilk.net/Content/Samples/HistoryDemo.zip

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()); }

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();

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ó…

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

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

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.

XML <?xml version='1.0' encoding='UTF-8'?> <card> <fullname>Gincsai Gábor</fullname> <org>MSDN Kompetencia Központ</org> <emailaddrs> <address type='work'>gincsai@aut.bme.hu</address> <address type='home' pref='1'>gincsai@freemail.hu</address> </emailaddrs> <telephones> <tel type='work' pref='1'>+36 1 214 55 12</tel> <tel type='fax'>+36 1 214 55 13</tel> <tel type='mobile'>+36 70 214 55 14</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'>http://aut.bme.hu/</address> <address type='home'>http://mysite.hu/</address> </urls> </card>

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; }

JSON { ”fullname”: ”Gincsai Gábor”, ”org”: ”MSDN Kompetencia Központ”, ”emailaddrs”: [ {”type”: ”work”, ”value”: ”gincsai@aut.bme.hu”}, {”type” : ”home”, ”pref”: 1, ”value” : ”gincsai@freemail.hu"} ], "telephones": [ {”type” : ”work”, ”pref” : 1, ” value ” : ”+36 1 214 55 12”}, {”type” ”fax”, ”value” : ”+36 1 214 55 13"}, {”type” : ”mobile”, ”value” : ”+36 1 214 55 14”} ”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” : ”http://aut.bme.hu/”}, {”type” : ”home”, ”value” : ”http://mysite.hu/”} ] }

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; }

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": ... }

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

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

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ó…

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”>

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”…>

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?

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

JavaScript debuggolása Visual Studio 2005-tel 35

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 http://nikhilk.net/Project.WebDevHelper.aspx 36

ASP.NET Development Helper 37

IE Developer Toolbar IE plug-in DOM Explorer with highlighting Sütik Validáció És még sokminden http://www.microsoft.com/downloads/details.aspx? familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en 38

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ó…

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

Ö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 http://www.devportal.hu/Portal/Forum.aspx

További információk Fejlesztői Portál: http://www.devportal.hu MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház További információk Fejlesztői Portál: http://www.devportal.hu Webfejlesztés témaközpont: http://www.devportal.hu/Portal/Webdevelopment.aspx ASP.NET 2.0 Induló Készlet: http://www.devportal.hu/InduloKeszlet MSDN .NET Developer Center http://msdn.microsoft.com/netframework/ MSDN ASP.NET Developer Center http://msdn.microsoft.com/aspnet Hivatalos ASP.NET honlap http://www.asp.net Hivatalos ASP.NET AJAX honlap http://ajax.asp.net 42

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

MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. 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