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

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 gincsai@aut.bme.hu MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék Telepítéstől az első AJAX-os oldalig

2 2 Miről lesz szó…  Első lépések  Honnan és hogyan telepíthetjük?  Mit kapunk az ASP.NET AJAX-szal?  Miben tér el a működése az ASP.NET 2.0-tól?  Értsük meg a demo működését  Hogyan kerül a kódba JavaScript?  Mire jó az UpdatePanel?  Hogyan fut le egy részleges oldalfrissítés?

3 3 Telepítés Microsoft AJAX Extension 1.0  ScriptManager  UpdatePanel  UpdateProgress  Timer Microsoft AJAX Control Toolkit  30+ új vezérlőelem http://ajax.asp.net

4 4 Telepítés II. Sample Applications  Példák  1,6 MB ASP.NET AJAX Futures January CTP  Fejlesztés alatt álló vezérlőelemek  1,7 MB

5 5 Új project sablonok  ASP.NET AJAX-Enabled Web Site  AJAX-os vezérlőket elérjük  Előre elkészített web.config  AJAX Control Toolkit Web Site  Referencia az AjaxControlToolkit.dll-re

6 6 Toolboxra kikerülő vezérlők  Új AJAX Extension tab  Timer  ScriptManager  ScriptManagerProxy  UpdateProgress  UpdatePanel  Control Toolkit vezérlői nem kerülnek telepítéskor a Toolboxra  Kézzel kitehetjük

7 7 Konfiguráció  Új alkalmazásnál a sablon konfigurál  Csak használni kell az AJAX-os vezérlőket  Meglévő alkalmazásnál  A kész web.config-ot átmásoljuk  Saját Web.config-ot kiegészítjük  Ehhez ismerni kell a fontosabb szekciókat C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extension\v1.0.xxx

8 8 Web.config kiegészítése

9 9 <section name="scriptResourceHandler" type="…„ requirePermission="false"/> <section name="jsonSerialization" type="…„ requirePermission="false" /> <section name="profileService" type="…„ requirePermission="false" /> <section name="authenticationService" type="…„ requirePermission="false" /> <add tagPrefix="asp" namespace="System.Web.UI„ assembly="System.Web.Extensions, …"/> <add verb="*" path="*.asmx" validate="false„ type="System.Web.Script.Services.ScriptHandlerFactory, …"/> <add verb="GET,HEAD" path="ScriptResource.axd„ type="System.Web.Handlers.ScriptResourceHandler, …" validate="false"/> --> <!-- <profileService enabled="true" readAccessProperties="propertyname1,propertyname2" writeAccessProperties="propertyname1,propertyname2" />--> --> <add name="ScriptModule" preCondition="integratedMode„ type="System.Web.Handlers.ScriptModule, …"/> <add name="ScriptHandlerFactory" verb="*" path="*.asmx„ preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, …"/> <add name="ScriptResource" verb="GET" path="ScriptResource.axd„ type="System.Web.Handlers.ScriptResourceHandler, …" /> Hogyan egészítjük ki?

10 10 Új project beállításai

11 11 Egyszerű demo  Részleges frissítés  UpdatePanel  Trigger

12 12 Miről lesz szó…  Első lépések  Honnan és hogyan telepíthetjük?  Mit kapunk az ASP.NET AJAX-szal?  Miben tér el a működése az ASP.NET 2.0-tól?  Értsük meg a demo működését  Hogyan kerül a kódba JavaScript?  Mire jó az UpdatePanel?  Hogyan fut le egy részleges oldalfrissítés?

13 13 Hogyan írjuk a JavaScriptet?  A folyamatos postback-ek elkerülésére JavaScriptet használunk  Nehéz megírni  Erősen böngészőfüggő  Hibakeresés időigényes  Megoldás: Nem nekünk kell írni  Készen kapjuk az AJAX vezérlők által használt JavaScriptet  ScriptManager majd kezeli

14 14 ScriptManager  Minden oldalon szükséges egy példány  Menedzseli a böngészőnek leküldendő kliens oldali szkripteket  Microsoft AJAX Library  Saját szkriptek  Szükséges a szerver oldali vezérlők működéséhez

15 15 Mi is az UpdatePanel?  Egységbe foglalja az aszinkron módon frissítésre kerülő részeket  Automatikusan aszinkron callback-ké alakítja a postback-et  Automatikusan frissíti a tartalmat a callback eredménye alapján  Nem kell hozzá ismerni se a JavaScript-et se az XMLHttpRequestet

16 16 Részleges oldalfrissítés  Teljes oldal frissítése helyett csak a kijelölt régiók frissülnek  Alapértelmezés szerint engedélyezve van.  Ha letiltjuk vagy a böngésző nem támogatja, akkor teljes frissítést hajt végre  Előre elkészített böngésző független kliens oldali szkriptek  Minden szerver oldali esemény lefut, de csak az UpdatePanel tartalma kerül vissza a kliensnek

17 17 Részleges renderelés Click Form Submit PageRequestManager Init Load State Process Postback Load Postback Events Save State PreRender Render Unload Partial Rendering Response Form Data + Custom Header

18 18 PageRequestManager  Böngészőben frissítés  Kliens oldali életciklus  Több aszinkron művelet prioritása  Státusz üzenet a futó kérés esetén  Egyedi hibaüzenet  Request / Response objektumok elérése

19 19 Kliens oldali események  Kliens oldalon kiváltott események  initializeRequest  beginRequest  pageLoading  pageLoaded  endRequest Sys.Application.add_load(ApplicationLoadHandler); function ApplicationLoadHandler(sender, args) { Sys.WebForms.PageRequestManager. getInstance().add_initializeRequest(CheckStatus); } Sys.Application.add_load(ApplicationLoadHandler); function ApplicationLoadHandler(sender, args) { Sys.WebForms.PageRequestManager. getInstance().add_initializeRequest(CheckStatus); }

20 20 Frissítés megszakítása // PageRequestManager példány elkérése var prm = Sys.WebForms.PageRequestManager.getInstance(); // Ha aszinkron kérés van folyamatban, // és a Cancel gombra kattintottunk, akkor abort if (prm.get_isInAsyncPostBack() && args.get_postBackElement().id == 'CancelRefresh') { prm.abortPostBack(); } // PageRequestManager példány elkérése var prm = Sys.WebForms.PageRequestManager.getInstance(); // Ha aszinkron kérés van folyamatban, // és a Cancel gombra kattintottunk, akkor abort if (prm.get_isInAsyncPostBack() && args.get_postBackElement().id == 'CancelRefresh') { prm.abortPostBack(); }

21 21 Összefoglalás  Új alkalmazás létrehozásánál azonnal használható  Megoldja az állandó postback-elést  Nem kell hozzá ismerni a JavaScript-et  Egyszerű  Testreszabható

22 22 További információk  Fejlesztői Portál:  http://www.devportal.hu http://www.devportal.hu  Webfejlesztés témaközpont:  http://www.devportal.hu/Portal/Webdevelopment.aspx http://www.devportal.hu/Portal/Webdevelopment.aspx  ASP.NET 2.0 Induló Készlet:  http://www.devportal.hu/InduloKeszlet http://www.devportal.hu/InduloKeszlet  MSDN.NET Developer Center  http://msdn.microsoft.com/netframework/ http://msdn.microsoft.com/netframework/  MSDN ASP.NET Developer Center  http://msdn.microsoft.com/aspnet http://msdn.microsoft.com/aspnet http://msdn.microsoft.com/aspnet  Hivatalos ASP.NET honlap  http://www.asp.net http://www.asp.net  Hivatalos ASP.NET AJAX honlap  http://ajax.asp.net http://ajax.asp.net

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

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