PDF de programación - CompartiMOSS 16

C O M P A R T I M O S S

C O M P A R T I M O S S

C O M P A R T I M O S S

03 Editorial

La revista quiere cuidar a sus autores y con este número
16, estrenamos una página en la web dedicada a ellos
(www.compartimoss.com/autores). En ella, daremos a
conocer al motor que hace que en cada número tengamos
artículos, a los verdaderos protagonistas que nos obligaron,
indirectamente, a crecer con la versión web, y a mejorar
nuestra presencia en las redes sociales con una cuenta de
Twitter (@CompartiMOSScom) y un grupo en LinkedIn.

La primera versión de nuestra App para SharePoint, junto
con la versión de Windows Phone y Windows 8, no es más
que un pequeño paso para mejorar la visibilidad de la
revista. Nuestro enfoque es que podamos leer los artículos
desde cualquier formato, inclusive, en modo offline, con lo
que llegarán actualizaciones de estas aplicaciones y otras
nuevas que están en camino.

Aprovecho esta editorial para presentarme y agradecer la
confianza depositada en mí, para continuar mi labor en la
revista, dentro del staff directivo, que desde principio de
este año se ha estrechado con el nacimiento de la web y
las Apps. Soy Alberto Diaz Martin, MVP de SharePoint y
autor de diversos artículos en esta revista y en el mundo

hispanohablante, además de un asiduo conferenciante de
la tecnología .NET y en particular de SharePoint. Espero que
mi incorporación sea un paso más dentro del camino que
hemos trazado para CompartiMOSS y el compromiso hacia
nuestros lectores y patrocinadores.

Les dejamos con el número 16, cargado de artículos
con mucho valor, nuevos autores y con el apoyo de los
patrocinadores, que también ayudan a que tengamos una
mejor revista.

Esperamos que disfruten de este número tanto como
nosotros disfrutamos creándola.

ALBERTO DÍAZ
[email protected]
JUAN CARLOS GONZÁLEZ
[email protected]
GUSTAVO VÉLEZ
[email protected]
FABIÁN IMAZ
[email protected]

03

C O M P A R T I M O S S

04

ASP.NET MVC para
SharePointeros (II)

Resumen
En este artículo seguiremos avanzando con ASP.NET MVC,
introduciendo las actualizaciones y validaciones de datos.

Artículo
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.

public ActionResult Edit(int id)
{
var product =
DBHelper.GetProduct(id);
return View(product);
}



[HttpPost]
public ActionResult

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
public ActionResult Edit(int id)
de la clase Product a esta acción y nos ocuparemos de
{
la misteriosa llamada RedirectToAction. Observad que
var product =
DBHelper.GetProduct(id);
decoramos esta acción con el atributo HttpPost, para
return View(product);
indicar que sólo se tiene que activar al recibir una petición
}
POST.



public ActionResult Edit(int id)
[HttpPost]
{
public ActionResult
var product =
Edit(MvcHelloWorld.Models.Product
DBHelper.GetProduct(id);
product)
return View(product);
{
}
if (ModelState.IsValid)

{

DBHelper.SaveProduct(product);

return
[HttpPost]
RedirectToAction("Index");
public ActionResult
}
Edit(MvcHelloWorld.Models.Product
return View(product);
product)
}
{
if (ModelState.IsValid)

{

DBHelper.SaveProduct(product);
La edición de un elemento de
lista en SharePoint

return
mediante el modelo de objetos de cliente se realiza
public static void SaveProduct(Product
RedirectToAction("Index");
cargando ese elemento en una variable, con el método
p)
}
{
List.GetItemById(), cambiando las propiedades y luego
return View(product);
ClientContext clientContext =
}
llamando al ClientContext.ExecuteQuery(). Vamos a
PrepareClientContext();
agregar el método que falta al DBHelper:


List list =

clientContext.Web.Lists.GetByTitle("Pro

ducts");
public static void SaveProduct(Product
clientContext.Load(list);
p)
ListItem listItem =
{
list.GetItemById(p.ProductId);
ClientContext clientContext =
clientContext.Load(listItem);
PrepareClientContext();


listItem["Title"] = p.Name;
List list =
listItem.Update();
clientContext.Web.Lists.GetByTitle("Pro

ducts");
clientContext.ExecuteQuery();
clientContext.Load(list);
}
ListItem listItem =
list.GetItemById(p.ProductId);

clientContext.Load(listItem);



listItem["Title"] = p.Name;
<ul>
listItem.Update();

04

{

if (ModelState.IsValid)
List list =
{
clientContext.Web.Lists.GetByTitle("Pro
DBHelper.SaveProduct(product);
ducts");
return
clientContext.Load(list);
RedirectToAction("Index");
ListItem listItem =
}
list.GetItemById(p.ProductId);
return View(product);
clientContext.Load(listItem);
}

listItem["Title"] = p.Name;

listItem.Update();



clientContext.ExecuteQuery();
public static void SaveProduct(Product
}
p)
{

ClientContext clientContext =

PrepareClientContext();

Enlazar la vista de edición

<ul>
Hasta ahora, no tenemos la edición en marcha. Tenemos
List list =
@foreach (var p in Model) {
clientContext.Web.Lists.GetByTitle("Pro
listo el controlador y la parte de SharePoint, pero nos faltan
<li>
ducts");
@Html.ActionLink(p.Name,
dos cosas más: la vista de edición propiamente dicha y
clientContext.Load(list);
"Display", new { id=p.ProductId })
como llamar a la acción Edit desde el listado de productos.
ListItem listItem =
</li>
list.GetItemById(p.ProductId);
}
clientContext.Load(listItem);
</ul>

listItem["Title"] = p.Name;

listItem.Update();


clientContext.ExecuteQuery();
}

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.



<ul>
@foreach (var p in Model) {
<li>
@Html.ActionLink(p.Name,
"Display", new { id=p.ProductId })
</li>
}
</ul>



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:



<ul>
@foreach (var p in Model) {
<li>
@Html.ActionLink(p.Name,
"Display", new { id=p.ProductId })
&nbsp;
[@Html.ActionLink("Edit",
"Edit", new {id=p.ProductId})]
</li>
}
</ul>



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:

@model MvcHelloWorld.Models.Product

@{
ViewBag.Title = "Edit";
}

<h2>Edit</h2>

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

C O M P A R T I M O S S

Imagen 1.- Ya podemos editar los productos.

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

Imagen 2.- Agregar la vista a la acción Edit.

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 “