Gincsai Gábor 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 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 Telepítés Microsoft AJAX Extension 1.0 ScriptManager UpdatePanel UpdateProgress Timer Microsoft AJAX Control Toolkit 30+ új vezérlőelem
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 Ú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 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 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 Web.config kiegészítése
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 Új project beállításai
11 Egyszerű demo Részleges frissítés UpdatePanel Trigger
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 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 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 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 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 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 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 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 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 Ö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 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
23 Kérdések és válaszok Értékelőlapok!
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.