Asp.Net MVC 3 - Il Model View Controller secondo Microsoft

ASP.NET MVC 3

Benedetti Stefano

Contatti

Ing. Stefano Benedetti

http://www.be-st.ithttp://blog.be-st.itinfo@be-st.it

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