Introducción ASP.NET MVC.Mauricio Alfonso Prieto

Contenido

▪ Que es MVC.

▪ ASP.NET MVC.

▪ Web Pages Applications

▪ Web Forms Applications.

▪ MVC Applications.

▪ MVC Models (Entity Framework).

▪ MVC Controllers.

▪ MVC Views.

Modelo–vista–controlador

▪ El modelo–vista–controlador (MVC) es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones.

ASP.NET MVC

▪ El ASP.NET MVC Framework es un framework de aplicaciones web que implementa el patrón modelo-vista-controlador (MVC).

Browser

Controller

View ModelDatabase

Web Server HTTP

SQL

Modelos, Vistas y Controladores

▪ Web Matrix ó Visual Studio

▪ Código en archivos .CSHTML (.VBHTML) *Razor

▪ Control Preciso del HTML

Web Pages Applications

<h2>Special Offers</h2><p>Get the best possible value on Northwind specialty foods by taking advantage of these offers:</p> @foreach (var item in offers) { <div class="offer-card"> <div class="offer-picture"> @if (!String.IsNullOrEmpty(item.PhotoUrl)){ <img src="@Href(item.PhotoUrl) alt="@item.Title" /> } </div> </div> }

Web Forms Applications

▪ Unicamente Visual Studio

▪ Código en archivos .aspx y archivos code-behind **

▪ Crear una interfaz de usuario arrastrando los controles en una página

▪ Controles proporcionan muchas propiedades y eventos

▪ Bind controls para data

MVC Applications

▪ Modelos encapsulan objetos y datos

▪ Vistas generan la interfaz de usuario

▪ Controladores interactúan con las acciones del usuario

▪ Sólo Visual Studio

▪ Código en archivos .cshtml y .cs

▪ El control preciso de HTML y direcciones URL

MVC Models

Desarrollando Modelos

-PhotoID : int-Title : string-PhotoFile : byte-Description : string-CreatedDate : object-Owner : string

Photo

-CommentID : int-User : string-Subject : string-Body : string-PhotoID : int

Comment

1 0..*

public class Photo{ public int PhotoID { get; set; } public string Title { get; set; } public byte[] PhotoFile { get; set; } public string Description { get; set; } public DateTime CreatedDate { get; set; } public string Owner { get; set; } public virtual List<Comment> Comments { get; set; }}

Data Annotations

public class Photo{ // other properties excluded [DisplayName("Picture")] public byte[] PhotoFile { get; set; }

[DataType(DataType.MultilineText)] public string Description { get; set; }

[DataType(DataType.DateTime)] [DisplayName("Created Date")] [DisplayFormat(DataFormatString = "{0:dd/MM/yy}"] public DateTime CreatedDate { get; set; }}

Validaciones de usuario con Data Annotations

public class Person{ public int PersonID { get; set; }

[Required(ErrorMessage="Please enter a name.")] public string Name { get; set; }

[Range(0, 400)] public int Height { get; set; }

[Required] [DataType(DataType.EmailAddress)] public string EmailAddress { get; set; } }

Acceso a datos en modelos y repositorios

Model

Database

Model

Database

Repository

MVC Controller

▪ Crear método público

▪ Devuelve una clase que deriva de ActionResult

▪ Agregar parámetros al método

▪ Escribe el código para realizar la operación y devolver el resultado

Escribir una acción de controlador incluye :

public ActionResult GetSessionByTitle(string title){

var query = from s in context.Sessions

where s.Title == title

select s

Photo session = query.FirstOrDefault();

return View("Details", session);

}

http://www.adventureworks.com/session/getsessionbytitle?title=MVC101

DefaultModelBinder

Pasando datos a la Vista

▪ Modelo

▪ Ver (datos )

▪ Inflexible de tipos , puede ser más flexible

▪ Más complejo

▪ ViewBag

▪ Objeto dinámico para el almacenamiento de piezas básicas de información

▪ Alias para ViewData

▪ Perfecto para el envío de mensajes a la vista

▪ Sólo está disponible para que la acción

▪ Redirecciones causar la ViewBag que ser vaciado

▪ TempData

▪ Al igual que el ViewBag , pero también está disponible en la siguiente página

MVC Views

Ejemplo de vista con Razor

@* Some more Razor examples *@

<span>Price including Sale Tax: @Model.Price * 1.2 </span><span>Price including Sale Tax: @(Model.Price * 1.2) </span>

@if (Model.Count > 5){ <ol> @foreach(var item in Model) { <li>@item.Name</li> } </ol>}

Direnenciar código del server desde HTML

▪ Razor identifica el código del lado del servidor , buscando el símbolo @ .

▪ En sintaxis Razor , el símbolo @ tiene varios usos . Usted puede :

▪ Use @ para identificar el lado del servidor de C # código

▪ Use @@para rendir un símbolo @ en una página HTML .

▪ Utilice @ : declarar explícitamente una línea de texto como el contenido y no el código .

▪ Utilice < texto > para declarar explícitamente varias líneas de texto como el contenido y no el código .

▪ Para hacer que el texto sin codificación HTML , puede utilizar el helper Html.Raw ( ) .

HTML Helpers

▪ Action Helpers

▪ Display Helpers

▪ The Begin Form Helper

▪ Editor Helpers

▪ Validation Helpers

Action Helpers

• Html.ActionLink()

• Url.Action()

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

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

<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" })" />

Display Helpers

• Html.DisplayNameFor()

• Html.DisplayFor()

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

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

Created Date

03/12/2012

The Begin Form 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>

Editor Helpers

Html.LabelFor()

Html.EditorFor()

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

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

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

<input type="checkbox" name="Description">

Validation Helpers

Html.ValidationSummary()

Html.ValidationMessageFor()

@Html.ValidationSummary()

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

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

Please enter a valid email address