Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... ·...
Transcript of Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... ·...
![Page 1: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/1.jpg)
Webes alkalmazások
fejlesztése
9. előadás – Bevezetés az ASP.NET MVC keretrendszerbe
![Page 2: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/2.jpg)
ASP.NET MVC Framework
2009-ben jelent meg az első verziója, azóta folyamatosan fejlesztik
Nyílt forráskódú Microsoft technológia
Szerveroldali webprogramozáshoz keretrendszer
Modell-View-Controller (MVC) tervezési mintára épül
Jelenleg az ASP.NET WebForms-al fejlesztik párhuzamosan és 4.0-ás
verziónál tart
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 2
![Page 3: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/3.jpg)
Konkurencia
Python
Django
Ruby
Ruby On Rails
PHP
CodeIgniter
Symphony
Zend Framework
Java
Spring Web MVC
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 3
![Page 4: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/4.jpg)
Model-View-Controller tervezési minta
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 4
o Modell: Az adatok kezeléséért felelős réteg.
o Nézet: A weblapok megjelenítéséért felelős réteg
o Vezérlő: Ide kerül az üzleti logika, ő vezérli, hogy melyik nézet jelenjen meg a felhasználónak és kezeli a különböző interakciókat. AdatbázisAdatbázis Program
Modell(Model)
Nézet(View)
Vezérlő(Controller)
![Page 5: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/5.jpg)
MVC és MVVM összehasonlítása
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 5
Nézet(View)
Nézetmodell(ViewModel)
Modell(Model)
o Az MVC a tapasztalat szerint, jobban
bevált a nagyobb webes
alkalmazásoknál
o A két minta nagyon hasonlít
egymásra, de nem ugyanaz a kettő:
MVVM-ben a nézetmodell nem
ugyanazt a szerepet tölti be, mint
MVC-ben a vezérlő. Amíg a vezérlő
felelős azért, hogy mely nézet jelenjen
meg, addig a nézetmodell nem tudja
ezt meghatározni.
![Page 6: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/6.jpg)
Keretrendszer működése
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 6
Vezérlő
Akció metódus
Akció metódus
Kliens
HTML oldalLegenerált HTML oldal Nézet generálása
Kérés küldése Nézet
Nézetmeghatározása
![Page 7: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/7.jpg)
További technológiák
Szerver oldalon (.NET technológiák)
Dependency Injector .NET-hez (Ninject)
Mocking Library (Moq)
Unit Testing Framework (nUnit)
Kliens oldalon (Javascript technológiák)
jQuery (Core, UI, Mobile stb.)
Knockout (adatkötés, MVVM)
Prototype.js
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 7
![Page 8: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/8.jpg)
Előkészületek
Microsoft Visual Studio 2010 Ultimate
NuGet Package Manager (opcionális)
Web Platform Installer
ASP.NET MVC 3
Microsoft Visual Studio 2012 Ultimate
ASP.NET MVC 4
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 8
![Page 9: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/9.jpg)
DEMO
„Hello World” weboldal elkészítése
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 9
![Page 10: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/10.jpg)
ASP.NET - View Engine
A HTML oldalak generálását az ASP.NET-en belül a különböző View
Engine-ek végzik
A keretrendszer felépítéséből adódóan lehetőség van arra, hogy
különböző nézetmotorokat definiáljunk és használjunk
Saját nézetmotor készítéséhez két interfészt kell implementálni:
IViewEngine és IView, illetve regisztrálnunk kell az
alkalmazásunkban, amit a ViewEngine.Engines tulajdonságon
keresztül tudjuk megtenni
Ha nem szeretnénk teljesen az alapoktól újraírni, akkor a már
meglévő beépített nézeteket (RazorViewEngine és
WebFormViewEngine) is felhasználhatjuk
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 10
![Page 11: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/11.jpg)
ASP.NET - View Engine
ASPX View Engine használata (lásd eddigi előadások)
Razor View Engine (ezt érdemes használni): ASP.NET MVC 3-tól elérhető
@<nyelvi szerkezet vagy kifejezés>
@:<szöveg> - Egyszerű szöveget generál
@using <névtér> – .NET-es névtér használata a nézet oldalon
@model <típus> – a Model tulajdonság típusának megadása (alapértelmezetten dynamic)
@section <név> - egy előre definiált részterületet lehet megadni vele
@helper <metódus> - Helper metódusokat lehet definiálni
nHaml – nem XML alapú view engine
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 11
![Page 12: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/12.jpg)
Akció osztályok
ActionResult – Absztrakt ősosztálya az összes akcióosztálynak
ViewResult - egy előre beállított nézetet rajzol ki
RedirectResult - A megadott URL-re továbbítja a felhasználót
PartialViewResult - egy előre beállított parciális nézetet rajzol ki
EmptyResult - Egy üres választ ad vissza
JsonResult - Egy megadott ViewData objektumot szerializál JSON objektumra
JavaScriptResult - Egy megadott Javascript kóddal tér vissza, amit a kliens képes futtatni
ContentResult - a válaszfolyamba írja közvetlenül magát a visszatérési értéket, így nincs szükség külön nézetre
FileContentResult/FilePathResult - Egy fájllal tér vissza
FileStreamResult - Egy FileStream-el tér vissza
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 12
![Page 13: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/13.jpg)
DEMO
To-Do-Site weboldal elkészítése
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 13
![Page 14: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/14.jpg)
URL Routing
Az ASP.NET MVC lehetőséget biztosít arra, hogy a programozó
saját URL címsablonokat definiáljon a webes alkalmazásához
Segítségével a felhasználó egyszerűebben és gyorsabban juthat el
a rendszerünk különböző funkcióihoz
Melyiket egyszerűbb megjegyezni:
http://mywebsite.com/Articles/2012-12-13
http://mywebsite.com?type=articles&date=2012-12-13
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu 14
![Page 15: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/15.jpg)
URL Routing
Bármilyen URL sablont készíthetünk, rendszerünk számára, illetve
bármennyit megadhatunk, akár vezérlőkre és akciómetódusokra is
lebontva
Általában szegmensekre tagoljuk az URL címünket és a
szegmensek helye alapján találjuk ki, hogy éppen mit kell tenni:
http://mywebsite.com/Articles/2012-12-03
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu 15
weboldalunk címe akciónk neve
dátum szerinti szűrés
![Page 16: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/16.jpg)
Validáció
Nem elég kliensoldalon ellenőrizni az adatok helyességét, hanem szerver oldalon is szükség van rá, ezért az ASP.NET MVC keretrendszer több lehetőséget is biztosít a minél hatékonyabb és kényelmesebb validációhoz:
Kliens oldali validáció: Kliens oldalon Javascript segítségével ellenőrizzük az adatokat. Így nem generálunk fölösleges adatforgalmat egy-egy rossz érték esetén.
Model validációs attribútumok: A modell osztályok tulajdonságait, különböző attribútumokkal látjuk el
Önvalidáló modellek (Self-validation models): Ezek az objektumok önmagukat tudják validálni (IValidatableObject), azaz lehetőség van arra, hogy a validációs logikát a model rétegbe helyezzük.
Explicit model validáció: A validáció a vezérlőben kerül elvégzésre, a ModelState tulajdonságon keresztül.
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu 16
![Page 17: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/17.jpg)
Szűrők használata (Filtering)
Egyszerű és elegáns módszert kínál olyan dolgok
implementálására, amik nem igazán illeszkednek az MVC-s
tervezési mintába
Jellemzően loggolásra, felhasználók azonosítására és cachelésre szoktuk használni
Saját szűrőket is definiálhatunk, ehhez az IActionFilter interfészt kell
implementálnunk. Két metódust kell megírnunk:
OnActionExecuting: Az akciómetódus lefutása előtt hívódik meg
OnActionExecuted: Az akciómetódus lefutása után hívódik meg
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 17
![Page 18: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/18.jpg)
ASP.NET Web API
Egy újabb Microsoft technológia, amivel egyszerűen és gyorsan
készíthetünk web szervert az MVC tervezési minta segítségével
Először a WCF technológia része volt, de tavaly kikerült onnan és
az ASP.NET-hez tették
Cél, hogy HTTP kéréseken keresztül érhessük el a rendszerünk
különböző szolgáltatásait, majd a válaszokat JSON vagy XML
formátumban küldjük vissza a kliens részére
A vezérlők nem a Controller osztályból vannak származtatva,
hanem az ApiController-ből, ennek megfelelően kicsit más
logikával működnek
Könnyen illeszthető már meglévő MVC-s alkalmazásainkhoz
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 18
![Page 19: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/19.jpg)
TypeScript programozási nyelv
Microsoft 2012. szeptemberében adta ki a 0.8-as verzióját a nyelvből, nyílt forráskódú, platform- és operációsrendszer független
Anders Hejlsberg (Pascal, Delphi, C#) is részt vesz a projektben
Statikus típusrendszere van, illetve magasabb szintű nyelvi eszközöket kínál az objektum-orientált programozáshoz(osztályok, modulok, interfészek stb.)
Célja, hogy a Javascript nyelv tervezési hibáit valamilyen szinten javítsa, illetve megfelelő eszközt nyújtson nagyobb projektet készítésére is
Rohamosan fejlődik, a következő verzióban (0.9) már a nyelv támogatni fogja a generikus típusokat is
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 19
![Page 20: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/20.jpg)
Hasznos linkek és könyvek
Linkek
http://www.asp.net/
http://www.codeproject.com/
www.google.com
http://www.typescriptlang.org/
Könyvek
Pro ASP.NET MVC 3 Framework – Steven Anderson, Adam Freeman, Apress 2011
Pro ASP.NET MVC 4 – Adam Freeman, Apress 2012
Pro C# 2010 and the .NET 4 Platform – Andrew Troelsen, Apress 2010
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 20
![Page 21: Webes alkalmazások fejlesztésesztrabi.web.elte.hu/wp-content/uploads/2013/05/WAF_ASP... · 2013-05-07 · Mocking Library (Moq) Unit Testing Framework (nUnit) Kliens oldalon (Javascript](https://reader034.fdocuments.net/reader034/viewer/2022050519/5fa31a8134f1c41e2b648f82/html5/thumbnails/21.jpg)
Köszönöm a figyelmet!
© Szabó Tamás ([email protected]) - sztrabi.web.elte.hu - Webes alkalmazások fejlesztése 21