asp.net mvc 3 - il model view controller secondo microsoft
DESCRIPTION
Il pattern architetturale MVC (Model View Controller) favorisce la manutenzione delle applicazioni web tramite una architettura elegante ed una chiara ed esplicita separazione delle competenze, l'impiego dei più diffusi pattern di software engineering, il controllo completo dell'HTML generato e degli URL, la testabilità ed estendibilità. In questa sessione vedremo le novità principali di Asp.Net MVC in versione 3. La sessione è stata tenuta a SMAU Business Bologna il 9 giugno 2011TRANSCRIPT
ASP.NET MVC 3
Benedetti Stefano
Contatti
Ing. Stefano Benedetti
http://www.be-st.ithttp://[email protected]
http://dotdotnet.org/
Lo User Group dell'Emilia-Romagnainteramente dedicato alle tecnologie Microsoft .NET
Agenda
• MVC Overview• scaffolding• supporto HTML 5• view engine Razor• miglioramenti sui controller• nuove funzionalità Javascript e AJAX• integrazione con NuGet• miglior supporto alla Dependency Injection• altre features
MVC Overview
• Pattern di presentazione
MVC Overview
• Originariamente impiegato dal linguaggio Smalltalk
• Smalltalk è stato sviluppato allo Xerox PARC durante gli anni settanta
Vantaggi
• Separation of Concerns (SoC)• Unit Testing• DI• Nessun viewstate• Controllo completo dell’HTML– Scomparsi i controlli server e gli ID
autogenerati
• No Page LifeCycle– Performance– Semplicità
ASP.NET Page life
cycle
MVC Routing
• Disaccoppiamento tra URL e pagina fisica/products/products/detail/1/products/edit/1/products/delete/1
GetPost
• Configurabile tramite Global.asax• Convention over configuration
ProductsController
Global.asx e MapRoute
public static void RegisterRoutes(RouteCollection routes)
{ routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with
parameters new { controller = "Home", action = "Index",
id = UrlParameter.Optional } // Parameter defaults ); }
MVC Routing
• www.sito/product
public class ProductController : Controller{public ViewResult Index() {var products = db.Products.Include(p =>
p.Brand); return View(products.ToList());
}}
Default Action (Index)
MVC Routing
• products/details/1
public class ProductController : Controller{ public ViewResult Details(int id) { Product product = db.Products.Find(id); return View(product); }}
MVC Routing
• GET: /Product/Edit/5
public ActionResult Edit(int id) { Product product = db.Products.Find(id); ViewBag.BrandId = new
SelectList(db.Brands, "Id", "Name", product.BrandId);
return View(product); }
MVC Routing e Model Binding
• POST: /Product/Edit/5[HttpPost]public ActionResult Edit(Product product) { if (ModelState.IsValid) { db.Entry(product).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } ViewBag.BrandId = new SelectList(db.Brands, "Id", "Name",
product.BrandId); return View(product); }
Requisiti
• Per il runtime ASP.NET MVC 3:.NET Framework version 4
• ASP.NET MVC 3 Visual Studio 2010 tools:Visual Studio 2010 o Visual Web Developer 2010 Express
Installazione
• Side by side con MVC 2• Web Platform Installer (WebPI)
http://www.microsoft.com/web/gallery/install.aspx?appid=MVC3
• Download direttohttp://go.microsoft.com/fwlink/?LinkID=208140
NuGet
• Library Package Manager• Estensione di Visual Studio• Automazione:– Download– Package folder– Reference– Web.config– Configurazione custom
• Gestione update• Post e guida di base su blog.be-st.it
NuGet
• DEMO
NuGet in MVC 3
• Versione 1.2• Package pre-installati–Modernizr– Entity Framework Code First– JQuery
Scaffolding
• Creazione dell’impalcatura• “Add Controller” ha 3 modalità di
scaffolding:– Empty controller– Controller with empty read/write actions– Controller with read/write actions and
view, using Entity Framework
Scaffolding
Controller with read/write actions and view, using Entity Framework
• Benefici• Accesso ai dati• Validazione• One-to-many relationship
Scaffolding
• Alternativa: MVCScaffolding– Package NuGet– http://blog.stevensanderson.com– Pro ASP.NET MVC V2 Framework
HTML 5
• I template di progetto supportano HTML 5
HTML 5
• Nuovi tag– Header– Footer– Nav– Section
• Validazione HTML 5 in VS 2010
HTML 5
• La compatibilità con i browser più vecchi è garantita da Modernizr
<header><nav><section><footer>
Browser non HTML 5
• http://www.modernizr.com/• Package NuGet
View Engine “Razor”
• Overview• Nuove feature• Nuovi HTML helpers
View Engine “Razor”
• Concisa• Facile da imparare• Intellisense e evidenziazione del
codice Razor in Visual Studio
View Engine “Razor”
• Definizione del model: @model• Commenti: @* *@• Impostazioni di default (ad es.
layoutpage)• Html senza encoding: Html.Raw• Codice condiviso tra le view
(_viewstart.cshtml)• “Master page”: layout
Razor Layout
View Engine Support
• Default–Web Forms (ASPX)– Razor
• Spark• NHaml• NDJango
Nuovi HTML Helpers
• Chart• WebGrid• Crypto• WebImage• WebMail
ChartDemoHtmlHelpersController
public ActionResult Chart() { var key = new Chart(width: 600, height: 400) .AddSeries( chartType: "bar", legend: "Rainfall", xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" }, yValues: new[] { "20", "20", "40", "10", "10" }) .Write();
return null; }
Chart
View
<p> <img
src="/DemoHtmlHelpers/Chart" alt="Chart" />
</p>
WebGrid
@{ var grid = new WebGrid(source: Model, rowsPerPage:
3);}@grid.GetHtml(tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Id"), grid.Column("Name") ) )
<table class="grid">
<thead><tr class="head">
<tr class="alt">
WebGrid
• Layout• Sort• Paginazione
WebImage
var imagePath = Server.MapPath("~/images/dotdotnet.png");
var image = new WebImage(imagePath);• FlipVertical(); FlipHorizontal();• RotateLeft(); RotateRight();• Crop• WaterMark• Resize• Formato immagine: JPEG, PNG (default), BMP, GIF
Miglioramenti ai controller
• Global Action Filters• Nuova ViewBag property• Nuovi ActionResult
Global Action Filters
• MVC 2: Action Filters– Codice da eseguire prima e dopo una
SPECIFICA action– Si applica sull’action o sul controller
Global Action Filters
• MVC 3: Global Action Filters– Filtri da eseguire prima e dopo OGNI
action di tutti i controller– GlobalFilters
ViewBag
• MVC 2: ViewData– Dictionary
• MVC 3: ViewBag– Dynamic Property
ViewData[“Message”] VS. ViewBag.Message
Nuovi ActionResult
• HttpNotFoundResult• RedirectResult• HttpStatusCodeResult
Demo
Javascript e AJAX
• AJAX sfrutta NuGet (aggiornabile)• Unobtrusive JavaScript• Default Client-Side Validation• Remote validator• Supporto al binding JSON
Unobtrusive JavaScript
• Vantaggi– Separazione tra codice e markup– Performance e scalabilità– Aggiornamento delle librerie per
supportare nuove funzionalità/nuovi e vecchi user agent
• Svantaggi– Sviluppo più lento– Necessità di cercare eventuali JS associati
ai tag
Separazione tra codice e markup
<input type="text" name="date" onchange="validateDate()" />
<input type="text" name="date" id="date" />
$(function(){ $('#date').bind('change', validateDate); });
Unobtrusive JavaScript – ON/OFF
• Web.Config – appSettings <add
key="UnobtrusiveJavaScriptEnabled" value="true"/>
• HtmlHelper.UnobtrusiveJavaScriptEnabled• Default: ON (sui nuovi progetti)• OFF: compatibilità con MVC 1 e 2• Utilizza attributi compatibili con HTML 5
Unobtrusive JS: Performance
OFF<form action="/ajax/callback" id="form0" method="post" onclick="Sys.Mvc.AsyncForm.han
dleClick(this, new Sys.UI.DomEvent(event));"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'loading', updateTargetId: 'updateme' });">
ON
<form action="/ajax/callback" data-ajax="true" data-ajax-
loading="#loading" data-ajax-
mode="replace" data-ajax-
update="#updateme" method="post">
Default Client-Side Validation
• MVC 2– Html.EnableClientValidation
• MVC 3– Default!– Disabilitabile da web.config
Remote Validator
• RemoteAttribute– JQuery Validation
• Demo
JSON Binding
• Il model binding è stato esteso per supportare JSON
• E’ possibile fare binding da un oggetto JSON ad un parametro di una action
JSON Binding
JSON Binding
Model Validation
• DataAnnotations• ValidationAttribute• Validation Interfaces
DataAnnotations
• Supporto diretto ai DataAnnotations– DisplayAttribute
ValidationAttribute
• IsValid Overload – Accesso all’oggetto in corso di
validazione
• CompareAttribute
Validation Interfaces
• IValidatableObject – Validazione a livello di model• Stato del model• Confronto tra proprietà del model
Validation Interfaces
Dependency Injection
• Cos’è• Le dipendenze non sono all’interno
del componente• Le dipendenze vengono iniettate
Nessuna injection
public class OrderManager { public void ProcessOrder() { var logger = new LogManager(); logger.Log(); } }
DI: constructor injection
public class OrderManagerDI { private readonly ILog _logger;
public OrderManagerDI(ILog logger) { _logger = logger; }
public void ProcessOrder() { _logger.Log(); } }
DI in pratica = IOC
• Le dipendenze possono essere moltissime ed in cascata
• La risoluzione delle dipendenze viene demandata ad un gestore esterno
• L’IOC si occupa di gestire le dipendenze a runtime
• Esempio:– Ninject
Dependency Injection
• Controllers• Views• Action Filters• Model Binders• Model validation• Model metadata• Value providers
Altre nuove features
• Partial-page output caching• Estendibilità della finestra “New
Project”• Overloads Html.LabelFor e
Html.LabelForModel• Supporto alla sessione nei controller• AdditionalMetadataAttribute• Nuovo AccountController• Nuovo template di progetto “Intranet”
ASP.NET è morto?
NO!
ASP.NET è morto?
• Intranet/web application “non pubbliche”
• Molto veloce sviluppare• Infinità di controlli server sul mercato• ASP.NET 4.0 sopperisce a molti limiti
sul controllo dell’HTML
Riferimenti
• MVC Page su ASP.NETwww.asp.net/mvc
• MSDNgo.microsoft.com/fwlink/?LinkId=205717
• ScottGuhttp://weblogs.asp.net/scottgu/
Riferimenti
• NuGethttp://nuget.codeplex.com/http://haacked.com/tags/NuGet/default.aspxhttp://blog.be-st.it/?tag=/nuget
THAT’S ALL FOLKSGrazie