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 el ao 79 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/2010editions/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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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.

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

Vemos como nos queda nuestro modelo ya creado:

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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.

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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() {

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

[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 (CreateRead-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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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.

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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)

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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"; }

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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>

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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:

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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.

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

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

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

Para explicar cmo crear DropDownList o Select primero vamos a crear un nuevo modelo, Estonces no vamos a nuestra carpeta models nuevamente, botn derecho luego Add y por ultimo seleccionamos Class y le ponemos en nombre DocumentoModels, luego agregamos dos propiedades la primera de tipo Int y la llamamos Id y la segunda de tipo string y la llamamos Descripcion, nos quedara:
namespace CursoMvc.Models { public class DocumentoModels { public int Id { get; set; } public string Descripcion { get; set; } } }

Ahora que ya tenemos nuestro nuevo modelo nos vamos al mtodo Create de tipo GET e insertamos el siguiente cdigo:
public ActionResult Create() { ViewBag.TipoDocumentos = new SelectList(DocumentosList(), "Id", "Descripcion"); return View(); } private IEnumerable<DocumentoModels> DocumentosList() { yield return new DocumentoModels() { Id = 1, Descripcion yield return new DocumentoModels() { Id = 2, Descripcion yield return new DocumentoModels() { Id = 3, Descripcion yield return new DocumentoModels() { Id = 4, Descripcion }

= = = =

"D.N.I" }; "L.E" }; "L.C" }; "PASAPORTE" };

Hasta aqu lo que hicimos fue, creamos un SelectList con el primer parmetro IEnumerable, segundo parmetro el Id del combo y tercer parmetro el texto que se va a mostrar, todo esto lo guardamos en el ViewBag (Clase Dinamica de ASP.NET) para as mostrarlo en nuestra vista. Para atrapar el valor que selecciona el usuario en nuestro modelo, primero vamos a crear la propiedad TipoDocumento de tipo int en nuestro modelo ClienteModels de la siguiente forma:
[Required(ErrorMessage = "Campo Tipo Documento requerido")]

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

[Display(Name = "Tipo Documento")] public int TipoDocumento { get; set; }

Quedando nuestra clase completa de la siguiente forma:

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; } [Required(ErrorMessage = "Campo Tipo Documento requerido")] [Display(Name = "Tipo Documento")] public int TipoDocumento { get; set; } }

Una vez que tenemos nuestra variable cargada y en nuestro modelo una propiedad para capturar el valor seleccionado por el cliente, nos vamos a la vista Create de Clientes y ponemos al final las siguientes lneas de cdigo:
<div class="editor-label"> @Html.LabelFor(model => model.TipoDocumento) </div> <div class="editor-field"> @Html.DropDownListFor(model => model.TipoDocumento, (SelectList)ViewBag.TipoDocumentos, "Seleccione...") @Html.ValidationMessageFor(model => model.TipoDocumento) </div>

Primero le indicamos con model => model.TipoDocumento que el calor seleccionado por el usuario se va a guardar en la propiedad TipoDocumento del modelo, con el segundo parmetro le cargamos los valores a nuestro DropDownList y el tercer parmetro Seleccione es el valor

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

por defecto que nos aparecer en nuestra lista. Simplemente con esto ya tenemos nuestro campo con la lista y validacin. La ViewResult Esta simplemente sirve para indicar que ese mtodo solo puede devolver una vista, la forma de utilizarla es muy simple:
public ViewResult Edit(int id) { return View(); }

Donde indicamos que el mtodo Edit debe devolver un objeto de tipo View o
PartialView.

Devolucin de JSON con JsonResult Para este ejemplo vamos trabajar sobre la vista index, a esta le agregaremos un botn y llamaremos por AJAX de jquery a un mtodo que nos devolver un Hola Mundo!! Nombre: , por ultimo este texto lo pondremos en un div previamente creado, vamos a empezar. Primero vamos a la vista Home/Index que nos creo por defecto:
@{ ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. </p>

Al final de todo agregamos un Button con Id=btnSubmit de la siguiente forma:

<input type="button" id="btSubmit" value="Clickeame!!" />

Debajo de este agregamos un DIV con Id=Mensajes y color Rojo de texto:

<div id="Mensajes" style="color:Red;"></div>

Seguido agregamos un script con el Jquery para hacer la llamada por Ajax de la siguiente forma:
<script type="text/javascript"> $(function () { $("#btSubmit").click(function () { $.ajax({ url: '@Url.Action("DevolverTexto", "Home")',

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

type: "POST", dataType: "json", async: true, data: { 'Nombre': "Rodrigo Mendez" }, success: function (items, responseText) { $("#Mensajes").html(items); }, error: function () { alert('Error...'); } }); }); }); </script>

Y en nuestro HomeCotroller agregamos el mtodo DevolverTexto al cual se est llamando en el parmetro url de nuestro AJAX de la siguiente forma:
public JsonResult DevolverTexto(string Nombre) { return Json("Hola Mundo!! Nombre: " + Nombre, JsonRequestBehavior.AllowGet); }

Expliquemos un poco, para hacer llamadas AJAX Jquery nos facilita la funcin $.ajax que acepta una seria de parmetros, de arriba hacia abajo indicamos:
url: Url que se llamara por medio de AJAX. type: POST o GET dataType: Indica si es JSON o HTML el dato a devolver. async: Indica si el llamado es asincrnico. data: JSON con los parametros que recibe nuestra funcin. success: Si la llamada termino correctamente, se ejecuta este cdigo. $("#Mensajes").html(items) : Esta lnea inserta el json que nos devolvi jquery en el DIV. error: Si la llamada fallo se ejecuta este cdigo.

Con $("#btSubmit").click(function () indicamos que cuendo se haga click en este botn, el cdigo que se ejecutara ser en indicado en la funcin: Por ltimo del lado del servidor le indicamos que nuestro mtodo va a devolver un JSON por medio de JsonResult, con la funcin Json le decimos que serialice el objeto que le pasamos y por ultimo con JsonRequestBehavior.AllowGet le indicamos que se pueden devolver valores ya sea por GET o por POST.

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

Al presionar click, vemos el siguiente resultado:

En el ltimo tema a abordar en este mini curso tenemos las PartialView, estas son una especie de UserControls, para ilustrar su uso vamos a hacerlo sobre esta misma vista. Primero agregamos una PartialView en nuestra carpeta Home dentro de Views de la siguiente forma (botn derecho -> Add -> View):

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

Vemos en la imagen que marcamos la opcin Create as a partial view y le ponemos el nombre UserControl y le damos Add, esto nos crea una vista vacia, le agregamos un control de tipo button que al darle click emitir un mensaje de la siguiente forma:
<input type="button" onclick="javascript:alert('Click desde PartialView')" value="Apreta!!" />

Por ltimo volvemos a nuestra vista index y llamamos a la PartialView que creamos de la siguiente forma:
@Html.Partial("UserControl")

Cdigo completo de la vista Index:

@{ ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> <p>

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/

To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. </p> <input type="button" id="btSubmit" value="Clickeame!!" /> <div id="Mensajes" style="color:Red;"></div> <script type="text/javascript"> $(function () { $("#btSubmit").click(function () { $.ajax({ url: '@Url.Action("DevolverTexto", "Home")', type: "POST", dataType: "json", async: true, data: { 'Nombre': "Rodrigo Mendez" }, success: function (items, responseText) { $("#Mensajes").html(items); }, error: function () { alert('Error...'); } }); }); }); </script> @Html.Partial("UserControl")

Ya con esto nos presenta el botn en todas las pginas desde donde deseamos llamar a este control. Resultado de nuestro UserControl:

Hasta aqu explicamos varios de los conceptos de MVC 3 para poder empezar a programa, espero que les haya servido.

Curso MVC 3 Rodrigo Maximiliano Mendez Lara - http://rodrigomendezlara.blogspot.com.ar/