ASP.NET AJAX és az ASP.NET rejtelmei

Slides:



Advertisements
Hasonló előadás
Windows Virtualizáció
Advertisements

Osztály leszármaztatás
Richter Elek Technikai terméktámogatási felelős Microsoft Magyarország.
A Windows Azure egy skálázható számításifelhő-platform, amelyet a Microsoft hosztol a világ több pontján lévő adatközpontjaiban. Az Azure egyszerű,
KEVESEBB FELÜGYELET ÚJ ÜZLETI MODELLEK NAGYOBB TERMELÉKENYSÉG.
JQuery 8. előadás.
... manapság BizSpark WebsiteSpark Empower for ISVs MAPS (Web Solutions Toolkit ) Microsoft Partner Network Regisztrált szintCertified és Gold Certified.
Licencelés Kovács Nóra Ker-Soft Kft.
Felhasználói felületek és üzleti logika Bollobás Dávid ASP.NET
Windows Vista, 2007 Office Rendszer, Exchange Server 2007 termékbejelentés Vityi Péter Ügyvezető igazgató Microsoft Magyarország kft.
„AZ IT MAGÁN ÉS NYILVÁNOS ÉLETE” Avagy hogyan születik a BI iránt igény az IT üzemeltetésben Benkovics Viktor Vezető tanácsadó Microsoft Magyarország –
Windows Azure Infrastruktúra és platform a felhőben
Essential Business Server 2008 Szentgyörgyi Tibor NetAcademia oktatóközpont A nagytestvér.
Lehetőségek, felhasználható eszközök, eddigi tapasztalatok
Felhasználói adatok és fiókok migrálása az (USMT) 4.0 segítségével
A Windows 7 automatizált telepítése Windows AIK használatával
Stílus, mesteroldal, témák
Közös kinézet Mester oldal, témák, skin-ek, css Webalkalkalmazás fejlesztése ASP.NET-ben Krizsán Zoltán.
A CRM bevezetési projektek sajátosságai
Nagy Levente Szoftverfejlesztési Szakértő Microsoft Magyarország Munkafolyamatok a 2007-es Office Rendszerben.
Egy ISA szerver naplója Sárosi György Terméktámogatási Tanácsadó Microsoft Magyarország.
Egyszerű webes alkalmazás fejlesztése Készítette: Simon Nándor.
Egyszerű webes alkalmazás fejlesztése
Webszerkesztés Stíluslapok (CSS).
A felhő az üzleti vezető, a fejlesztő és az üzemeltető szemével A vállalati számító- központ kiterjesztése a felhőbe Biztonság és üzemeltetés a felhőben.
Ittzés Zsigmond Budapest Airport IT Infrastruktúra manager
Microsoft CRM online Strén András
Taletovics Márk Microsoft Magyarország. Mi van a csomagban?
Kőnig Tibor főmérnök Microsoft Magyarország
Az AJAX technológia használata Ez az előadó neve beosztása vállalata.
Bátyai Krisztián NetAcademia Oktatóközpont oktató, fejlesztő MCT, MCPD
Mesterlapok és menük használata
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
Vezérlők használata és írása Ez az előadó neve beosztása vállalata.
Rendelkezésre álló erőforrások pontos ismerete Kiosztott feladatok közel „valósidejű” követése Átláthatóság Tervezési folyamatok támogatása.
Gincsai Gábor MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék.
Budai Péter Szakmai és biztonsági vezető Microsoft Magyarország.
Javascript Microsoft által készített kiegészítése Statikus típusosság Nagy projektek Windows 8 fejlesztésénél WinRT egy részét ebben írták Nyílt forráskódú,
Rugalmas, moduláris felépítés Rugalmas telepítés Jól tervezhető szerepkörök Folyamatos rendelkezésre állás Egyszerű felügyelet Elérés bárhonnan Postafiók.
A Microsoft Üzleti Intelligencia megoldása és platformja
Blog Fülöp Dávid MCT, MCPD Egy blog sémája Use Case-ek – Blog áttekintése – Egy blogpost megtekintése – Blogpost írása – Blogpost.
Illés Zoltán ELTE Informatikai Kar
Egy évtized eredményei - avagy mit adhat nekünk egy új platform?
IT-DEV-CON – Orchard CMS technológiai áttekintése Turóczy Attila Livesoft Kft.
Christopher Chapman | MCT Content PM, Microsoft Learning, PDG Planning, Microsoft.
Ismerkedés az Active Directory-val
User Profiles Endrődi Tamás (MCT, MCP, MCITP) GDF Informatikai Intézet vezetője SZÁMALK Oktatóközpont.
Vállalati infrastruktúra, mely minden igényt kielégít Felhasználóbarát eszközök és élmények.
Szebb és használhatóbb programok Vezérlőelemek dinamikus felhelyezése.
Erőforrások strukturálása Készítette: Szentirmai Róbert (minden jog fenntartva)
Kiss Tibor System Administrator (MCP) ISA Server 2006.
Csirmaz Péter MCP, MCTS, MCPD Turóczy Attila diái alapján: Harmadik nap.
Farkas Bálint | Technical Evangelist | Microsoft.
Az {SQL Server 2008} Integration Services és Analysis Services újdonságai
Híd a Windows folyón Balint Farkas Technical Evangelist Microsoft
„Designer-barát” játéklogika
Skype for Business bevezetés és alközponti összeköttetés kialakítása
Neumann János Informatikai Kar
Farkas Bálint | Technical Evangelist | Microsoft
TechReady 22 6/25/2018 © 2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks.
Blockchain…de mi hajtja?
Angular 2: Mi van a csokoládésdobozban?
Cascading Style Sheet.
WS16 TP4 újdonságok Gál Tamás Budapest Sysadmin Meetup
Tömegközlekedés, közszállítás Nagyváradon
Microsoft Azure Marketplace & Microsoft Azure Certified program
A nagyváradi villamosok megbízhatósági modellezése
„Agilis-e vagy?” – egy váltókezelő naplója
HWSW Meetup – Felhő és ami mögötte van
Build /24/2019 © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION.
Előadás másolata:

ASP.NET AJAX és az ASP.NET rejtelmei Negyedik nap Turóczy Attila diái alapján: Csirmaz Péter MCP, MCTS, MCPD

Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása

A vezérlők típusai User Control Custom Web Control Composite Control .ascx fájl Portolás másik projektbe -> ascx mozgatással Templated control Több különálló vezérlő összefog Custom Web Control WebControl-ból származik Nulláról kell megírni Meglévő vezérlőből származtatjuk .dll-be mehet, és GAC-be telepíthető Composite Control Több kontrol egyben, Dll-be csomagolható, GAC-be telepíthető GAC – Global Assembly Cache, valahol a Windows mappa melyen

User Control Custom Control Composite Control Tematika Egy rövid áttekintőt fog adni az alábbi fejezetekről. Úgy mint a saját típusok készítése, típus konverziók stb.

User Controlok készítése Több létező kontrolt összecsoportosítunk egy konténerbe. Pl. Cím, szállítási cím páros UserControl ősosztály Add New Item / Web User Control Page <-> Control

User Controlok készítése meglévő WebForm-ból <html>, <body>,<form> tag-ek eltávolítása @Page -> @Control .aspx -> ascx @Control-ban: Inherits=”System.Web.UI.Page” helyett Inherits=”System.Web.UI.UserControl”

User Control használata Design felületre Drag and Drop Regisztrálás: Használatbavétel: Dinamikus betöltés – LoadControl

Hozzáférés a User Control adataihoz A tagváltozók csak belülről, vagy a leszármazottak számára elérhető (protected) Propertyként kipublikálhatók Események a vezérlőbe záródnak

User Control eseményei a Page-n Pl. Egy gomb szeretné az eseményt az oldalnak továbbítani. UserControlban: Form-on:

Templated User Control A megjelenés és az adat elválik Nincs default megjelenés sem Recept: UserControl fájl hozzáadása PlaceHolder elhelyezése ITemplate típusú property hozzáadása Container class hozzáadása TemplateContainerAttribute az ITemplate property elé. Paraméter a Container Class PersistenceModeAttribute felvétele ITemplate elé. Paramétere: PersisenceMode.InnerProperty UserControl code-behindjában property készítése az adatoknak, hogy átadhassák a Container-nek. Page_Init-ben ITemplate ellenőrzése, Példányok létrehozása

ShipperContainer.cs

ShipperControl.ascx(.cs)

Templated User Control felhasználása DataBind()!!!!

User Control Custom Control Composite Control Tematika Egy rövid áttekintőt fog adni az alábbi fejezetekről. Úgy mint a saját típusok készítése, típus konverziók stb.

Custom Web Server Vezérlők WebServer control ősosztály Stílusok használata Override Render –> HtmlTextWriter Meglévő vezérlőből is lehet származtatni

Custom vezérlők készítése Ha az újrafelhasználhatóság fontos, akkor ClassLibrary Származtatás konkrét vezérlőből

Custom Vezérlő felhasználása Default.aspx.cs-ben:

demo WebControl-ból származtatunk saját osztályt Render-t teljesen felül kell írni Page_Init-ben meghívni public string LogoUrl { get; set; } public string CompanyName { get; set; } protected override void Render(HtmlTextWriter writer) { writer.WriteFullBeginTag("div"); writer.Write(@"<img src=""{0}""/><br/>", LogoUrl); writer.Write(CompanyName + "<br/>"); writer.WriteEndTag("div"); }

Custom vezérlők felvétele ToolBox-ba Class Library ToolBox / Choose Items ToolboxBitmap (16x16) ClassLibrary-ba Build Action / Embedded Resource

További kiegészítések ToolBoxDataAttribute TagPrefix – AssemblyInfo.cs

Custom Control – Designer támogatás Nekünk kell megírni  MyControlDesigner osztály készítése System.Web.UI.Design.ControlDesigner-ből Override string GetDesignTimeHtml() Override void Initialize(IComponent) Base.Initialize(component) DesignerAttribute elhelyezése

User Control Custom Control Composite Control Tematika Egy rövid áttekintőt fog adni az alábbi fejezetekről. Úgy mint a saját típusok készítése, típus konverziók stb.

Composite Control Alapvetően egy custom control, ami más WebControlokat tartalmaz Nincs designer támogatás, és nincs ascx, dll van. CompositeControl az ősosztály Kezelik a viewstate-et, postbacket Minden vezérlő önálló.

Composite Control készítése Származtatás a CompositeControl-ból Override CreateChildControls Style nincs panelbe kell helyezni a gyerek kontrollokat A from Page_Init-jében lehet hozzáadni a vezérlőt.

User DataControl.cs

Control felhasználása

Creating Custom Web Controls Gyakorlat Creating Custom Web Controls Feladat: A látogatóüdvözlős példából csináljuk custom web kontrolt.

Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása

Web Part oldal megvalósítása WebPartManager controll Ajánlott: layout | table WebPartZone(ok) Controllok hozzáadása a WebPartZone-hoz Legelőször az WebPartManager-t kell elhelyezni az oldal tetején. Felhasználó számára nem látható, viszont rendkívül fontos szerepe van. Nem kötelező, de ajánlott táblázat használata. WebPartZone-ok tárolják a Web Part-okat. Ezek mozgatása is tulajdonképpen az egyik Zone-ból a másik-ba történik. A kontrollok behúzgálása a Zone-ok ba, amivel egyúttal az alapértelmezett pozíciójukat is meghatározzuk.

Web Part módok A felhasználó tudjon: Módok közötti váltás: Browse – eltüntetni, elrejteni Design – pakolászni Edit – szerkeszteni Catalog – Web Part-okat adni a laphoz Connect – kapcsolatot létrehozni, törölni Módok közötti váltás: WebPartManager.DisplayMode property Amikor el készült az oldal, el kell döntenünk, hogy a felhasználó miket csinálhasson az oldalon lévő Web Part-okkal. Annak meghatározására, hogy a felhasználó milyen műveletek hajthat végre a Web Part-okkal úgynevezett módokat definiáltak. Nekünk kell biztosítani, hogy a felhasználó tudjon ezek között a módok között váltani Pl.: legördülő listából válassza ki, hogy éppen mit akar csinálni. Ezek a következők: Alapértelmezett a Browse mód. Design mód: Engedélyezzük ebben a módban a felhasználónak, hogy a Web Partokat át tudja pakolni egyik helyről a másikra. (Drag and drop módszerrel) Edit mód: Ebben a módban szintén engedélyezzük ebben a módban a felhasználónak, hogy a Web Partokat át tudja pakolni egyik helyről a másikra. (Drag and drop módszerrel). De a user a Web Parts menüjéből ki tudja választani, hogy szerkeszteni akar, és ezáltal tudja szerkeszteni a Web Part címkéjét méretét, elhelyezkedését stb. Ahhoz, hogy ezt a lehetőséget válaszuk a toolboxról fel kell húzzuk az EditorZone controlt a web lapra. És ebbe az editor zoneba huzzúk bele az AppearanceEditorPart vagy/és a LayoutEditorPart controlt. Melyek segítségével egyszerűen szerkeszthetjük a Web Partok túlajdonságait. Catalog mód: Ezzen mód segítségével, hozzáadhatunk web partokat a web lapon. Ahhoz, hogy ezt aktivizáljuka Catalog Zone controlt hozzá kell adnunk a weblapounkhoz. Connect mód: Kapcsolat a webpartok között. Jelentősége óriási. Vegyünk egy példát, ha a felhasználó beállítja, hogy ő Budapesten él akkor pl az időjárás modul nem a berlini időjárást fogja a számára bemutatni hanem a magyart. Ez is az oldal személyre szabását teszi még könyebbé. A Connect módnak 2 típusa van. Van a statikus amikor a mi fejlesztők gondoskodunk, hogy milyen koncepció szerint mit mutasson a web part. Valamint van a dinamikus amikor a felhasználó futási időben hatáozza meg.

Statikus kapcsolat létrehozása Provider Web Part létrehozása Consumer Web Part létrehozása Egy WebPartZone-ba elhelyezem WebPartManager | StaticConnections

Dinamikus kapcsolat Létrehozom a statikus kapcsolato(ka)t Web lapra: ConnectionsZone Futás időben: Connect módra Web Part menüjéből: connect

Web Part perszonalizáció Hasonló a profile-hoz Teljesen automatikus A controll-ok állapotait tárolja Alapállapot visszaállítása: PersonalizationAdministration.ResetAllState(PersonalizationScope.User) A web partok lehetőséget biztosítanak arra, hogy ha a felhasználó testre szabta az oldal kinézetét, és ha legközelebb visszalátogat az oldalra ugyan az a látvány fogadja amit testreszabott. Ezek a beállításokat akár cookiekban a felhasználó gépén vagy akár eltárolva az SQL Serverben is lehetnek. Az SQL serveres megoldás természetesen jóval robosztusabb. Természetesen vannak, helyzetek amikor nem szeretnénk ezt a p ASP.NET automatikusan tárolja az adatokat. Következő látogatáskor is a módosított UI fogadja.

Perszonalizáció++ Minden felhasználóra. Web.config-ban: Tiltása: <authorization> <allow verbs= ”POST” users= ”EN” roles= ”ADMIN” /> </authorization> Tiltása: WebPartManager-ben: <Personalization Enable = ”FALSE” >

demo <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script> <script type="text/javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); } </script> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:200px; height:200px;"></div> </body> void Page_Init(object sender, EventArgs e) Page.InitComplete += new EventHandler(GenerateList); protected void GenerateList(object sender, EventArgs e) WebPartManager manager = WebPartManager.GetCurrentWebPartManager(Page); ModeList.Items.Clear(); foreach (WebPartDisplayMode item in manager.SupportedDisplayModes) ListItem li = new ListItem(item.Name, item.Name); ModeList.Items.Add(li); int selectedIndex = ModeList.Items.IndexOf(ModeList.Items.FindByText(manager.DisplayMode.Name)); ModeList.SelectedIndex = selectedIndex; protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) WebPartDisplayMode mode = manager.SupportedDisplayModes[ModeList.SelectedValue]; if (mode != null) manager.DisplayMode = mode; -----------

Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása

Mester és Tartalom oldalak használata <asp:contentplaceholder id="CphMain" runat="server" /> A mesteroldalak használatával azokat az oldalelemeket (vezérlőket) melyekre minden oldalon szükség van, megoldhatjuk, hogy nekünk csak egy oldalhoz kell hozzáadni, és minden oldalon meg fog jelenni. Ez nagyban fokozza a kód átláthatóságát, hiszen nem kell kódot duplikálnunk. Az alábbi ábra egy lehetséges elrendezést mutat, ahol az oldalak csak a Main content area részben különböznek, a többi terület mindenhol ugyanúgy néz ki.

Hogyan épül fel egy mesteroldal? A mesteroldal az alábbi tulajdonságokban tér el egy normál oldaltól: .master a kiterjesztése <%@ Master … %> direktívával kezdődik Tartalmaz egy <asp:contentplaceholder … /> taget System.Web.UI.MasterPage-ből származik

Hogyan épül fel egy tartalom oldal? Mivel a tartalom oldal egy mesteroldal belsejébe (ContentPlaceHolder-ébe fog másolódni), ezért nem tartalmazhatja a következő html tageket: <html> <head> <body> <form> Page direktíva <%@ Page MasterPageFile="~/MasterPage.master" Title="Cím" %> A tartalom oldal Page direktívája az alábbi részeken tér el egy normál oldalétól: <%@ Page MasterPageFile="~/MasterPage.master" Title="Cím" %> Ezen felül fontos, hogy minden vezérlő egy Content tegen belül kell, hogy elhelyezkedjen, mert ezt a részt fogja bemásolni a keretrendszer a mester oldalon található megfelelő ContentPlaceHolder-be.

Futási időben is be tudom állítani a mesteroldat? Ha a mester oldalt futási időben szeretnénk megváltoztatni, akkor a Page.MasterPageFile tulajdonságot kell beállítani a Pre_Init-ben, az alábbi módon: protected override void OnPreInit( EventArgs e ) { this.Page.MasterPageFile = "~/MasterPage.master"; base.OnPreInit( e ); } Ha a mester oldalt futási időben szeretnénk megváltoztatni, akkor a Page.MasterPageFile tulajdonságot kell beállítani a Pre_Init-ben,

El tudom érni a a mesteroldal egyes vezérlőit? Vezérlők elérése: Page.Master.FindControl() Poperty-k, függvények elérése: <%@ MasterType VirtualPath="~/MasterPage.master" %> ekkor kódból is elérem: Master.PropertyName A mester oldalon található vezérlőket úgy tudom elérni, hogy a Page.Master visszaadja a mesteroldalt, amin egy FindControl() segítségével egyszerűen meg tudom keresni a kívánt vezérlőt. Abban az esetben, ha az oldanak nincs mesteroldala, akkor a Page.Master értéke null lesz. Lehetőség van arra is, hogy a mesteroldalon definiált propertyket vagy függvényeket is elérjük. Ehhez azonban tudni kell a mesteroldal típusát, amit a tartalom oldalon a MasterType megadásával tudok beállítani. Lehetőség van arra is, hogy a mesteroldalon definiált propertyket vagy függvényeket is elérjük. Ehhez azonban tudni kell a mesteroldal típusát, amit a tartalom oldalon a MasterType megadásával tudok beállítani.

Események lefutásának sorrendje 1. MasterPage_OnInit() 2. Page_OnInit() 3. Page_Load() 4. MasterPage_Load() 5. Page_PreRender() 6. MasterPage_PreRender() 7. Page_Render() 8. MasterPage_Render()

Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása

CSS – Cascading Style Sheet Három féle módon alkalmazhatjuk: Inline <span style="color:Red;font-weight:bold;">Hello World</span> Embedded <style type="text/css"> .redboldtext { color:Red; font-weight:bold; } </style> External style sheet <link type="text/css" href="MyStyle.css" rel="stylesheet"> Embedded, External -> head tag közé

Témák és Skinek Témák: Egy könyvtárba foglaljuk azokat az allományokat amelyek a megjelenéshez szükségesek App_Theme Skinek: összetett vezérlőkre egyszerűbben tudjuk megadni az egységes kinézetet. Célszerű CSS-t használni Egy absztrakciós szinttel feljebb tudjuk megadni a kinézete Skin használatának kikapcsolása: EnableTheming = false

Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Tematika Egyedi Sever Control-ok létrehozása WebPart-ok MasterPage Témák, CSS, Skin ASP.NET AJAX Implemetálása

Microsoft AjaxLibrary Javascript kódgyűjtemény Bevezetés Microsoft AjaxLibrary Javascript kódgyűjtemény ASP.NET AJAX server controls AJAX control toolkit közösség által fejlesztett gyűjtemény http://www.asp.net/ajax/AjaxControlToolkit/Samples/ AJAX Előnyei: partial-page updates client-side processing desktop-like ui progress indication improved performance and higher scale Web service calls from the client cross-browser cross-platform support

AJAX server controls ScriptManager és ScriptManagerProxy Update Panel UpdateProgress Timer vezérlő

demo LoginDemo UpdatePanellel

© 2006 Microsoft Corporation. All rights reserved © 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.