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

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

<% If(MyVar == S) {%>

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 ->
Class y le ponemos el nombre ClienteModels y seleccionamos Add para terminar, luego
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:
Vemos como nos queda nuestro modelo ya creado:

Para terminar con nuestra clase, vamos a crear nuestras propiedades de la siguiente manera:
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 poder
agregar 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")]
public string Nombre { get; set; }

El atributo Required indica que el campo es Requerido u obligatorio, dentro de este tenemos el
parmetro 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.
 El atributo Display con el parmetro Name que nos indica el nombre que se mostrara en las
vistas.

Vemos como nos queda nuestra clase con estos atributos:

namespace CursoMvc.Models
{
public class ClienteModels
{
[Required(ErrorMessage = "Campo id requerido")]
public int Id { get; set; }

[Required(ErrorMessage="Campo nombre requerido")]

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

[Required(ErrorMessage = "Campo apellido requerido")]

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

[Required(ErrorMessage = "Campo sexo requerido")]

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

[Required(ErrorMessage = "Campo fecha de nacimiento requerido")]

[DataType(DataType.Date,ErrorMessage="Fecha Incorrecta")]
[Display(Name = "Fecha de Nacimiento")]
public DateTime FechaNacimiento { get; set; }
}
}

Controladores (Cotrollers):

En este apartado vamos a crear nuestro primero controlador, esta gracias a Visual Studio es una
tarea bastante sencilla, empezamos por hacer click con el botn derecho del mouse en la carpeta
Controllers, luego hacemos Add - > Controller, esto nos va a abr el siguiente cuadro de
dialogo:
Ingresamos el nombre del controlador, en mi caso Clientes y como ya habamos mencionado todo
los controladores deben terminar con la palabra Controller, por ultimo seleccionamos en
Template 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 crea
todos los mtodos totalmente funcionales) por ultimo le damos Add y nos crear el siguiente
cdigo:

namespace CursoMvc.Controllers
{
public class ClientesController : Controller
{
//
// GET: /Clientes/

public ActionResult Index()

{
return View();
}

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

public ActionResult Details(int id)

{
return View();
}

//
// GET: /Clientes/Create

public ActionResult Create()

{
 return View();
}

//
// POST: /Clientes/Create

[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here

return RedirectToAction("Index");
}
catch
{
return View();
}
}

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

public ActionResult Edit(int id)

{
return View();
}

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

[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here

return RedirectToAction("Index");
}
catch
{
return View();
}
}

//
// GET: /Clientes/Delete/5

public ActionResult Delete(int id)

{
return View();
}

//
// POST: /Clientes/Delete/5
 [HttpPost]
public ActionResult 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 el
mtodo Index que 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 los
FormCollection collection por nuestro modelo en todos los POST de la siguiente forma
(agregar using CursoMvc.Models):

[HttpPost]
public ActionResult Create(ClienteModels model)

[HttpPost]
public ActionResult Edit(ClienteModels model)

[HttpPost]
public ActionResult 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 que
toma MVC 3 para devolver datos.

Por otra parte los tipos de retorno ms utilizados son ActionResult que es el ms general y
aceptar cualquier tipo de devolucin, ya sea JSON, VIEW o CONTENT, los otros tipos disponibles
serian JsonResult utilizado para cuando devolvemos un objeto JSON mayormente por llamadas
desde Jquery.ajax , ViewResult para cuando devolvemos una vista y Content que lo utilizamos
para 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 ms
utilizaremos son ActionResult y JsonResult.

Una vez realizadas las aclaraciones vamos a crear la vista para por ejemplo el create de la siguiente
forma:
Posicinate sobre el mtodo Create, realiza click con el botn derecho del mouse y presiona el
men Add View

Nos aparecer el siguiente cuadro para seleccionar nuestras opciones:

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

La vista se debe llamar igual que el mtodo, es por esto que por default nos puso Create, luego
vamos a seleccionar nuestro motor de vista, en este caso Razor, seguido seleccionamos la opcin
Create a strongly-typed view para que nos cree una vista tipificada con un modelo, debajo de
esta 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 se
explicara ms adelante) en el segundo seleccionamos nuestro Layout luego clickeamos en la
opcin 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 si
hiciramos lo mismo para el mtodo Edit de este mismo controlador, nos agregara el archivo /
Vista Edit.cshtml en nuestra carpeta Clientes.
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";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>ClienteModels</legend>

<div class="editor-label">
@Html.LabelFor(model => model.Nombre)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Nombre)
@Html.ValidationMessageFor(model => model.Nombre)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Apellido)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Apellido)
@Html.ValidationMessageFor(model => model.Apellido)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Sexo)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Sexo)
@Html.ValidationMessageFor(model => model.Sexo)
 </div>

<div class="editor-label">
@Html.LabelFor(model => model.FechaNacimiento)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FechaNacimiento)
@Html.ValidationMessageFor(model => model.FechaNacimiento)
</div>

<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

Vistas (Views):

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

Hay muchas herramientas que facilitan el trabajo de presentacin, por el lado de software libre o
gratis tenemos Jquery UI (http://jqueryui.com/), MVCContrib y muchas ms que se encuentran en
internet, 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, luego
vamos 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 y
agregamos un nuevo link debajo de los dos ya existente, de la siguiente forma:

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Mi Vista", "Create", "Clientes")</li>

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:
Ahora hagamos click en el botn Create y veamos que ya tenemos gracias al DataAnnotation
todas o casi todas nuestras validaciones del lado del cliente y los nombres de los Labels gracias al
atributo Display.

Expliquemos un poco la vista:

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

utilizar.

Luego nos encontramos con las siguientes lneas

@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
Asignando un valor a ViewBag.Title le indicamos el texto que va a tener nuestro titulo en las
etiquetas <title>.

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

utilizando.

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

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>

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

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>ClienteModels</legend>

<div class="editor-label">
@Html.LabelFor(model => model.Nombre)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Nombre)
@Html.ValidationMessageFor(model => model.Nombre)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Apellido)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Apellido)
@Html.ValidationMessageFor(model => model.Apellido)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Sexo)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Sexo)
@Html.ValidationMessageFor(model => model.Sexo)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.FechaNacimiento)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FechaNacimiento)
@Html.ValidationMessageFor(model => model.FechaNacimiento)
</div>
 <p>
<input type="submit" value="Create" />
</p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

El @Html

El @Html nos ayuda a crear por medio de expresiones lambda nuestro controles HTML, esto sera
lo mismo que poner <input type="text" id="nombre" /> y tenemos casi todos los controles,
voy a explicar solo como usarlos ya que todos son iguales por ejemplo, supongamos que tenemos
que poner un check, lo haramos de la siguiente forma: @Html.CheckBoxFor(model =>
model.Sexo) suponiendo que Sexo sea de tipo boolean, esto mismo es para todos los controles
HTML 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 todo
nos viene en el modelo que recibimos como parmetro automticamente. sea que dando click
en 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:
Ahora bien vamos a agregar una lnea de cdigo para que si no se cumplen las validaciones del
modelo, podamos devolver un error, para esto es simplemente arreglar lo siguiente:

[HttpPost]
public ActionResult 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 la
llamada a un insert o a un proyecto que haga el correspondiente insert tal y como lo haramos en
cualquier proyecto, en este caso solo vamos a guardar los datos en un archivo de la siguiente
forma:
Y aqu tenemos el resultado:

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

Para crear una grilla no hay ms que ir nuestro controlador, hacer click con el botn derecho y
agregar 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.
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<CursoMvc.Models.ClienteModels>

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

<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Nombre
</th>
<th>
Apellido
</th>
<th>
Sexo
</th>
<th>
FechaNacimiento
</th>
<th></th>
</tr>

@foreach (var item in Model) {

<tr>
<td>
@Html.DisplayFor(modelItem => item.Nombre)
</td>
<td>
@Html.DisplayFor(modelItem => item.Apellido)
</td>
<td>
@Html.DisplayFor(modelItem => item.Sexo)
</td>
<td>
@Html.DisplayFor(modelItem => item.FechaNacimiento)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}

</table>

Nos quedara ahora pasarle el modelo, esto lo vamos a hacer de la siguiente forma:
Agregamos un link a nuestra pgina en el layout:

<li>@Html.ActionLink("Home", "Index", "Home")</li>

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

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 como
Devolver JsonResult y ViewResult.