ASP.

NET MVC
Part 1
Agenda
Webforms vs MVC
Caractersticas compartidas .NET
Convenciones
Models
Controllers
Views
Validaciones
Lab
Webforms
Codigo en archivos .aspx y code-
behind
Creas la interfaz arrastrando controles
a la pgina
Uso de Postback
Los controles proporcionan
propiedades y eventos
Poco control sobre el HTML
Dificulta el testing
MVC
MVC
Separation of concerns
La interfaz es generada por las vistas
Codigo en ficheros .cshtml y .cs
Sin postbacks
Control sobre el HTML y las URLs
Facilita el testing
Caractersticas .NET
compartidas
Configuration
Authentication
State Management
Caching
MVC Conventions
Controllers
Dentro de la carpeta
Controllers
El nombre acaba en
Controller
Views:
Dentro de la carpeta views,
en una subcarpeta con el
nombre del controlador
Les vistes compartides se
guardan dentro de la
carpeta Shared
Models and Viewmodel
Domain Model: Contiene nicamente
los datos y las validaciones del
negocio
ViewModel: Contiene nicamente los
datos y las validaciones que usaremos
en nuestras vistas
El nombre debera acabar en
ViewModel o Model (pe:
PhotoViewModel)
Models Data annotations
Se usan sobre todo para indicar las
validaciones de las propiedades del
modelo
Podemos sobrescribir existentes i
crear nuevos
Por convencin, el nombre de la clase
acaba en Attribute
Para usarlos hay que renderizar las
propiedades del modelo con los
helpers de MVC
Models Data annotations
Models - Data annotations
Ejemplos:
[StringLength(50)]
[Requiered]
[Display(Name = Photo title")]
[DataType(DataType.Password)]
[DisplayFormat(DataFormatString =
"{0:dd/MM/yy})]
Models

Demo
-Overview MVC app
-Aadir ViewModels
Controllers
Responden a las peticiones del
navegador / usuario
Es una clase, que contiene Actions
(funciones)
Cuando solicitamos una pgina o
contenido, nuestra peticin llega a
una accin
Nuestra accin responde al navegador
con un ActionResult (que puede ser
una vista, Json, un PDF)
Controllers - ActionResult
Hay diferentes tipos de ActionResult:
ViewResult
RedirectResult
JsonResult
Content
EmptyResult
JavascriptResult
FileContentResult
FileStreamResult
FilePathResult

Todos implementan la clase genrica
ActionResult
Controllers - ActionResult
Para devolver alguno de los tipos de ActionResult
usamos mtodos de la propia clase Controller:
View: Devuelve una vista, habitualmente se le pasa
un modelo
Redirect: Redirecciona a una URL
RedirectToAction: Redirecciona a una accin
RedirectToRoute: Redirecciona a una ruta
Json: Devuelve un objeto JSON
Content: Devuelve un String del tipo y encoding
espeficicado (pe: XML, Text)
File: Devuelve un fichero
JavaScriptResult: Devuelve contenido JavaScript
HttpNotFoundResult: Devuelve un 404 Not found
Controllers - Filters
Se pueden aadir Atributos al controlador
y sus acciones
Hay cuatro tipos, que se ejecutan en este
orden:
1. Authorization Filter: Usados para
implementar autorizacin y autenticacin
2. Action Filters: lgica que se ejecutara antes
o despues de la accin
3. Result filters: Logica que se ejecuta antes o
despues de la renderizar el ViewResult
4. Exception Filters: Controla excepciones que
se hayan generado
Controllers - Filters
[HttpPost]: Indica que hay que llamar a la
accin con un POST
[Authorize]: Indica que solo usuarios
autenticados pueden llamar a esta accin
[OutputCache]: Configurar cach para la
accin
[RequireHttps]: Requiere llamar a la
accin con https
Controllers - Validations
ModelState.IsValid.
Comprueba que se han pasado todas las regles
de validacin (Data annotations)
Si se hace alguna validacin mas des de el
controlador y esta falla se aade el error al
ModelState y se vuelve a la vista:
ModelState.AddModelError(...

ValidateAntiForgeryToken:
Evita cross-site request forgery attacks
Hay que aadir un token a los formularios de
nuestras vistas
Routing
Mapea peticiones del navegador a acciones
del controlador
Hasta MVC4 se definia en en el fichero
RouteConfig
En MVC5 se puede hacer con atributos en el
controlador y acciones
Routing
Ruta por defecto del RouteConfig
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action
= "Index", id = UrlParameter.Optional }
);
http://www.Itteria.cat/Photo/Details/1
Controller: Photo
Action: Details
Id: 1
Routing
Attribute Routing
Facilita sobre escribir el Routing por
defecto
Aadir routes.MapMvcAttributeRoutes();
antes de la ruta por defecto en el
RouteConfig

[Route(Photo/{id}")]
public ActionResult Details(int id)

http://www.Itteria.cat/Photo/1
Controllers

Demo
-Aadir un controlador
-Rutas custom con atributos
-Recibir peticiones y responder a ellas
Views
Son pginas .cshtml que contienen el
HTML devolveremos al navegador
Dentro de las vistas se usa la sintaxis
Razor para usar cdigo C# y
Helpers de MVC
Por ejemplo:
@{ string description = esto es una
prueba; }
<p>Descripcin: @description </p>
Strongly-typed Views
Vinculamos la vista a un modelo.
Al principio de la vista indicamos el tipo
del modelo:
@model
PhotoSharingApp.Models.PhotoViewModel
Cuando renderizamos la vista tenemos
que pasarle un modelo del tipo indicado:
Return View(model);
Accedemos a las propiedades a travs
del objeto Model:
@Model.Title
Model Binding
El ModelBinding es lo que nos permite
trabajar con objetos tipados en las
vistas y el controlador
Por defecto, el controlador busca los
parmetros en la URL (QueryString) o
en el Body (Form data)
Model Binding
http://www.adventureworks.com/photo/getphotobytitle?title=myfirstphoto

DefaultModelBinder

public ActionResult GetPhotoByTitle (string title){

var query = from p in context.Photos
where p.Title == title
select p;
Photo requestedPhoto = (Photo)query.FirstOrDefault();
return View("Details", requestedPhoto);
}
Model Binding
Views HTML Helpers
Se usan para generar cdigo HTML
Podemos crear nuestros prpios HTML
Helpers
Varios tipos:
Action Helpers
Display Helpers
Begin Form Helper
Editor Helpers
Validation Helpers

Views Action Helpers
Html.ActionLink()
@Html.ActionLink("Click here to view photo 1",
"Display", new { id = 1 })

<a href="/photo/display/1">
Click here to view photo 1
</a>

Url.Action()
<img alt="This image came from an action"
src="@Url.Action("GetImage", new { id = 1 })" />

<img
alt="This image came from an action"
src="/photo/getimage/1" })"
/>
Views Display Helpers
Html.DisplayNameFor()

@Html.DisplayNameFor(model => model.CreatedDate)

Created Date

Html.DisplayFor()

@Html.DisplayFor(model => model.CreatedDate)

03/12/2012
Views BeginForm Helper
Html.BeginForm()

@using (Html.BeginForm("Create", "Photo",

FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
@* Place input controls here *@
}

<form action="/Photo/Create" method="post

enctype="multipart/form-data">

</form>

Html.AntiForgeryToken()
Incluye el AntiForgeryToken en nuestro formulario
Views Editor Helpers
Html.LabelFor()
@Html.LabelFor(model => model.ContactMe)

<label for="ContactMe">
Contact Me
</label>

Html.EditorFor()
@Html.EditorFor(model => model.ContactMe)

<input type="checkbox"
name="Description">
Views Validation Helpers
Html.ValidationSummary()
@Html.ValidationSummary()

<ul>
<li>Please enter your last name</li>
<li>Please enter a valid email address</li>
</ul>

Html.ValidationMessageFor ()
@Html.ValidationMessageFor(model => model.Email)

Please enter a valid email address

Views Client-side validations
Se puede configurar MVC para que aplique
las validaciones del modelo en cliente
Incluir los scripts: jquery.validate.min.js y
jquery.validate.unobtrusive.min.js
Activarlo en el web.config:
<appSettings>
<add key="ClientValidationEnabled"
value="true" />
<add key="UnobtrusiveJavaScriptEnabled"
value="true" />
</appSettings>
Views - Layout
Funcionan como Master Pages
Se indica el Layout por defecto en
Views/_ViewStart.cshtml
Puede sobre escribirse el Layout desde
vistas
Para indicar donde renderizar el
contenido de la vista: @RenderBody()
Tambien pueden definirse secciones. Por
ejemplo, para renderizar scripts:
@RenderSection("scripts", required: false)
ViewBag
No es un objeto tipado, sus
propiedades son dinmicas.
No podemos hacer uso de intellisense
til para pasar parmetros de la vista
al Layout
<h2>@ViewBag.Title.</h2>
Bundling and minification
Se usan para mejorar el tiempo de carga
Bundling: Combina diversos ficheros CSS / JS en
uno solo, reduciendo el numero de peticiones
Se crean en la classe BundleConfig
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));

Y se llaman desde la vistes:

@Scripts.Render("~/bundles/bootstrap")

La minificacin se activa:
Indicando false en el parametro debug del web.config
Con el siguiente codigo en BundleConfig:
BundleTable.EnableOptimizations = true;
Views

Demo
-Bundles
-Layout
-Crear vistas Display,
Delete, Index y Create
 Lab
Registrar usuarios
Cada usuario tiene los campos:
Nombre
Contrasenya (longitude max: 100, minima: 6)
Confirmar contrasenya
Para insertar usuarios usar:
Membership.CreateUser(model.UserName, model.Password)