En el artículo previo vimos las bases de la programación de aplicaciones web en ASP.NET MVC conectadas a SharePoint mediante el modelo de objetos de cliente. La aplicación que acabamos haciendo mostraba los detalles de una lista de productos alojada en SharePoint. Sin embargo, nuestra aplicación era de sólo lectura, sin posibilidad de modificar los productos o añadir productos nuevos.
Edición en MVC
La edición de entidades de negocio (el "modelo") en MVC suele ir dividida en dos acciones en el controlador (recordemos que el controlador es la clase donde está la lógica de las acciones de las diferentes páginas). Las dos acciones se llaman igual y la diferencia es que una se activa al realizar una petición GET y la otra una petición POST. La primera acción Edit (GET) sirve para "poner en edición", mostrando una vista con controles de edición como las cajas de texto, opciones u otros mientras la segunda acción Edit (POST) recoge los valores editados al hacer clic en el botón "Guardar".
Vayamos a nuestra aplicación de la entrega anterior, llamada MvcHelloWorld. La podéis descargar de http://sdrv.ms/XRmW0O.
Añadiremos dos acciones a la clase ProductsController.cs. La primera acción es la que activará la edición de un producto basándose en su identificador id. De hecho, esta acción es la misma que la de Display de la entrega anterior: va a la clase auxiliar DBHelper a buscar el producto en SharePoint y luego muestra la vista de ese producto.
1 public ActionResult Edit(int id)2 {3 var product = DBHelper.GetProduct(id);4 return View(product);5 }6
La segunda acción es la que recogerá los valores editados y actualizará el producto (invocando el método SaveProduct dentro de DBHelper). Todavía no tenemos este método pero lo vamos a hacer en seguida. Más adelante también veremos cómo MVC es capaz de pasarle una instancia de la clase Product a esta acción y nos ocuparemos de la misteriosa llamada RedirectToAction. Observad que decoramos esta acción con el atributo HttpPost, para indicar que sólo se tiene que activar al recibir una petición POST.
1 [HttpPost]2 public ActionResult Edit(MvcHelloWorld.Models.Product product)3 {4 if (ModelState.IsValid)5 {6 DBHelper.SaveProduct(product);7 return RedirectToAction("Index");8 }9 return View(product);10 }11
La edición de un elemento de lista en SharePoint mediante el modelo de objetos de cliente se realiza cargando ese elemento en una variable, con el método List.GetItemById(), cambiando las propiedades y luego llamando al ClientContext.ExecuteQuery(). Vamos a agregar el método que falta al DBHelper:
1 public static void SaveProduct(Product p)2 {3 ClientContext clientContext = PrepareClientContext();4 List list = clientContext.Web.Lists.GetByTitle("Products");5 clientContext.Load(list);6 ListItem listItem = list.GetItemById(p.ProductId);7 clientContext.Load(listItem);8 listItem["Title"] = p.Name;9 listItem.Update();10 clientContext.ExecuteQuery();11 }12
Enlazar la vista de edición
Hasta ahora, no tenemos la edición en marcha. Tenemos listo el controlador y la parte de SharePoint, pero nos faltan dos cosas más: la vista de edición propiamente dicha y como llamar a la acción Edit desde el listado de productos.
El segundo problema es el más fácil de resolver. En MVC las llamadas a acciones se renderizan con la sintaxis @Html.ActionLink de Razor. Si editamos la vista de la acción Index (Index.cshtml), veremos que estamos construyendo una lista no ordenada de elementos, y que cada elemento es un enlace a la acción Display pasándole el parámetro ID del elemento de la lista en cuestión.
1<ul>2 @foreach (var p in Model) {3 <li>4 @Html.ActionLink(p.Name, "Display", new { id=p.ProductId })5 </li>6 }7</ul>8
De la misma manera, usaremos ActionLink para generar el enlace de edición de un producto, al lado del enlace de la acción Display:
1<ul>2 @foreach (var p in Model) {3 <li>4 @Html.ActionLink(p.Name, "Display", new { id=p.ProductId })5 6 [@Html.ActionLink("Edit", "Edit", new {id=p.ProductId})]7 </li>8 }9</ul>10
Recordad que ActionLink tiene tres parámetros: el texto del enlace, el nombre de la acción y los parámetros de la acción. Además, en la sintaxis de Razor, todo lo que escribimos es HTML literal excepto lo que sigue a los marcadores @. Por eso ponemos los corchetes para que la acción Edit salga separada del enlace a los detalles del producto:
"Scaffolding"
Nos queda pendiente realizar la vista de edición. Podemos hacerla a mano, como en la entrega anterior, o bien usando "scaffolding". Se trata de una característica de MVC en Visual Studio que nos permite generar la vista de manera automática, ahorrando tiempo y minimizando la posibilidad de error.
Para crear la vista, igual que antes, haremos clic con el botón derecho encima de la acción del controlador y elegiremos "Add View":
En el diálogo que se nos presenta, marcaremos la vista como fuertemente tipada (para que podamos acceder a la clase Product desde la vista) y en el apartado “Scaffold template” elegiremos “Edit”. Desmarcaremos la opción de referencias los ficheros de script, ya que no hacemos nada con ellos.
La vista generada con scaffolding tiene la pinta siguiente:
1@model MvcHelloWorld.Models.Product2@{3 ViewBag.Title = "Edit";4}5<h2>Edit</h2>6@using (Html.BeginForm()) {7 @Html.ValidationSummary(true)8 <fieldset>9 <legend>Product</legend>10 @Html.HiddenFor(model => model.ProductId)11 <div class="editor-label">12 @Html.LabelFor(model => model.Name)13 </div>14 <div class="editor-field">15 @Html.EditorFor(model => model.Name)16 @Html.ValidationMessageFor(model => model.Name)17 </div>18 <p>19 <input type="submit" value="Save" />20 </p>21 </fieldset>22}23<div>24 @Html.ActionLink("Back to List", "Index")25</div>26
Como podéis ver, scaffolding nos genera un formulario HTML con un botón de Submit que lo que hará es realizar una petición POST de la acción Edit (por ello tenemos la segunda acción en el controlador, activada por POST). La llamada POST enviará al controlador el valor de todos los controles que hay en la vista, en nuestro caso ID y Name del producto. El formulario está encapsulado dentro de una instrucción using(Html.BeginForm()).
La "magia" de MVC convertirá estos valores en una instancia de clase Product en la segunda acción Edit. Esto se realiza a través de un componente llamado Model Binder, que veremos en otras entregas de esta serie de artículos. Por ahora, lo que nos interesa saber es que el Model Binder por defecto sabe cómo mapear la vista al modelo y viceversa.
Además, tenemos un control para mostrar el resumen de las validaciones (las veremos a continuación) y los controles para cada propiedad del modelo se hacen mediante llamadas a EditorFor, HiddenFor y LabelFor. Estos métodos auxiliares de @Html generan el control HTML adecuado para cada tipo de propiedad (cajas de texto para strings y números, checkboxes para booleanos, etc). Observad que el ID del producto se muestra oculto, pero se envía en la edición al servidor.
Si ahora ejecutamos la aplicación, veremos que podemos editar los nombres de los productos:
Validaciones en MVC
Para que nuestra aplicación de ejemplo sea más realista, vamos a añadir la validación del nombre del producto. Pondremos una longitud máxima para esta propiedad.
Validación con DataAnnotations
En MVC, podemos extender nuestro modelo con atributos llamados data annotations (espacio de nombres System.ComponentModel.DataAnnotations). Estos atributos indican que las propiedades de la clase tienen ciertas restricciones que se validarán al crear o editar las instancias de la clase.
Vamos a añadir dos atributos a la clase Product: Required y StringLength, para especificar que la propiedad no puede estar vacía y que su longitud máxima es de 50 caracteres:
1using System.ComponentModel.DataAnnotations;2 [StringLength(50), Required]3 public string Name { get; set; }4
Sólo con este pequeño cambio ya tenemos la validación activada. La acción Edit del controlador tiene una comprobación de la validez del modelo, usando la propiedad ModelState.IsValid, antes de proceder con el guardado del producto. Si la validación es correcta, invocamos la acción Index para ver el listado de los productos usando el método RedirectToAction. En el caso contrario, le devuelve la vista para que se muestre el mensaje de error:
1 if (ModelState.IsValid)2 {3 DBHelper.SaveProduct(product);4 return RedirectToAction("Index");5 }6 return View(product);7
Ejecutando la aplicación, comprobamos que la validación se está disparando correctamente. En este caso el mensaje de validación es automático y si lo queremos cambiar hay que agregar el parámetro ErrorMessage al atributo de validación dentro de la clase Product.
Validación remota
Algunas veces no podemos validar la edición de un objeto sin realizar alguna acción externa. Por ejemplo, para validar que no haya productos con el nombre duplicado tenemos que realizar una búsqueda de todos los productos. Para dar soporte a este tipo de validaciones, MVC nos permite realizar la validación remota.
La validación remota necesita tener referenciadas las librerías de JavaScript y lo que hace es realizar una llamada JSON a una acción de nuestra elección. Si la acción devuelve true, la validación es correcta. Si no, se muestra el mensaje de error.
En nuestro caso añadiremos un controlador nuevo para la validación, llamado ValidationController, con la acción NameAlreadyExists:
1 [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]2 public class ValidationController : Controller3 {4 public JsonResult NameAlreadyExists(string name)5 {6 var products = DBHelper.GetProducts();7 int howMany = products.Where(x => x.Name == name).Count();8 if (howMany == 0)9 {10 return Json(true, JsonRequestBehavior.AllowGet);11 }12 else13 {14 return Json("There is another product with the same name", JsonRequestBehavior.AllowGet);15 }16 }17 }18
El código del controlador es muy sencillo y lo que hace es comprobar que no existan productos con el nombre que se le está intentando asignar al producto en edición. Notad también que le decimos a MVC que nunca almacene el resultado de la llamada en la caché y asegurar que siempre se llamará al servidor.
Ahora tenemos que añadir el atributo de validación Remote a la propiedad Name de la clase Product. Allí le especificamos que acción de que controlador vamos a ejecutar. El nombre y el tipo de la propiedad a validar tienen que coincidir con los de la acción validadora:
1 public class Product2 {3 public int ProductId { get; set; }4 [StringLength(50), Required]5 [Remote("NameAlreadyExists", "Validation")]6 public string Name { get; set; }7 }8
Por último, tenemos que agregar las referencias al JavaScript de validación antes de la instrucción @using en la vista Edit.cshtml:
1<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>2<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>3
Ahora podemos comprobar que la edición de un producto no permite insertar nombres repetidos.
Conclusión
En este artículo hemos visto como editar las entidades de negocio en ASP.NET MVC y como agregar validaciones locales y remotas. En el próximo número veremos la inyección de dependencia y cómo podemos realizar pruebas unitarias con MVC. Hasta entonces, ¡feliz lectura!
El código completo de este artículo está disponible en http://sdrv.ms/11j0cHC.
Edin Kapić Arquitecto SharePoint edin.kapic@spenta.es @ekapic http://www.spenta.es
