Introduccion a MVC usando ASP.NET MVC

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