cursomvc3

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

Primero la introducción:

Para empezar con este curso primero vamos a dar una pequeña introducción a MVC:

MVC significa Model-View-Controller (Modelo-Vista-Controlador), es un modelo nacido en el año

79 y originalmente no estaba pensado para aplicaciones web, los componentes básicos de este

patrón son:

Modelo: El modelo es lo que normalmente llamaríamos Clase en una aplicación cualquiera, esta

“Modela” una objeto de la realidad.

Vista: Esta es la presentación de los datos y no debería tener lógica más que la que se necesita

para mostrar Modelo que nos llega (aunque a veces es inevitable poner algún @if por allí)

Controlador: Este es el que recibe los POST y GET de la aplicación y el que finalmente tiene la

lógica de la aplicación (Lógica de negocio).

MVC3:

Ahora bien, teniendo la definición básica vamos a adentrarnos en lo que es MVC3 de Microsoft,

para ello vamos a hacer un pequeño 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/express

http://www.microsoft.com/visualstudio/en-us/products/2010-editions/express

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

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


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 están

distribuidos estos proyectos:

Primero veamos una imagen de la estructura y luego la explicación de la misma:


Esta es la estructura básica 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 aplicación

como por ejemplo archivos CSS, HTML básicos, imágenes, 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 lógica de nuestra aplicación por

convención 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 convención deberías 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

aplicación, es su gran mayoría 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 aplicación.

El motor de vista:

El motor de vista Razor es el que nos facilita la presentación de los datos que vienen del

controlador, aquí tenemos dos tipos de motores, el clásico de ASP y Razor la gran diferencia es

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

código es el correspondiente a un IF con el motor de ASP:

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

Algo…

<%}%>

En cambio con Razor esta misma sentencia no quedaría:

@if(MyVar == “S”){

Algo…

}

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

cuando termina una instrucción luego de haberla comenzado con un @.

Esto no quiere decir que no se pueda usar el motos ASP clásico, 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 más rápido posible deberíamos crear primero el modelo, para hacer esto

hacemos click con el botón 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 código 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 validación, veamos los más importantes, para eso usaremos la propiedad Nombre: [Required(ErrorMessage="Campo nombre requerido")] [DataType(DataType.Text,ErrorMessage="Dato inválido")] [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 parámetro “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 máximos y mínimos si se quiere de una propiedad.


El atributo “Display” con el parámetro “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 inválido")] [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 botón 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 habíamos mencionado todo los controladores deben terminar con la palabra Controller, por ultimo seleccionamos en “Template” la opción “controller with empty read/write actions” para que nos cree lo métodos GET y POST vacios y ahorrarnos de escribir (Si estuviera hecho con EntityFramework nos crea todos los métodos totalmente funcionales) por ultimo le damos “Add” y nos crear el siguiente código: 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 método “Index” que al no tener ningún atributo como por ejemplo “[HttpPost]” adornando este método significa que es de tipo GET. “Index” es el primer método que se busca por Default en cualquier controlador. Mirando un poco el controlador nos damos cuenta que nos genero los métodos 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 devolución 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 más utilizados son “ActionResult” que es el más general y aceptar cualquier tipo de devolución, 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 más utilizaremos son “ActionResult” y “JsonResult”. Una vez realizadas las aclaraciones vamos a crear la vista para por ejemplo el create de la siguiente forma:


Posiciónate sobre el método Create, realiza click con el botón 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 método, es por esto que por default nos puso Create, luego vamos a seleccionar nuestro motor de vista, en este caso Razor, seguido seleccionamos la opción “Create a strongly-typed view” para que nos cree una vista tipificada con un modelo, debajo de esta opción 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 más adelante) en el segundo seleccionamos nuestro Layout luego clickeamos en la opción “Reference script libraries” y por ultimo le ponemos en “Scaffold template” la opción “Create” para que use la plantilla que ya viene con MVC, le damos “Add” y nos creara la carpeta “Clientes” con la vista “Create“dentro de las Views (Carpeta Views). Así es como maneja MVC 3 las vistas y su correspondiente controlador, esto quiere decir que si hiciéramos lo mismo para el método “Edit” de este mismo controlador, nos agregaría 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 definición tienen solo la lógica de presentación, siendo estar las encargadas de mostrar los datos al usuario final. Hay muchas herramientas que facilitan el trabajo de presentación, por el lado de software libre o gratis tenemos Jquery UI (http://jqueryui.com/), MVCContrib y muchas más 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 fácil y rápida 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 código 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://www.telerik.com/products/aspnet-mvc.aspx


Ahora hagamos click en el botón “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 línea @model CursoMvc.Models.ClienteModels nos indica cual es el modelo que vamos a utilizar. Luego nos encontramos con las siguientes líneas @{ 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>. Línea: 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 creación 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 sería 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 haríamos 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 parámetro automáticamente. Ósea que dando click en “Create” nuestro modelo se llena automáticamente y se envía al método “Create” que contiene el atributo [HttpPost].

Bueno, pongamos unos datos en nuestra página 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 línea de código 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 validación del modelo hay que agregar la llamada a un insert o a un proyecto que haga el correspondiente insert tal y como lo haríamos 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 más que ir nuestro controlador, hacer click con el botón 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 código: @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 quedaría ahora pasarle el modelo, esto lo vamos a hacer de la siguiente forma:

Agregamos un link a nuestra página 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 página:


Para explicar cómo crear “DropDownList” o “Select” primero vamos a crear un nuevo modelo, Estonces no vamos a nuestra carpeta models nuevamente, botón 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 quedaría: 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 método Create de tipo GET e insertamos el siguiente código: public ActionResult Create() { ViewBag.TipoDocumentos = new SelectList(DocumentosList(), "Id", "Descripcion"); return View(); } private IEnumerable<DocumentoModels> DocumentosList() {

yield return new DocumentoModels() { Id = 1, Descripcion = "D.N.I" }; yield return new DocumentoModels() { Id = 2, Descripcion = "L.E" }; yield return new DocumentoModels() { Id = 3, Descripcion = "L.C" }; yield return new DocumentoModels() { Id = 4, Descripcion = "PASAPORTE" }; }

Hasta aquí lo que hicimos fue, creamos un “SelectList” con el primer parámetro “IEnumerable”, segundo parámetro el Id del combo y tercer parámetro 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")]


[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 inválido")] [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 líneas de código: <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 parámetro le cargamos los valores a nuestro DropDownList y el tercer parámetro “Seleccione…” es el valor


por defecto que nos aparecerá en nuestra lista. Simplemente con esto ya tenemos nuestro campo con la lista y validación. La ViewResult Esta simplemente sirve para indicar que ese método solo puede devolver una vista, la forma de utilizarla es muy simple: public ViewResult Edit(int id) {

return View(); }

Donde indicamos que el método “Edit” debe devolver un objeto de tipo “View” o “PartialView”.

Devolución de JSON con JsonResult Para este ejemplo vamos trabajar sobre la vista index, a esta le agregaremos un botón y llamaremos por AJAX de jquery a un método 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")',


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 método “DevolverTexto” al cual se está llamando en el parámetro “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 función $.ajax que acepta una seria de parámetros, 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 asincrónico. data: JSON con los parametros que recibe nuestra función. success: Si la llamada termino correctamente, se ejecuta este código. $("#Mensajes").html(items) : Esta línea inserta el json que nos devolvió jquery en el DIV. error: Si la llamada fallo se ejecuta este código. Con “$("#btSubmit").click(function ()” indicamos que cuendo se haga click en este botón, el código que se ejecutara será en indicado en la función: Por último del lado del servidor le indicamos que nuestro método va a devolver un JSON por medio de “JsonResult”, con la función “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.


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 (botón derecho -> Add -> View…):


Vemos en la imagen que marcamos la opción “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")

Código completo de la vista Index: @{ 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> <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 botón en todas las páginas 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.

cursomvc3

Documents