• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
TelepÃtéstÅ l az elsÅ AJAX-os oldalig
 

TelepÃtéstÅ l az elsÅ AJAX-os oldalig

on

  • 468 views

 

Statistics

Views

Total Views
468
Views on SlideShare
468
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • MSDN Kompetenciák Egyeteme: ASP.NET AJAX 2007.02.8-9. BME
  • MSDN Kompetenciák Egyeteme: ASP.NET AJAX 2006.02.8-9. BME
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház

TelepÃtéstÅ l az elsÅ AJAX-os oldalig TelepÃtéstÅ l az elsÅ AJAX-os oldalig Presentation Transcript

  • Gincsai Gábor [email_address] 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
  • 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?
  • 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
  • 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
  • Ú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
  • 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
  • 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 FilesMicrosoft ASP.NETASP.NET 2.0 AJAX Extensionv1.0.xxx
  • Web.config kiegészítése <h ttpModule s> <h ttp Handlers> <controls> <configSections> <system.webServer> <assemblies> <system.web.extensions>
  • Hogyan egészítjük ki? < configSections > < sectionGroup name =&quot;system.web.extensions&quot; type =&quot; … &quot;> < sectionGroup name =&quot;scripting&quot; type =&quot; … &quot;> < section name =&quot;scriptResourceHandler&quot; type =&quot; … „ requirePermission =&quot;false&quot;/> < sectionGroup name =&quot;webServices&quot; type =&quot; … &quot;> < section name =&quot;jsonSerialization&quot; type =&quot; … „ requirePermission =&quot;false&quot; /> < section name =&quot;profileService&quot; type =&quot; … „ requirePermission =&quot;false&quot; /> < section name =&quot;authenticationService&quot; type =&quot; … „ requirePermission =&quot;false&quot; /> </ sectionGroup > </ sectionGroup > </ sectionGroup > </ configSections > <configSections> < system.web > < pages > < controls > < add tagPrefix =&quot;asp&quot; namespace =&quot;System.Web.UI„ assembly =&quot;System.Web.Extensions, … &quot;/> </ controls > </ pages > < / system.web > <controls> < compilation debug =&quot;false&quot;> < assemblies > < add assembly =&quot;System.Web.Extensions, … &quot;/> </ assemblies > </ compilation > <assemblies> < httpHandlers > < remove verb =&quot;*&quot; path =&quot;*.asmx&quot;/> < add verb =&quot;*&quot; path =&quot;*.asmx&quot; validate =&quot;false„ type =&quot;System.Web.Script.Services.ScriptHandlerFactory, … &quot;/> < add verb =&quot;GET,HEAD&quot; path =&quot;ScriptResource.axd„ type =&quot;System.Web.Handlers.ScriptResourceHandler, … &quot; validate =&quot;false&quot;/> </ httpHandlers > <httpHandlers> < httpModules > < add name =&quot;ScriptModule&quot; type =&quot;System.Web.Handlers.ScriptModule, … &quot;/> </ httpModules > <httpModules> < system.web.extensions > < scripting > < webServices > <!-- <jsonSerialization maxJsonLength=&quot;500&quot;> <converters> <add name=&quot;ConvertMe&quot; type=&quot;Acme.SubAcme.ConvertMeTypeConverter&quot;/> </converters> </jsonSerialization> --> <!-- <authenticationService enabled=&quot;true&quot; requireSSL = &quot;true|false&quot;/> --> <!-- <profileService enabled=&quot;true&quot; readAccessProperties=&quot;propertyname1,propertyname2&quot; writeAccessProperties=&quot;propertyname1,propertyname2&quot; /> --> </ webServices > <!-- <scriptResourceHandler enableCompression=&quot;true&quot; enableCaching=&quot;true&quot; /> --> </ scripting > </ system.web.extensions > <system.web.extensions> < system.webServer > < validation validateIntegratedModeConfiguration =&quot;false&quot;/> < modules > < add name =&quot;ScriptModule&quot; preCondition =&quot;integratedMode„ type =&quot;System.Web.Handlers.ScriptModule, … &quot;/> </ modules > < handlers > < remove name =&quot;WebServiceHandlerFactory-ISAPI-2.0&quot;/> < add name =&quot;ScriptHandlerFactory&quot; verb =&quot;*&quot; path =&quot;*.asmx„ preCondition =&quot;integratedMode&quot; type =&quot;System.Web.Script.Services.ScriptHandlerFactory, … &quot;/> < add name =&quot;ScriptResource&quot; verb =&quot;GET&quot; path =&quot;ScriptResource.axd„ type =&quot;System.Web.Handlers.ScriptResourceHandler, … &quot; /> </ handlers > </ system.webServer > <system.webServer>
  • Új project beállításai
  • Egyszerű demo
      • Részleges frissítés
      • UpdatePanel
      • Trigger
  • 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?
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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); }
  • 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(); } }
  • Ö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ó
  • További információk
    • Fejlesztői Portál:
      • http://www.devportal.hu
      • Webfejlesztés témaközpont:
        • http://www.devportal.hu/Portal/Webdevelopment.aspx
      • ASP.NET 2.0 Induló Készlet:
        • http ://www.devportal.hu/InduloKeszlet
    • MSDN .NET Developer Center
      • http:// msdn.microsoft.com/netframework/
    • MSDN ASP.NET Developer Center
      • http://msdn.microsoft.com /aspnet
    • Hivatalos ASP.NET honlap
      • http://www.asp.net
    • Hivatalos ASP.NET AJAX honlap
      • http:// ajax.asp.net
  • Kérdések és válaszok Értékelőlapok!
  • © 200 7 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.