Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Gincsai Gábor MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék.

Hasonló előadás


Az előadások a következő témára: "Gincsai Gábor MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék."— Előadás másolata:

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

2 2 Ismerkedés a kóddal  Mintaalkalmazás megismerése  Kód felkészítése az AJAX-ra

3 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 4 ScriptManager séma

5 5 Szkript referencia

6 6 Webszolgáltatás referencia

7 7 UpdatePanel séma …

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

9 9 Triggeres példa

10 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.

11 11 UpdatePanel.Update()  A panel tartalmát kódból frissítjük  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() } protected void OnClick ( object sender, EventArgs e ) { // Click esemény elsütése az UpdatePanelben // Másik UpdatePanel frissítése OtherUpdatePanel.Update() }

12 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 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 14 UpdateProgress séma

15 15 Szerver oldali vezérlők  ScriptManager  UpdatePanel  UpdateProgress

16 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 17 Hogyan használjuk  Adjunk egy History vezérlőt az oldalhoz  Adjuk az elemeket a Historyhoz private void OnContentListSelectedIndexChanged(object sender, EventArgs e) { history.AddEntry(contentList.SelectedIndex.ToString()); } private void OnContentListSelectedIndexChanged(object sender, EventArgs e) { history.AddEntry(contentList.SelectedIndex.ToString()); }

18 18 Hogyan használjuk II.  Kezeljük a navigációt 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(); } 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 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 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 21 UpdatePanel vs. Web Services  UpdatePanel – ha szükség van az oldal állapotára a szerver oldali logikában Egyszerűen használható Egyszerűen használható Vezérlők, oldal állapotát elérjük 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ű Kis erőforrás igényű Több kérés párhuzamosan Több kérés párhuzamosan  Kódot kell írni a paraméterek eléréséhez

22 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 23 XML Gincsai Gábor MSDN Kompetencia Központ Budapest, Magyar Tudósok krt Budapest, Kiss u. 2 Gincsai Gábor MSDN Kompetencia Központ Budapest, Magyar Tudósok krt Budapest, Kiss u. 2

24 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; } 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 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” : ”http://aut.bme.hu/”}, {”type” : ”home”, ”value” : ”http://mysite.hu/”} ] } { ”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” : ”http://aut.bme.hu/”}, {”type” : ”home”, ”value” : ”http://mysite.hu/”} ] }

26 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; } function myHandler() { if (req.readyState == 4 /*complete*/) { var addrField = document.getElementById('addr'); var card = eval('(' + req.responseText + ')'); addrField.value = card.addresses[0].value; }

27 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":... } { "card": { "fullname":... }

28 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 29 Web szolgáltatás

30 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 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 Web.config

32 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

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

35 35 JavaScript debuggolása Visual Studio 2005-tel

36 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

37 37 ASP.NET Development Helper

38 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 familyid=e59c d-4511-bb3e- 2d5e1db91038&displaylang=en

39 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 40 Mit hozhatunk ki ebből az alkalmazásból AJAX-szal?

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

42 42 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 

43 43 Kérdések és válaszok Értékelőlapok!

44 44 © 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.


Letölteni ppt "Gincsai Gábor MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék."

Hasonló előadás


Google Hirdetések