This document introduces ASP.NET MVC, which implements the model-view-controller pattern. It discusses MVC applications, models, controllers, and views. Models encapsulate data and logic. Controllers handle user input and interface with models and views. Views generate the user interface. HTML helpers like forms, labels, and validation are used in views.

1. Introducción
ASP.NET MVC.
Mauricio Alfonso Prieto

2. Contenido
▪ Que es MVC.
▪ ASP.NET MVC.
▪ Web Pages Applications
▪ Web Forms Applications.
▪ MVC Applications.
▪ MVC Models (Entity Framework).
▪ MVC Controllers.
▪ MVC Views.

3. 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).

4. Browser
Controller
View Model
Database
Web Server HTTP
SQL
Modelos, Vistas y Controladores

5. ▪ 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>
}

6. 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

7. 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

8. MVC Models

9. 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; }
}

10. 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; }
}

11. 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; }
}

12. Acceso a datos en modelos y repositorios
Model
Database
Model
Database
Repository

13. MVC Controller

14. ▪ 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 :

15. 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

16. 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

17. MVC Views

18. 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>
}

19. 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
( ) .

20. HTML Helpers
▪ Action Helpers
▪ Display Helpers
▪ The Begin Form Helper
▪ Editor Helpers
▪ Validation Helpers

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

22. Display Helpers
• Html.DisplayNameFor()
• Html.DisplayFor()
@Html.DisplayNameFor(model => model.CreatedDate)
@Html.DisplayFor(model => model.CreatedDate)
Created Date
03/12/2012

23. 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>

24. 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">

25. 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