View
351
Download
0
Category
Preview:
Citation preview
Gincsai GáborGincsai Gáborgincsai@aut.bme.hugincsai@aut.bme.hu
MSDN Kompetencia KözpontMSDN Kompetencia KözpontBudapesti Műszaki és Gazdaságtudományi EgyetemBudapesti Műszaki és Gazdaságtudományi EgyetemAutomatizálási és Alkalmazott Informatikai TanszékAutomatizálási és Alkalmazott Informatikai Tanszék
Telepítéstől az Telepítéstől az első AJAX-os oldaligelső AJAX-os oldalig
22
Miről lesz szó…Miről lesz szó…
Első lépésekElső lépések Honnan és hogyan telepíthetjük?Honnan és hogyan telepíthetjük? Mit kapunk az ASP.NET AJAX-szal?Mit kapunk az ASP.NET AJAX-szal? Miben tér el a működése az ASP.NET 2.0-tól?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Értsük meg a demo működését Hogyan kerül a kódba JavaScript? Hogyan kerül a kódba JavaScript? Mire jó az UpdatePanel?Mire jó az UpdatePanel? Hogyan fut le egy részleges oldalfrissítés?Hogyan fut le egy részleges oldalfrissítés?
33
TelepítésTelepítésMicrosoft AJAX Extension 1.0Microsoft AJAX Extension 1.0
ScriptManagerScriptManager UpdatePanelUpdatePanel UpdateProgressUpdateProgress TimerTimer
Microsoft AJAX Control ToolkitMicrosoft AJAX Control Toolkit 30+ új vezérlőelem30+ új vezérlőelem
http://ajax.asp.net
44
Telepítés II.Telepítés II.Sample ApplicationsSample Applications
PéldákPéldák 1,6 MB1,6 MB
ASP.NET AJAX ASP.NET AJAX Futures January CTPFutures January CTP Fejlesztés alatt állóFejlesztés alatt álló
vezérlőelemek vezérlőelemek 1,7 MB1,7 MB
55
Új project sablonokÚj project sablonok
ASP.NET AJAX-Enabled Web SiteASP.NET AJAX-Enabled Web Site AJAX-os vezérlőket elérjükAJAX-os vezérlőket elérjük Előre elkészített web.configElőre elkészített web.config
AJAX Control Toolkit Web SiteAJAX Control Toolkit Web Site Referencia az AjaxControlToolkit.dll-reReferencia az AjaxControlToolkit.dll-re
66
Toolboxra kikerülő vezérlőkToolboxra kikerülő vezérlők
Új AJAX Extension tabÚj AJAX Extension tab TimerTimer ScriptManagerScriptManager ScriptManagerProxyScriptManagerProxy UpdateProgressUpdateProgress UpdatePanelUpdatePanel
Control Toolkit vezérlői nem kerülnek Control Toolkit vezérlői nem kerülnek telepítéskor a Toolboxratelepítéskor a Toolboxra Kézzel kitehetjükKézzel kitehetjük
77
KonfigurációKonfiguráció
Új alkalmazásnál a sablon konfigurálÚj alkalmazásnál a sablon konfigurál Csak használni kell az AJAX-os vezérlőketCsak használni kell az AJAX-os vezérlőket
Meglévő alkalmazásnálMeglévő alkalmazásnál A kész web.config-ot átmásoljukA kész web.config-ot átmásoljuk
Saját Web.config-ot kiegészítjükSaját Web.config-ot kiegészítjük Ehhez ismerni kell a fontosabb szekciókatEhhez ismerni kell a fontosabb szekciókat
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extension\v1.0.xxxC:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extension\v1.0.xxx
88
Web.config kiegészítéseWeb.config kiegészítése
<httpModules><httpModules>
<httpHandlers><httpHandlers>
<controls><controls>
<configSections><configSections>
<system.webServer><system.webServer>
<assemblies><assemblies>
<system.web.extensions><system.web.extensions>
99
<configSections><sectionGroup name="system.web.extensions" type="…">
<sectionGroup name="scripting" type="…"><section name="scriptResourceHandler" type="…„
requirePermission="false"/><sectionGroup name="webServices" type="…">
<section name="jsonSerialization" type="…„requirePermission="false" />
<section name="profileService" type="…„requirePermission="false" />
<section name="authenticationService" type="…„requirePermission="false" />
</sectionGroup></sectionGroup>
</sectionGroup></configSections>
<configSections>
<system.web><pages>
<controls><add tagPrefix="asp" namespace="System.Web.UI„
assembly="System.Web.Extensions, …"/></controls>
</pages> </system.web>
<controls>
<compilation debug="false"><assemblies>
<add assembly="System.Web.Extensions, …"/></assemblies>
</compilation>
<assemblies>
<httpHandlers><remove verb="*" path="*.asmx"/><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"/></httpHandlers>
<httpHandlers>
<httpModules><add name="ScriptModule" type="System.Web.Handlers.ScriptModule, …"/>
</httpModules>
<httpModules>
<system.web.extensions><scripting>
<webServices><!-- <jsonSerialization maxJsonLength="500">
<converters><add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
</converters></jsonSerialization>-->
<!-- <authenticationService enabled="true" requireSSL = "true|false"/>--><!-- <profileService enabled="true"
readAccessProperties="propertyname1,propertyname2" writeAccessProperties="propertyname1,propertyname2" />-->
</webServices><!-- <scriptResourceHandler enableCompression="true" enableCaching="true" />-->
</scripting></system.web.extensions>
<system.web.extensions>
<system.webServer><validation validateIntegratedModeConfiguration="false"/><modules>
<add name="ScriptModule" preCondition="integratedMode„type="System.Web.Handlers.ScriptModule, …"/>
</modules><handlers>
<remove name="WebServiceHandlerFactory-ISAPI-2.0"/><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, …" />
</handlers></system.webServer>
<system.webServer>
Hogyan egészítjük ki?Hogyan egészítjük ki?
1010
Új project beállításaiÚj project beállításai
1111
Egyszerű demoEgyszerű demo Részleges frissítésRészleges frissítés UpdatePanelUpdatePanel TriggerTrigger
1212
Miről lesz szó…Miről lesz szó…
Első lépésekElső lépések Honnan és hogyan telepíthetjük?Honnan és hogyan telepíthetjük? Mit kapunk az ASP.NET AJAX-szal?Mit kapunk az ASP.NET AJAX-szal? Miben tér el a működése az ASP.NET 2.0-tól?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Értsük meg a demo működését Hogyan kerül a kódba JavaScript? Hogyan kerül a kódba JavaScript? Mire jó az UpdatePanel?Mire jó az UpdatePanel? Hogyan fut le egy részleges oldalfrissítés?Hogyan fut le egy részleges oldalfrissítés?
1313
Hogyan írjuk a JavaScriptet?Hogyan írjuk a JavaScriptet?
A folyamatos postback-ek elkerülésére A folyamatos postback-ek elkerülésére JavaScriptet használunkJavaScriptet használunk Nehéz megírniNehéz megírni Erősen böngészőfüggőErősen böngészőfüggő Hibakeresés időigényesHibakeresés időigényes
Megoldás: Nem nekünk kell írniMegoldás: Nem nekünk kell írni Készen kapjuk az AJAX vezérlők által Készen kapjuk az AJAX vezérlők által
használt JavaScriptethasznált JavaScriptet ScriptManager majd kezeliScriptManager majd kezeli
1414
ScriptManagerScriptManager
Minden oldalon szükséges egy példányMinden oldalon szükséges egy példány
Menedzseli a böngészőnek leküldendő Menedzseli a böngészőnek leküldendő kliens oldali szkripteketkliens oldali szkripteket Microsoft AJAX LibraryMicrosoft AJAX Library Saját szkriptekSaját szkriptek
Szükséges a szerver oldali vezérlők Szükséges a szerver oldali vezérlők működéséhezműködéséhez
1515
Mi is az UpdatePanel?Mi is az UpdatePanel?
Egységbe foglalja az aszinkron módon Egységbe foglalja az aszinkron módon frissítésre kerülő részeketfrissítésre kerülő részeket Automatikusan aszinkron callback-ké Automatikusan aszinkron callback-ké
alakítja a postback-etalakítja a postback-et Automatikusan frissíti a tartalmat a Automatikusan frissíti a tartalmat a
callback eredménye alapjáncallback eredménye alapján Nem kell hozzá ismerni se a JavaScript-et Nem kell hozzá ismerni se a JavaScript-et
se az XMLHttpRequestetse az XMLHttpRequestet
1616
Részleges oldalfrissítésRészleges oldalfrissítés
Teljes oldal frissítése helyett csak a Teljes oldal frissítése helyett csak a kijelölt régiók frissülnekkijelölt régiók frissülnek Alapértelmezés szerint engedélyezve van.Alapértelmezés szerint engedélyezve van. Ha letiltjuk vagy a böngésző nem Ha letiltjuk vagy a böngésző nem
támogatja, akkor teljes frissítést hajt végretámogatja, akkor teljes frissítést hajt végre
Előre elkészített böngésző független Előre elkészített böngésző független kliens oldali szkriptekkliens oldali szkriptek
Minden szerver oldali esemény lefut, de Minden szerver oldali esemény lefut, de csak az UpdatePanel tartalma kerül csak az UpdatePanel tartalma kerül vissza a kliensnekvissza a kliensnek
1717
Részleges renderelésRészleges renderelés
ClickClick
Form SubmitForm Submit
PageRequestManagerPageRequestManager
InitInit
Load StateLoad State
Process PostbackProcess Postback
LoadLoad
Postback EventsPostback Events
Save StateSave State
PreRenderPreRender
RenderRender
UnloadUnloadPartial RenderingResponse
Form Data + Custom Header
1818
PageRequestManagerPageRequestManager
Böngészőben frissítésBöngészőben frissítés
Kliens oldali életciklusKliens oldali életciklus
Több aszinkron művelet prioritásaTöbb aszinkron művelet prioritása
Státusz üzenet a futó kérés eseténStátusz üzenet a futó kérés esetén
Egyedi hibaüzenetEgyedi hibaüzenet
Request / Response objektumok eléréseRequest / Response objektumok elérése
1919
Kliens oldali eseményekKliens oldali események
Kliens oldalon kiváltott eseményekKliens oldalon kiváltott események initializeRequestinitializeRequest beginRequestbeginRequest pageLoadingpageLoading pageLoadedpageLoaded endRequestendRequest
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);}
2020
Frissítés megszakításaFrissí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();
}
}
2121
ÖsszefoglalásÖsszefoglalás
Új alkalmazás létrehozásánál azonnal Új alkalmazás létrehozásánál azonnal használhatóhasználható
Megoldja az állandó postback-eléstMegoldja az állandó postback-elést
Nem kell hozzá ismerni a JavaScript-etNem kell hozzá ismerni a JavaScript-et
EgyszerűEgyszerű
TestreszabhatóTestreszabható
2222
További információkTovábbi információk Fejlesztői Portál: Fejlesztői Portál:
http://www.devportal.huhttp://www.devportal.hu WebfejlesztésWebfejlesztés témaközpont: témaközpont:
http://www.devportal.hu/Portal/Webdevelopment.aspxhttp://www.devportal.hu/Portal/Webdevelopment.aspx
ASP.NET 2.0 Induló Készlet:ASP.NET 2.0 Induló Készlet: http://www.devportal.hu/InduloKeszlethttp://www.devportal.hu/InduloKeszlet
MSDN .NET Developer CenterMSDN .NET Developer Center http://msdn.microsoft.com/netframework/http://msdn.microsoft.com/netframework/
MSDN MSDN ASP.NETASP.NET Developer Center Developer Center http://msdn.microsoft.comhttp://msdn.microsoft.com/aspnet/aspnet
Hivatalos ASP.NET honlapHivatalos ASP.NET honlap http://www.asp.nethttp://www.asp.net
Hivatalos ASP.NET AJAX honlapHivatalos ASP.NET AJAX honlap http://ajax.asp.nethttp://ajax.asp.net
2323
Kérdések és válaszokKérdések és válaszok
Értékelőlapok!Értékelőlapok!
2424
© 200© 20077 Microsoft Corporation. Microsoft Corporation. Minden jog fenntartva.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.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.
Recommended