telepÃtÃ©stÅ l az elsÅ ajax-os oldalig

Gincsai GáborGincsai Gá[email protected]@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>



</webServices>

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

telepÃtÃ©stÅ l az elsÅ ajax-os oldalig

Documents