7/31/2019 mvcCurso

1/24

Primero la introduccin:

Para empezar con este curso primero vamos a dar una pequea introduccin a MVC:

MVC significa Model-View-Controller (Modelo-Vista-Controlador), es un modelo nacido en los 80 y

originalmente no estaba pensado para aplicaciones web, los componentes bsicos de este patrn

son:

Modelo: El modelo es lo que normalmente llamaramos Clase en una aplicacin cualquiera, esta

Modela una objeto de la realidad.

Vista: Esta es la presentacin de los datos y no debera tener lgica ms que la que se necesita

para mostrar Modelo que nos llega (aunque a veces es inevitable poner algn @if por all)

Controlador: Este es el que recibe los POST y GET de la aplicacin y el que finalmente tiene la

lgica de la aplicacin (Lgica de negocio).

MVC3:

Ahora bien, teniendo la definicin bsica vamos a adentrarnos en lo que es MVC3 de Microsoft,

para ello vamos a hacer un pequeo proyecto e iremos ilustrando los avances.

Lo primero que haremos en descargar si no tenemos el Visual Studio 2010, SP1 (Service Pack 1) de

Visual Studio 2010 (Opcional) y por ultimo MVC 3 Tools Update desde los siguientes links:

Visual Studio 2010:http://www.microsoft.com/visualstudio/en-us/products/2010-

editions/express

Service Pack 1:http://www.microsoft.com/en-us/download/details.aspx?id=23691

MVC3:http://www.asp.net/mvc/mvc3

Ahora bien, una vez instalado todo vamos a File -> Project y elegimos ASP.NET MVC 3 Web

Application y le ponemos un nombre a nuestro proyecto, en mi caso se llamara CursoMvc

http://www.microsoft.com/visualstudio/en-us/products/2010-editions/expresshttp://www.microsoft.com/visualstudio/en-us/products/2010-editions/expresshttp://www.microsoft.com/visualstudio/en-us/products/2010-editions/expresshttp://www.microsoft.com/visualstudio/en-us/products/2010-editions/expresshttp://www.microsoft.com/en-us/download/details.aspx?id=23691http://www.microsoft.com/en-us/download/details.aspx?id=23691http://www.microsoft.com/en-us/download/details.aspx?id=23691http://www.asp.net/mvc/mvc3http://www.asp.net/mvc/mvc3http://www.asp.net/mvc/mvc3http://www.asp.net/mvc/mvc3http://www.microsoft.com/en-us/download/details.aspx?id=23691http://www.microsoft.com/visualstudio/en-us/products/2010-editions/expresshttp://www.microsoft.com/visualstudio/en-us/products/2010-editions/express

7/31/2019 mvcCurso

2/24

Le damos OK, vamos a la siguiente pantalla, elegimos Internet Application, en View Engine

seleccionamos Razor (Este ser nuestro motor de vista) y por ultimo marcamos Use HTML5

semantic markup de la siguiente manera:

7/31/2019 mvcCurso

3/24

Ahora si al darle OK nos creara un proyecto nuevo, vamos a ver un poquito como estn

distribuidos estos proyectos:

Primero veamos una imagen de la estructura y luego la explicacin de la misma:

7/31/2019 mvcCurso

4/24

Esta es la estructura bsica de nuestro proyecto, de arriba para abajo las carpetas que nos

aparecen son:

Contents: En esta carpeta van todos los archivos que son Suplementarios para nuestra aplicacin

como por ejemplo archivos CSS, HTML bsicos, imgenes, etc.

Luego nos encontramos con la carpeta Controllers: En esta encontramos los controladores que

como ya explicamos es donde se encentra la toda o parte de la lgica de nuestra aplicacin por

convencin estos archivos son clases que tienen que terminar con el nombre Controller, por

ejemplo PersonasController.

Seguido nos encontramos con la carpeta Models: Aqu encontramos nuestros modelos o clases,

por convencin deberas terminar con la palabra Models aunque estos no es absolutamente

necesario.

7/31/2019 mvcCurso

5/24

Luego nos encontramos con la carpeta Script: En esta nos encontramos con los Scripts de nuestra

aplicacin, es su gran mayora suelen ser Javascript y Jquery siendo este ultimo muy utilizados en

los proyectos MVC 3.

Por ltimo tenemos la carpeta Views: aqu encontramos las vistas separadas cada una en las

diferentes carpetas de acuerdo al de los controladores.

Dento de la carpeta Views se destaca la carpeta Shared: Aqu encontramos todos los archivos que

comparten las vistas, como por ejemplo el archivo _Layout (Master) o PartialViews que se

compartan en la aplicacin.

El motor de vista:

El motor de vista Razor es el que nos facilita la presentacin de los datos que vienen del

controlador, aqu tenemos dos tipos de motores, el clsico de ASP y Razor la gran diferencia es

que las vistas realizadas en Razor son mucho ms limpias y entendibles por ejemplo, el siguiente

cdigo es el correspondiente a un IF con el motor de ASP:

Algo

En cambio con Razor esta misma sentencia no quedara:

@if(MyVar == S){

Algo

}

Aqu nos damos cuenta que el motor Razor es lo suficientemente inteligente para darse cuenta

cuando termina una instruccin luego de haberla comenzado con un @.

Esto no quiere decir que no se pueda usar el motos ASP clsico, simplemente que este es menos

inteligente que Razor.

Nuestro Modelo:

Los modelos son clases, estos reflejan un objeto de la realidad.

Para hacer las cosas lo ms rpido posible deberamos crear primero el modelo, para hacer esto

hacemos click con el botn derecho del mouse sobre la carpeta Models y seleccionamos Add ->

Classy le ponemos el nombre ClienteModelsy seleccionamos Add para terminar, luego

7/31/2019 mvcCurso

6/24

vamos a crear nuestras propiedades y por ultimo le agregaremos el DataAnnotation para agregar

todas las validaciones necesarias. Vamos a ver como se hace esto:

7/31/2019 mvcCurso

7/24

Vemos como nos queda nuestro modelo ya creado:

Para terminar con nuestra clase, vamos a crear nuestras propiedades de la siguiente manera:

7/31/2019 mvcCurso

8/24

As nos queda nuestro modelo, antes de continuar con este curso vamos a explicar que es y para

qu sirve DataAnnotation.

DataAnnotation (System.ComponentModel.DataAnnotations)

Esta es una forma de crear validaciones para que funcionen y se muestren del lado del cliente,

utilizando estos atributos y algunos script podemos hacer que con muy poco cdigo tengamos

solucionada gran parte de las validaciones.

Veamos como creamos nuestras primeras validaciones:

Primero vamos a volver a nuestro modelo y le agregaremos un using a

System.ComponentModel.DataAnnotations de la siguiente forma:

using System.ComponentModel.DataAnnotations;

Una vez puesta esta referencia vamos a tener varios atributos que viene con MVC para poderagregar la validacin, veamos los ms importantes, para eso usaremos la propiedad Nombre:

[Required(ErrorMessage="Campo nombre requerido")][DataType(DataType.Text,ErrorMessage="Dato invlido")][StringLength(50,ErrorMessage="Campo nombre demasiado largo")][Display(Name="Nombre")]publicstring Nombre { get; set; }

El atributo Required indica que el campo es Requerido u obligatorio, dentro de este tenemos elparmetro ErrorMessage que nos indica cual ser en mensaje de error que nos dar cuando este

no se cumpla.

El atributo DataType nos indica el tipo de dato que contendr este campo.

El atributo StringLength que nos indica la cantidad de caracteres mximos y mnimos si se

quiere de una propiedad.

7/31/2019 mvcCurso

9/24

El atributo Display con el parmetro Name que nos indica el nombre que se mostrara en lasvistas.

Vemos como nos queda nuestra clase con estos atributos:

namespace CursoMvc.Models

{publicclassClienteModels{

[Required(ErrorMessage = "Campo id requerido")]publicint Id { get; set; }

[Required(ErrorMessage="Campo nombre requerido")][DataType(DataType.Text,ErrorMessage="Dato invlido")][StringLength(50,ErrorMessage="Campo nombre demasiado largo")][Display(Name="Nombre")]publicstring Nombre { get; set; }

[Required(ErrorMessage = "Campo apellido requerido")][DataType(DataType.Text)][StringLength(50, ErrorMessage = "Campo apellido demasiado largo")][Display(Name = "Apellido")]publicstring Apellido { get; set; }

[Required(ErrorMessage = "Campo sexo requerido")][DataType(DataType.Text)][StringLength(50, ErrorMessage = "Campo sexo demasiado largo")][Display(Name = "Sexo")]publicstring Sexo { get; set; }

[Required(ErrorMessage = "Campo fecha de nacimiento requerido")][DataType(DataType.Date,ErrorMessage="Fecha Incorrecta")][Display(Name = "Fecha de Nacimiento")]

publicDateTime FechaNacimiento { get; set; }}}

Controladores (Cotrollers):

En este apartado vamos a crear nuestro primero controlador, esta gracias a Visual Studio es unatarea bastante sencilla, empezamos por hacer click con el botn derecho del mouse en la carpetaControllers, luego hacemos Add - > Controller, esto nos va a abr el siguiente cuadro dedialogo:

7/31/2019 mvcCurso

10/24

Ingresamos el nombre del controlador, en mi caso Clientes y como ya habamos mencionado todolos controladores deben terminar con la palabra Controller, por ultimo seleccionamos enTemplate la opcin controller with empty read/write actions para que nos cree lo mtodos

GET y POST vacios y ahorrarnos de escribir (Si estuviera hecho con EntityFramework nos creatodos los mtodos totalmente funcionales) por ultimo le damos Add y nos crear el siguientecdigo:

namespace CursoMvc.Controllers

{ publicclassClientesController : Controller{

//// GET: /Clientes/

publicActionResult Index(){

return View();}

//// GET: /Clientes/Details/5

publicActionResult Details(int id){

return View();}

//// GET: /Clientes/Create

publicActionResult Create(){

7/31/2019 mvcCurso

11/24

return View();}

//// POST: /Clientes/Create

[HttpPost]

publicActionResult Create(FormCollection collection){

try{

// TODO: Add insert logic here

return RedirectToAction("Index");}catch{

return View();}

}

//// GET: /Clientes/Edit/5

publicActionResult Edit(int id){

return View();}

//// POST: /Clientes/Edit/5

[HttpPost]publicActionResult Edit(int id, FormCollection collection)

{ try{

// TODO: Add update logic here

return RedirectToAction("Index");}catch{

return View();}

}

//

// GET: /Clientes/Delete/5

publicActionResult Delete(int id){

return View();}

//// POST: /Clientes/Delete/5

7/31/2019 mvcCurso

12/24

[HttpPost]publicActionResult Delete(int id, FormCollection collection){

try{

// TODO: Add delete logic here

return RedirectToAction("Index");}catch{

return View();}

}}

}

Vamos a explicar un poco lo que estamos viendo, con lo primero que nos encontramos es con elmtodo Indexque al no tener ningn atributo como por ejemplo [HttpPost] adornando este

mtodo significa que es de tipo GET. Index es el primer mtodo que se busca por Default en

cualquier controlador.Mirando un poco el controlador nos damos cuenta que nos genero los mtodos CRUD (Create-Read-Update-Delete) vacios, esto nos facilita un poco el trabajo, vamos a cambiar todos losFormCollectioncollection por nuestro modelo en todos los POST de la siguiente forma(agregar using CursoMvc.Models):

[HttpPost]publicActionResult Create(ClienteModels model)

[HttpPost]

publicActionResult Edit(ClienteModels model)

[HttpPost]publicActionResult Delete(ClienteModels model)

Dentro de las formas de realizar la devolucin de datos tenemos[HttpPut], [HttpPost] y[HttpDelete], de esta la que mayormente se utiliza es [HttpPost] ya que es por defecto la quetoma MVC 3 para devolver datos.

Por otra parte los tipos de retorno ms utilizados son ActionResult que es el ms general yaceptar cualquier tipo de devolucin, ya sea JSON, VIEW o CONTENT, los otros tipos disponiblesserian JsonResult utilizado para cuando devolvemos un objeto JSON mayormente por llamadas

desde Jquery.ajax , ViewResult para cuando devolvemos una vistay Content que lo utilizamospara devolver un string que luego puede ser parseado como HTML.

A lo largo de este curso voy a ilustrar como se utilizan los cuatro tipos, pero los que msutilizaremos son ActionResulty JsonResult.

Una vez realizadas las aclaraciones vamos a crear la vista para por ejemplo el create de la siguienteforma:

7/31/2019 mvcCurso

13/24

Posicinate sobre el mtodo Create, realiza click con el botn derecho del mouse y presiona elmen Add View

Nos aparecer el siguiente cuadro para seleccionar nuestras opciones:

7/31/2019 mvcCurso

14/24

Nota: Si no aparece el modelo ClientesModels es porque hay que hacer un Build del proyectoprimero.

La vista se debe llamar igual que el mtodo, es por esto que por default nos puso Create, luegovamos a seleccionar nuestro motor de vista, en este caso Razor, seguido seleccionamos la opcinCreate a strongly-typed view para que nos cree una vista tipificada con un modelo, debajo deesta opcin nos encontramos con Model class, aqu es donde se selecciona cual es el modelo

con el que se va a estar trabajando, en mi caso ClientesModels.Por ltimo tenemos las opciones Create as a partial view y Use a layout or master page el

primero lo vamos a dejar sin marcar ya que nuestra vista actual no es parcial (PartialView seexplicara ms adelante) en el segundo seleccionamos nuestro Layout luego clickeamos en laopcin Reference script libraries y por ultimo le ponemos en Scaffold template la opcin

Create para que use la plantilla que ya viene con MVC, le damos Add y nos creara la carpeta

Clientes con la vista Createdentro de las Views (Carpeta Views).

As es como maneja MVC 3 las vistas y su correspondiente controlador, esto quiere decir que sihiciramos lo mismo para el mtodo Edit de este mismo controlador, nos agregara el archivo /

Vista Edit.cshtml en nuestra carpeta Clientes.

7/31/2019 mvcCurso

15/24

Se genero en nuestra carpeta View la nueva vista quedando as:

Ahora si vemos como nos quedo la vista:

@model CursoMvc.Models.ClienteModels

@{ViewBag.Title = "Create";

Layout = "~/Views/Shared/_Layout.cshtml";}

Create

@using (Html.BeginForm()) {@Html.ValidationSummary(true)

ClienteModels

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

@Html.EditorFor(model => model.Nombre)@Html.ValidationMessageFor(model => model.Nombre)

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

@Html.EditorFor(model => model.Apellido)@Html.ValidationMessageFor(model => model.Apellido)

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

@Html.EditorFor(model => model.Sexo)@Html.ValidationMessageFor(model => model.Sexo)

7/31/2019 mvcCurso

16/24

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

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

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

}

@Html.ActionLink("Back to List", "Index")

Vistas (Views):

Las vistas por definicin tienen solo la lgica de presentacin, siendo estar las encargadas demostrar los datos al usuario final.

Hay muchas herramientas que facilitan el trabajo de presentacin, por el lado de software libre ogratis tenemos Jquery UI (http://jqueryui.com/), MVCContrib y muchas ms que se encuentran eninternet, por el lado de software pago nos encontramos por ejemplo con Telerik para MVC(http://www.telerik.com/products/aspnet-mvc.aspx).

Nosotros primero vamos a terminar de explicar la vista que creamos en el punto anterior, luegovamos a ver como se crea de forma fcil y rpida una grilla.

Si vemos lo que nos creo MVC nos damos cuenta que ya tenemos gran parte del trabajo realizado,vamos a agregar un link y ver que nos genero.Para esto abrimos el archivo (Master)_Layout.cshtml que se encuentra en Views -> Shared yagregamos un nuevo link debajo de los dos ya existente, de la siguiente forma:

@Html.ActionLink("Home", "Index", "Home")@Html.ActionLink("About", "About", "Home")@Html.ActionLink("Mi Vista", "Create", "Clientes")

Ejecutamos el cdigo y le damos click al link que dice Mi Vista y vemos como nos creo todo el

formulario casi sin hacer trabajo:

http://jqueryui.com/http://jqueryui.com/http://jqueryui.com/http://www.telerik.com/products/aspnet-mvc.aspxhttp://www.telerik.com/products/aspnet-mvc.aspxhttp://www.telerik.com/products/aspnet-mvc.aspxhttp://www.telerik.com/products/aspnet-mvc.aspxhttp://jqueryui.com/

7/31/2019 mvcCurso

17/24

Ahora hagamos click en el botn Create y veamos que ya tenemos gracias al DataAnnotationtodas o casi todas nuestras validaciones del lado del cliente y los nombres de los Labels gracias alatributo Display.

Expliquemos un poco la vista:

La lnea @model CursoMvc.Models.ClienteModels nos indica cual es el modelo que vamos autilizar.

Luego nos encontramos con las siguientes lneas

@{ViewBag.Title = "Create";Layout = "~/Views/Shared/_Layout.cshtml" ;

}

7/31/2019 mvcCurso

18/24

Asignando un valor a ViewBag.Title le indicamos el texto que va a tener nuestro titulo en lasetiquetas .

Lnea: Layout = "~/Views/Shared/_Layout.cshtml" ; Nos indica que layout o master estamosutilizando.

Luego tenemos la referencia a los script de la siguiente forma:

Por lo ltimo nos vamos a encontrar con la creacin del formulario y de los campos utilizando elHtmlHelper de la siguiente forma:

@using (Html.BeginForm()) {@Html.ValidationSummary(true)

ClienteModels

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

@Html.EditorFor(model => model.Nombre)@Html.ValidationMessageFor(model => model.Nombre)

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

@Html.EditorFor(model => model.Apellido)@Html.ValidationMessageFor(model => model.Apellido)

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

@Html.EditorFor(model => model.Sexo)@Html.ValidationMessageFor(model => model.Sexo)

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

@Html.EditorFor(model => model.FechaNacimiento)@Html.ValidationMessageFor(model => model.FechaNacimiento)

7/31/2019 mvcCurso

19/24

}

@Html.ActionLink("Back to List", "Index")

El @Html

El @Html nos ayuda a crear por medio de expresiones lambda nuestro controles HTML, esto seralo mismo que poner y tenemos casi todos los controles,voy a explicar solo como usarlos ya que todos son iguales por ejemplo, supongamos que tenemosque poner un check, lo haramos de la siguiente forma: @Html.CheckBoxFor(model =>model.Sexo) suponiendo que Sexo sea de tipoboolean, esto mismo es para todos los controlesHTML que se nos ocurra (Menos los Select). Entonces la manera de usarlos es model=>model.Sexo que nos indica Crea un control X para el campo Sexo del modelo (model se puede

reemplazar por cualquier variable PJ: x => x.Sexo).

Con esto ya estamos en condiciones de trabajar nuestros datos del lado del servidor ya que todonos viene en el modelo que recibimos como parmetro automticamente. sea que dando clicken Create nuestro modelo se llena automticamente y se enva al mtodo Create que contiene

el atributo [HttpPost].

Bueno, pongamos unos datos en nuestra pgina y presionamos Create de la siguiente forma:

Y vemos del lado de servidor como nos devuelve los datos ya cargados en el modelo:

7/31/2019 mvcCurso

20/24

Ahora bien vamos a agregar una lnea de cdigo para que si no se cumplen las validaciones delmodelo, podamos devolver un error, para esto es simplemente arreglar lo siguiente:

[HttpPost]publicActionResult Create(ClienteModels model){

try{

if (!ModelState.IsValid){

return View();}

return RedirectToAction("Index");}catch{

return View();}

}

Ahora bien, para terminar luego del siguiente de la validacin del modelo hay que agregar lallamada a un insert o a un proyecto que haga el correspondiente insert tal y como lo haramos encualquier proyecto, en este caso solo vamos a guardar los datos en un archivo de la siguienteforma:

7/31/2019 mvcCurso

21/24

7/31/2019 mvcCurso

22/24

Y aqu tenemos el resultado:

Hay dos temas que nos quedan ver primero como creamos un grilla y segundo como usamos lasvistas parciales.

Para crear una grilla no hay ms que ir nuestro controlador, hacer click con el botn derecho yagregar una nueva vista tal y como lo hicimos la primera vez pero con las siguientes opciones,veamos que le pusimos en Scaffold template que le pusimos List , esto es para que nos cree un

table y nos muestre la grilla.

7/31/2019 mvcCurso

23/24

Una vez que le damos Add nos crea la vista con nuestra grilla a la cual solo hay que pasarle el

model que nos indica arriba, veamos el cdigo:

@model IEnumerable

@{

ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}

Index

@Html.ActionLink("Create New", "Create")

Nombre

Apellido

Sexo

FechaNacimiento

@foreach (var item in Model) {

@Html.DisplayFor(modelItem => item.Nombre)

@Html.DisplayFor(modelItem => item.Apellido)

@Html.DisplayFor(modelItem => item.Sexo)

@Html.DisplayFor(modelItem => item.FechaNacimiento)

@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |@Html.ActionLink("Details", "Details", new { id=item.Id }) |@Html.ActionLink("Delete", "Delete", new { id=item.Id })

}

Nos quedara ahora pasarle el modelo, esto lo vamos a hacer de la siguiente forma:

7/31/2019 mvcCurso

24/24

Agregamos un link a nuestra pgina en el layout:

@Html.ActionLink("Home", "Index", "Home")@Html.ActionLink("About", "About", "Home")@Html.ActionLink("Mi Vista", "Create", "Clientes")@Html.ActionLink("Grilla", "Index", "Clientes")

Ejecutamos y apretamos sobre el nuevo men llamado Grilla y nos queda nuestra pgina:

Hasta aqu la primera parte del curso, en la segunda parte vamos a ver las PartialView y comoDevolver JsonResult y ViewResult.