Uso de RIA Services desde ASP.NET MVC

En las aplicaciones web tradicionales las diferentes capas lógicas (lógica de presentación, lógica de negocio, acceso a datos..) se distribuyen generalmente en dos capas físicas que se encuentran en el servidor. La lógica de presentación y de negocio suelen estar dentro de la misma capa, por lo que la comunicación entre ambas no supone ninguna complejidad.

web traditional 

El hecho de implementar una aplicación RIA supone desplazar una de dichas capas lógicas, en concreto, la capa de presentación a la parte cliente. Esto, además de convertirlo en un “cliente pesado”, complica las comunicaciones entre la lógica de presentación y la lógica de negocio.

ria app 

Para solucionar este problema aparecen los RIA Services. El objetivo de los RIA Services es simplificar el desarrollo de aplicaciones RIA, para que podamos desarrollar aplicaciones de este tipo como si fuesen aplicaciones web tradicionales. Estos servicios  trabajan en las capas intermedias ofreciendo control de acceso, cambios y operaciones definidas por el usuario, así como funciones de de validaciones, autentificación de usuarios y roles en las capas superiores.

ria services 

Con estos servicios aparece un nuevo DataSource llamado  DomainDataSource que nos va a permitir trabajar de una manera bastante cómoda y sencilla contra servicios de dominio que se exponen con RIA Services.

ria 

Después de esta pequeña explicación teórica (ver más) vamos a ver dichos servicios en acción 😉

En un artículo anterior vimos como utilizar los RIA Services para implementar una aplicación ASP.NET MVC cuyo cliente estaba basado en tecnología Silverlight. En este caso vamos a ver como podemos utilizar este tipo de servicios desde una aplicación basada completamente en ASP.NET MVC.

Para ello creamos una aplicación de tipo ASP.NET MVC 2 Web Application llamada RiaServices. A continuación, creamos la base de datos que se llamará UserDB.mdf, y en la que añadimos una tabla llamada Users que tendrá los siguientes campos:

image 

A continuación creamos el modelo de datos con el que vamos a trabajar, y a través del cual interactuaremos mediante el uso de RIA Services. Para ello dentro de la carpeta Models, hacemos clic con el botón derecho y añadimos un elemento de tipo ADO.NET Entity Model Data que llamaremos UserModel.edmx, y que estará basado en la base de datos creada inicialmente.

image 

Por último añadimos un servicio de dominio a nuestra aplicación, que es el que nos va a permitir comunicar de manera sencilla la lógica de presentación y la lógica de negocio. Para ello utilizaremos un elemento de tipo DomainService al que llamaremos UserService

image image

Una vez definido el servicio, vamos a pasar a implementarlo dentro de la aplicación para extraer información de nuestro modelo de datos. Para ello:

Dentro del controlador HomeController:

· Añadimos la referencia a nuestro modelo

  1. using RiaServices.Models;

· Inicializamos el servicio creado, y añadimos una lista de usuarios que más adelante rellenaremos con los valores extraídos mediante el servicio:

  1. UserService service = new UserService();
  2.         IQueryable<Users> usuarios;

· Añadimos un resultado de acción llamado List(), que se encargará de lanzar el servicio y obtener los datos de los usuarios a partir del mismo:

  1. public ActionResult List()
  2.         {
  3.             usuarios = service.GetUsers();
  4.             return View(usuarios);
  5.         }

Implementamos su correspondiente vista:

image 

Cuyo código será el siguiente:

  1. <h2>List</h2>
  2.     <% foreach (var item in Model)
  3.        { %>
  4.            <%=Html.ActionLink(item.UserName,"Details", new {id = item.UserID} )%>
  5.            Phone: <%=Html.Encode(item.UserPhone) %><br />
  6.     <% } %>

*Es necesario modificar el atributo Inherits, y poner:

  1. System.Web.Mvc.ViewPage<IQueryable<RiaServices.Models.Users>>

A continuación configuramos el resultado de acción Details, que nos mostrará los detalles del elemento seleccionado. Para ello implementamos uno de los métodos que se encuentra definido dentro del servicio Usersservice, y que  nos permite obtener todos los usuarios definidos en nuestro modelo de datos.

  1. public ActionResult Details(int id)
  2.         {
  3.             usuarios= service.GetUsers();
  4.             var usuario = (from t in usuarios
  5.                            where id == t.UserID
  6.                            select t).FirstOrDefault();
  7.             return View (usuario);
  8.  
  9.         }

Implementamos su correspondiente vista:

image 

Cuyo código será el siguiente:

  1. <h2>Details</h2>
  2.  
  3.     <fieldset>
  4.         <legend>Fields</legend>
  5.         
  6.         <div class="display-label"><b>UserID</b></div>
  7.         <div class="display-field"><%: Model.UserID %></div>
  8.         
  9.         <div class="display-label"><b>UserName</b></div>
  10.         <div class="display-field"><%: Model.UserName %></div>
  11.         
  12.         <div class="display-label"><b>UserAge</b></div>
  13.         <div class="display-field"><%: Model.UserAge %></div>
  14.         
  15.         <div class="display-label"><b>UserPhone</b></div>
  16.         <div class="display-field"><%: Model.UserPhone %></div>
  17.         
  18.     </fieldset>
  19.     <p>
  20.  
  21.         <%: Html.ActionLink("Edit", "Edit", new { id=Model.UserID }) %> |
  22.         <%: Html.ActionLink("Back to List", "Index") %>
  23.     </p>

Si ejecutamos nuestra aplicación y navegamos hasta la dirección http://[localhost]/Home/List accedemos a una vista en la que se muestra nuestra lista de usuarios. Y si pinchamos en cualquiera de ellos podemos acceder a sus detalles.

image image

Además podemos implementar el resto de acciones (CRUD) sobre nuestro DomainDataSource, implementando los distintos métodos con los que contamos dentro de nuestro servicio UserService como: InsertUser, UpdateUser, DeleteUser…¡¡¡Que intentaremos ver más adelante!!!

[Evento] WP7 Se presenta en Pamplona

Recordaros que el próximo martes, 14 de Diciembre, se presenta en Pamplona Windows Phone 7, en un evento en el que se verán, de forma práctica, las principales novedades y características que presenta este dispositivo tanto para su uso en el entorno empresarial como para el personal. Para ello contamos con 3 grandes profesionales:

En dicho evento veremos cuales son las nuevas “experiencias” que ofrece WP7 como: Xbox Live, redes sociales, entornos dinámicos…y que nos permiten entrar en una nueva dimensión de movilidad.

También veremos como se puede desarrollar entornos productivos, dinámicos y de alto rendimiento, de forma sencilla, para conseguir interfaces de usuario enriquecidas mediante el uso de aplicaciones Silverlight.

Por último, podremos ver como desarrollar e implementar aplicaciones 3D en XNA para WP7, desde donde podemos disfrutar de ellas con el mayor rendimiento y calidad posible. 

Si aún no os habéis apuntado… ¡¡a que estáis esperando!! Guiño 

Inscribirse aquí

Compilación de vistas en ASP.NET MVC

Aunque probablemente ya se haya hablado de este tema, nunca esta de más recordar una posible opción para habilitar la compilación de las vistas en una aplicación ASP.NET MVC.

En una aplicación ASP.NET MVC, existen numerosos errores ocultos en las vistas. Estos errores no son descubiertos hasta la propia interactuación del usuario con la vista. Por lo que se plantea evitar este problema añadiendo las vistas al proceso de compilación.

Para activar la compilación de las vistas MVC, una de las opciones “más votadas”, es la actualización manual del contenido xml del archivo .csproj de nuestro proyecto. Esto se puede realizar, haciendo clic con el botón derecho sobre nuestro proyecto dentro del explorador de soluciones (Solution Explorer) y seleccionando la opción «Unload Project«.

image 

Una vez que el proyecto ha sido descargado, volvemos a hacer clic con el botón derecho sobre el mismo y seleccionamos la opción “Edit [Project].csproj

image

Buscamos la etiqueta <MvcBuildViews> cuyo valor esta definido por defecto a “false”. Y cambiamos su valor a “true” de forma que estamos activando el compilado de las vistas en MVC.

image 

  1. <MvcBuildViews>true</MvcBuildViews>

Por último recargamos el proyecto de nuevo, haciendo clic con el botón derecho y seleccionando la opción Reload Project.

 image

Y volvemos a construir la solución. Ahora, las vistas son compiladas, alertándonos de los errores que existen en las mismas. Pero esta nueva configuración, también tiene sus “Peros…”, valga la redundancia, y es que ralentiza bastante la compilación del proyecto.

Seguro que existen otras opciones, y probablemente más eficientes, así que os animo a que las compartáis a través de este post… u otros 😉

[ASP.NET MVC] Jquery + Vistas parciales

Para finalizar lo que se podría denominar como el “mes jQuery”, vamos a ver otro pequeño ejemplo del uso de jquery y jqueryui dentro de nuestras aplicaciones ASP.NET MVC. En este caso veremos como crear un menú de pestañas, que nos recargue diferente información en una misma página a través del uso de vistas parciales.

Para ello, creamos una aplicación llamada jQueryApp de tipo ASP.NET MVC 2 Web Application, y añadimos los archivos necesarios a nivel de script (carpeta Scripts) y de estilos (carpeta Content) que en este caso son:

· jquery-ui-1.8.5.custom.css.

· jquery-1.4.2.js

· jquery-ui-1.8.5.custom.js

A continuación, hacemos referencia a los mismos dentro de nuestra página maestra (Views/Shared/Site.Master) para que podamos hacer uso de ellos desde cualquier página de nuestro sitio web. Para ello arrastramos los archivos correspondientes dentro de la cabecera de la página maestra de forma que esta se queda de la siguiente manera:

  1. <link href="../../Content/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
  2. <script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
  3. <script src="../../Scripts/jquery-ui-1.8.5.custom.js" type="text/javascript"></script>

El siguiente paso consiste en crear el modelo con el que vamos a trabajar, y que es el que se encargará de crear nuestro objeto formado por tres pestañas con sus correspondientes contenidos. Para ello vamos a añadir dos clases dentro de la carpeta Models:

· Una llamada tabViewModel que se encargará de definir las pestañas y que tendrá el siguiente código:

 

  1. public class tabViewModel
  2.     {
  3.         private string tabText1;
  4.         public string TabText1
  5.         {
  6.             get { return tabText1; }
  7.             set { tabText1 = value; }
  8.         }
  9.  
  10.         private string tabText2;
  11.         public string TabText2
  12.         {
  13.             get { return tabText2; }
  14.             set { tabText2 = value; }
  15.         }
  16.  
  17.         private string tabText3;
  18.         public string TabText3
  19.         {
  20.             get { return tabText3; }
  21.             set { tabText3 = value; }
  22.         }
  23.  
  24.     }

· Otra llamada tabContent que se encargará de cargar el contenido específico en cada una de las pestañas. Esta clase constará del siguiente código:

 

Code Snippet
  1. public class tabContent
  2.     {
  3.         public tabViewModel getTabContent()
  4.         {
  5.             tabViewModel tab = new tabViewModel();
  6.             tab.TabText1 = getTextTab1();
  7.             tab.TabText2 = getTextTab2();
  8.             tab.TabText3 = getTextTab3();
  9.  
  10.             return tab;
  11.         }
  12.  
  13.         private string getTextTab1()
  14.         {
  15.             return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus. Donec auctor metus vel neque lobortis molestie. Nullam venenatis tellus. Proin commodo aliquet nisl. Quisque purus turpis, sagittis in, auctor quis, feugiat nec, nulla. Nam nec leo. Cras placerat ullamcorper elit. Fusce tempus faucibus tellus. Fusce sagittis ornare magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam in nunc. Vivamus condimentum. Mauris eu ante sit amet nulla fringilla euismod. Sed porttitor accumsan lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae";
  16.         }
  17.         private string getTextTab2()
  18.         {
  19.             return "In iaculis, sapien sit amet sagittis vestibulum, arcu turpis pulvinar dolor, et rutrum urna erat vitae nisi. Sed fringilla quam tempor leo. Suspendisse semper porta eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur auctor. Aenean imperdiet tempus nulla. Donec enim ipsum, ornare sed, convallis sit amet, egestas luctus, orci. In sit amet justo. Praesent luctus ultrices ligula. Aenean vel enim id sapien congue scelerisque. In volutpat. Proin imperdiet placerat purus. Ut luctus nunc. Praesent feugiat hendrerit sem. Nulla sem risus, egestas ac, suscipit et, facilisis vel, velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras molestie. Aenean consequat tellus ac leo. Nullam a dolor. Quisque arcu augue, tincidunt non, lacinia ut, scelerisque sed, sem.";
  20.         }
  21.         private string getTextTab3()
  22.         {
  23.             return "Nullam non ipsum. Aenean tempus, nisi at condimentum molestie, turpis nulla hendrerit lorem, sed aliquam risus leo mattis ligula. Donec posuere. Nam semper justo nec tortor. Nulla facilisi. Sed porta ante eu arcu. Quisque ut enim. Vestibulum eu massa. Vivamus rutrum, nunc at placerat congue, velit nulla pretium neque, eget fringilla est nisl vitae urna. Phasellus nec nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla rutrum luctus neque. Vestibulum posuere iaculis sem. Donec. ";
  24.         }
  25.  
  26.     }

A continuación dentro de HomeController creamos un resultado de acción llamado TabExample:

  1. public ActionResult TabExample()
  2. {
  3.     tabContent contenido = new tabContent();
  4.     tabViewModel modelo = contenido.getTabContent();
  5.     return View(modelo);
  6. }

Creamos la vista para este resultado de acción. Para ello hacemos clic con el botón derecho sobre la acción Add View > TabExample, y seleccionamos las siguientes características:

image

A continuación vamos a ir creando las distintas vistas parciales. La primera vista que vamos a crear es _tab1. Para ello hacemos clic con el botón derecho sobre Views > Shared> Add View, y seleccionamos las opciones que indican que se trata de una vista parcial fuertemente tipada.

image

En dicha vista añadimos el siguiente código que se encargará de mostrarnos el texto asignado a la pestaña correspondiente, y en la que además añadimos un texto con un estilo específico.

  1. <p>
  2.     <%= Model.TabText1 %>
  3. </p>
  4. <p class="ui-state-highlight">¡¡Highlighted Text!!</p>

Repetimos estos mismo pasos para _tab2, y _tab3, pero el código de cada una de las vistas será diferente. En el caso de _tab 2 debemos añadir:

  1. <p>
  2.     <%=Model.TabText2 %>
  3. </p>
  4. <p class="ui-state-error">¡¡Error Text!!</p>

Y en el caso de _tab3:

  1. <p>
  2.     <%=Model.TabText3 %>
  3. </p>

También configuramos la vista _error, que tendrá el siguiente código:

  1. <p class="ui-state-error">An error has occured !</p>

Por último, volvemos a la vista TabExample.aspx y dentro de ella:

· definimos el objeto sobre el que vamos a aplicar la función jquery, indicando los enlaces correspondientes en cada caso, y el renderizado de datos que se mostrará en cada uno de ellos:

  1. <div id="tabs">
  2.         <ul>
  3.             <li><a href="#tabs-1">Text 1</a></li>
  4.             <li><a href="#tabs-2">Text 2</a></li>
  5.             <li><a href="#tabs-3">Text 3</a></li>
  6.         </ul>
  7.         <div id="tabs-1">
  8.             <% Html.RenderPartial("_tab1", Model);  %>            
  9.         </div>
  10.         <div id="tabs-2">
  11.             <% Html.RenderPartial("_tab2", Model);  %>            
  12.         </div>
  13.         <div id="tabs-3">
  14.             <% Html.RenderPartial("_tab3", Model);  %>            
  15.         </div>
  16.     </div>

· implementamos la función jquery

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.     $("#tabs").tabs();
  4. });    
  5. </script>

Para terminar añadimos el enlace a la página TabExample dentro de la página Index.aspx del controlador Home. Para ello utilizamos el siguiente código:

  1. <li><%= Html.ActionLink("Tab Text Example", "TabExample")  %></li>

Si compilamos nuestra aplicación obtenemos el resultado esperado:

image image

El código utilizado es menor que si implementáramos Ajax  para conseguir el mismo resultado y además el desarrollo es más sencillo. Esto se debe a jquery explota toda la potencia de Ajax pero de forma más simplificada.

Por eso, una vez más, os animo a ir conociendo un poco más esta tecnología.

[ASP.NET MVC]Personalizar interfaces de usuario mediante jQuery UI

Siguiendo en la línea del último artículo, relacionado con el uso de jQuery en aplicaciones ASP.NET MVC, en esta ocasión vamos a ver como se puede implementar jQueryUI para enriquecer nuestras interfaces de usuario. jQueryUI es una biblioteca de componentes para el framework jQuery, que ofrece un conjunto de plugins, efectos visuales y widgets que nos permite crear interfaces de usuario más potentes de forma sencilla.Para poder hacer uso de ella es necesario, o bien descargarla de la página http://jqueryui.com/download y agregarla a nuestra aplicación, o acceder a ella via Google CDN.

Si optamos por la primera de las opciones, en el fichero comprimido de la descarga podemos encontrar:

  • la librería jqueryui con el código de las opciones seleccionadas, y la librería jquery de la que depende
  • una distribución para desarrolladores (development-bundle), con:
    • la documentación del framework,
    • páginas de demo con ejemplos de uso de cada funcionalidad,
    • librerías js con cada una de las funcionalidades concretas
  • el tema css elegido. Este se puede personalizar mediante el uso de la herramienta ThemeRoller 

A lo largo de este artículo vamos a ver algunas de las funcionalidades básicas que podemos implementar utilizando esta biblioteca. Para ello vamos a crear un proyecto de tipo ASP.NET MVC 2 Web Application, que llamaremos jQueryInteractions, y sobre el que iremos configurando las distintas aplicaciones.

1.Componentes de Interacción:

Los componentes de interacción nos permiten añadir comportamientos a determinados objetos mediante la invocación a los siguientes métodos:

  • $.draggable();: añade al elemento la propiedad de poderse arrastrar.
  • $.droppable();: asigna la propiedad a un elemento para que pueda recibir objetos soltados tras el arrastre.
  • $.resizable();: asigna  al elemento la propiedad de poder redimensionarse.
  • $.selectable();: asigna la propiedad seleccionable a un elemento o a todos sus hijos.
  • $.sortable();: asigna la propiedad ordenable a un elemento o a todos sus hijos.

A continuación vamos a ver un ejemplo de cómo implementar un tipo de interacción:

 

Draggable (arrastrable)

 

Inicialmente añadimos a nuestra aplicación todos los archivos necesarios para el correcto uso de esta biblioteca:

  • Estilos:

o jquery-ui-1.8.5.custom.css

o demos.css

  • Los scripts

o jquery-1.4.2.js

o jquery-ui-1.8.5.custom.js

Y agregamos las referencias a los mismos dentro de la cabecera (<head>) de la página maestra Site.Master que se encuentra en Views/Shared, de forma que podamos usarlos desde cualquiera de las vistas de la aplicación:

  1. <link href=»../../css/jquery-ui-1.8.5.custom.css» rel=»stylesheet» type=»text/css» />
  2. <link href=»../../css/demos.css» rel=»stylesheet» type=»text/css» />
  3. <script src=»../../Scripts/jquery-1.4.2.js» type=»text/javascript»></script>
  4. <script src=»../../Scripts/jquery-ui-1.8.5.custom.js» type=»text/javascript»></script>

A continuación creamos el objeto que va a ser “arrastrable”, que en nuestro caso se tratará de un cuadrado amarillo, sobre el que aplicaremos la función. Para ello abrimos el archivo Site.css, que se encuentra dentro de la carpeta Content, y añadimos el siguiente código:

  1. #draggable
  2. {
  3.     width: 150px;
  4.     height: 150px;
  5.     padding: 0.5em;
  6.     background-color:Yellow;
  7. }

 

A continuación, dentro del controlador Home añadimos un ActionResult llamado Draggable,

  1. public ActionResult Draggable()
  2. {
  3.     return View();
  4. }

 

Cuya vista se deberá configurar de la siguiente manera:

1. Añadimos un texto que se aplicará a nuestro objeto a través del estilo definido en demo.css:

  1. <div class=»demo»>
  2.     <div id=»draggable» class=»ui-widget-content»>
  3.     <p>¡¡Arrastrame!!</p>
  4.     </div>
  5. </div>

 

2. Añadimos la función a implementar, que será:

  1. <script type=»text/javascript»>
  2.     $(function () {
  3.         $(«#draggable»).draggable();
  4.     });
  5. </script>

 

Y de esta forma si accedemos a la página correspondiente [http://localhost: 51465]/Home/Draggable, vemos como podemos arrastrar nuestro objeto por la página.

image image

 

2.Widgets:

Un widget es un componente reutilizable de la interfaz de usuario. jQuery UI presenta una serie de componentes predefinidos que nos permiten inyectar comportamientos a diferentes elementos identificables de nuestro html.

A continuación vamos a ver un ejemplo de como implementar un widget:

Accordion

Dentro del controlador Home añadimos un ActionResult llamado Accordion, cuya vista se deberá configurar de la siguiente manera:

1. Añadimos las distintas cabeceras, y contenidos de nuestro desplegable, según el estilo definido en demo.css:

  1. <div class=»demo»>
  2.     <div id=»accordion»>
  3.         <h3><a href=»#»>Section 1</a></h3>
  4.         <div>
  5.             <p>
  6.             Texto1
  7.             </p>
  8.         </div>
  9.         <h3><a href=»#»>Section 2</a></h3>
  10.         <div>
  11.             <p>
  12.             Texto 2
  13.             </p>
  14.         </div>
  15.         <h3><a href=»#»>Section 3</a></h3>
  16.         <div>
  17.             <p>
  18.             Texto 3
  19.             </p>
  20.             <ul>
  21.                 <li>List item one</li>
  22.                 <li>List item two</li>
  23.                 <li>List item three</li>
  24.             </ul>
  25.         </div>
  26.         <h3><a href=»#»>Section 4</a></h3>
  27.         <div>
  28.             <p>
  29.             Texto 4a
  30.             </p>
  31.             <p>
  32.             Texto 4b
  33.             </p>
  34.         </div>
  35.     </div>
  36. </div>

 

2. Añadimos la función a implementar, que será:

  1.  <script type=»text/javascript»>
  2.  
  3.      $(function () {
  4.          $(«#accordion»).accordion();
  5.      });
  6. </script>

Y de esta forma si accedemos a la página correspondiente [http://localhost: 51465]/Home/Accordion, vemos como obtenemos el desplegable dinámico con sus cabeceras y su contenido.

image 

3.Efectos visuales:

Jqueryui presenta una serie de métodos, que extienden las funcionalidades ya existentes en jquery, y que nos permiten añadir efectos de animación de forma sencilla mediante :

Transiciones básicas: permiten implementar animaciones sobre un elemento.

  • Effect

Transiciones de visibilidad: permiten implementar animaciones realizando modificaciones en la visibilidad de los elementos

  • Show – Anima la entrada de un elemento(mostrándolo)
  • Hide – Anima la salida de un elemento (ocultándolo)
  • Toggle – Anima el cambio de estado de un elemento

Transiciones de color: permiten implementar animaciones realizando modificaciones en el color de los elementos

  • Animate – Anima el color de un elemento
    • backgroundColor
    • borderBottomColor
    • borderLeftColor
    • borderRightColor
    • borderTopColor
    • color
    • outlineColor

Transiciones de clases: permiten implementar animaciones realizando modificaciones en las clases (o atributos) que definen los estilos de los elementos

  • addClass – Añade una clase a un elemento con una transición entre estados.
  • removeClass – Elimina una clase de un elemento con una transición entre estados.
  • toggleClass – Añade una clase si no está presente, y elimina una clase si lo esta mediante una transición de estado.
  • switchClass – Intercambia una clase por otra con una transición de estado.

A continuación vamos a ver un ejemplo de como aplicar un efecto de color:

Color effect

Inicialmente configuramos el estilo de los elementos que vamos a utilizar en nuestra vista. Para ello añadimos el siguiente código en el archivo Site.css:

 

  1. .toggler { width: 500px; height: 200px; position: relative; }
  2.         #button { padding: .5em 1em; text-decoration: none; }
  3.         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
  4.         #effect h3 { margin: 0; padding: 0.4em; text-align: center}

 

Dentro del controlador Home añadimos un ActionResult llamado ColorEffect, cuya vista se deberá configurar de la siguiente manera:

1. Añadimos un un botón y un elemento de tipo effect según el estilo definido en demo.css. Al hacer clic sobre dicho botón se animará el objecto cuyo id es “effect”, cambiando de dimensiones y de color.

  1. <div class=»demo»>
  2.      <div class=»toggler»>
  3.      <div id=»effect» class=»ui-widget-content ui-corner-all»>
  4.      <h3 class=»ui-widget-header ui-corner-all»>Animate</h3>
  5.      <p>lalolaolaoalaoalao</p></div></div><a id=»button» class=»ui-state-default ui-corner-all» href=»#»>Toggle Effect</a> </div>
  6.      <div styleDISPLAY: none» class=»demo-description»>
  7.      <p>Click the button above to preview the effect.</p>
  8.  </div>

 

2. Añadimos la función a implementar, que será:

  1. <script type=»text/javascript»>
  2.     $(function() {
  3.         $( «#button» ).toggle(
  4.             function() {
  5.                 $( «#effect» ).animate({
  6.                     backgroundColor: «#aa0000»,
  7.                     color: «#fff»,
  8.                     width: 500
  9.                 }, 1000 );
  10.             },
  11.             function() {
  12.                 $( «#effect» ).animate({
  13.                     backgroundColor: «#fff»,
  14.                     color: «#000»,
  15.                     width: 240
  16.                 }, 1000 );
  17.             }
  18.         );
  19.     });
  20.     </script>

Y de esta forma si accedemos a la página correspondiente [http://localhost: 51465]/Home/ColorEffect, vemos como al hacer clic sobre el botón Toggle Effect, nuestro objeto se anima y cambia de color.

image image

Aquí os dejo el proyecto con estos ejemplos… y algunos más. Aunque podéis encontrar este funcionalidades y muchas más (y más complejas) en la página de jqueryui: http://jqueryui.com/demos/

Espero que con este artículo os entre un poco el gusanillo con este tema, por lo menos esa es mi intención 😉

[ASP.NET MVC]Crear controles dinámicos mediante jQuery

En el último artículo que escribí, ya hace un tiempo por cierto, vimos como podemos interactuar con Ajax para conseguir interfaces de usuario más potentes. En esta ocasión vamos a ver una aplicación que tiene el mismo objetivo, pero utilizando jQuery para ello. Como ya hemos visto en alguna ocasión jQuery ofrece una amplia gama de posibilidades para animar objetos y crear efectos dentro de nuestras páginas web, pero también aporta otro tipo de funcionalidades. En este caso vamos a ver cómo podemos crear controles dinámicos, haciendo uso de esta biblioteca que viene integrada dentro del propio Framework MVC, evitando de esta forma el uso de postbacks.Para ello vamos a ver un pequeño ejemplo de como implementar interfaces de usuario enriquecidas mediante el uso de jquery. 

Inicialmente, creamos un proyecto llamado jQueryApp de tipo ASP.NET MVC 2 Web Application:

image  image

Dentro de dicha aplicación, abrimos el controlador HomeController que se crea por defecto, y creamos una acción llamada Tema, que se encargará de serializar nuestro objeto a un elemento de tipo Json, para que podamos mostrarlo a través de una vista específica. Este presentará el siguiente código:

  1. public JsonResult Tema(int TemaID)
  2.         {
  3.             var list = new object[] { };
  4.             switch (TemaID)
  5.             {
  6.  
  7.                 case 1:
  8.                     
  9.                     list = new object[] {
  10.                         new { value = 1, name = "Los pilares de la tierra" },
  11.                         new { value = 2, name = "La catedral del mar" },
  12.                         new { value = 3, name = "Millenium 1" }
  13.                     };
  14.                     break;
  15.                 case 2:
  16.                     list = new object[] {
  17.                         new { value = 1, name = "Ciencia divulgativa:del ábaco a Intenet" },
  18.                         new { value = 2, name = "Hacker" },
  19.                     };
  20.                     break;
  21.             };
  22.             return Json(list,JsonRequestBehavior.AllowGet);
  23.         }

A continuación pasamos a modificar la vista Index existente (o podemos crear una vacía), que será donde definiremos nuestros elementos. En primer lugar,  es necesario configurar la vista para poder usar jquery en ella.  Para ello arrastramos el archivo jquery-1.4.1.js de forma que se crea el código de referencia del script:

 

  1. <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

En segundo lugar añadimos una tabla para definir los elementos a mostrar, que en nuestro caso serán dos desplegables. El primero de ellos se cargará a partir de una serie de datos introducidos manualmente y nos permitirá seleccionar la temática de nuestros libros. Y el segundo se actualizará en función del elemento seleccionado en el primero de los desplegables y nos mostrará una serie de libros en función del tipo de temática seleccionada, tal y como lo hemos definido a través de nuestro objeto.

 

  1. <table>
  2.         <tr>
  3.             <th>Temática:</th>
  4.             <td><select id="theme">
  5.             <option> — Selecciona una temática — </option>
  6.             <option value="1">Novela</option>
  7.             <option value="2">Informática</option>
  8.             </select></td>
  9.         </tr>
  10.         <tr>
  11.             <th>Libros:</th>
  12.             <td><select id="books"></select></td>
  13.         </tr>
  14.     </table>

A continuación añadimos el código javascript que se encargará de ejecutar la función específica, para ello añadimos una etiqueta <script> en nuestra vista donde colocaremos todo el código necesario:

 

  1. <script type="text/javascript">
  2.         $(document).ready(function () {
  3.             $("#theme").change(function () {
  4.                 $.post("/Home/Tema/", { TemaID: $(this).val() }, function (data) {
  5.                     populateDropdown($("#books"), data);
  6.                 });
  7.             });
  8.         });
  9.         function populateDropdown(select, data) {
  10.             select.html('');
  11.             $.each(data, function (id, option) {
  12.                 select.append($('<option></option>').val(option.value).html(option.name));
  13.             });
  14.         }
  15.     </script>

La primera de las funciones comprueba el cambio de valor en el selector #theme, y en función de ello realiza un post a la acción Tema del controlador, para lanzar la función populateDropDown, teniendo en cuenta los valores obtenidos a partir del atributo TemaID.

La funcion populateDropdown, se encarga de cargar el contenido del desplegable inferior en función del elemento que es seleccionado en el desplegable superior. Para ello, la función recibe dos parámetros, el dropbox a rellenar, que en este caso es “books”, y los valores del mismo que son leídos a partir de nuestro objeto, y que son mapeados como elementos de nuestro desplegable a través de la etiqueta de definición <option>.

Si compilamos nuestra aplicación y navegamos hasta /Home/Tema, vemos cómo se va actualizando el desplegable inferior en función de lo que seleccionamos en el superior

image

Aunque esto es sólo un ejemplo básico del uso que se le puede dar a jquery para la creación de interfaces de usuario enriquecidas, es suficiente para ver parte de la potencia que ofrece jquery para el desarrollo de este tipo de aplicaciones… y todo ello de manera “relativamente sencilla”.

Enriquecer la UI de aplicaciones ASP.NET MVC mediante Ajax

Ya que me encuentro realizando mis primeros pinitos con Ajax dentro de las aplicaciones ASP.NET MVC, me parece interesante mostrar un pequeño ejemplo de como podemos implementar MicrosoftAjax.js y MicrosoftMvcAjax.js  para enriquecer la interfaz de usuario de nuestras aplicaciones de manera sencilla.

Para ello creamos una aplicación de tipo ASP.NET MVC 2 Web Application que llamaremos IntegracionAjax, y en la que vamos a mostrar los datos de nuestros clientes (almacenados en una base de datos), seleccionando un cliente en concreto a partir de un desplegable.

Inicialmente, añadimos la base de datos donde se encuentran nuestros datos, que en nuestro caso será la base de datos Northwind.mdf. A continuación creamos el modelo de datos que nos permita interactuar con dicha base de datos. Para ello hacemos clic con el botón derecho sobre la carpeta Models y seleccionamos Add > New Item > LinqToSql Classes y le damos el nombre CustomerModel.

image 

Por últimos arrastramos sobre él la tabla Customer, de forma que ya queda definido el modelo.

Antes de comenzar a desarrollar el contenido y la lógica de nuestra aplicación, es necesario añadir las referencias a los scripts de ajax que vamos a utilizar para que todo funcione correctamente. Por ello abrimos la página maestra que se encuentra en Views >Shared> Site.Master y arrastramos los archivos MicrosoftAjax.js y MicrosoftMvcAjax.js a la cabecera de dicha página, de forma que se generan las referencias automáticamente:

  1. <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
  2. <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

A continuación creamos un controlador que nos permita gestionar todas las acciones relacionadas con los clientes, para ello hacemos clic con el botón derecho sobre la carpeta Controllers y le damos el nombre de CustomerController.

image

Para poder utilizar nuestro modelo desde el controlador es necesario:

  1. Añadir la referencia a nuestro modelo:
    1. using IntegracionAjax.Models;

  2. Crear el contexto de datos:
    1. CustomerModelDataContext cust = new CustomerModelDataContext();

Además, en dicho controlador vamos a definir dos resultados de acción:

El primero de ellos es Index(), que se encargará de mostrarnos la página principal compuesta por un dropdownbox implementado en ajax que contendrá el nombre y apellido de los clientes, así como un botón que al pulsarlo nos permitirá ver los detalles del cliente seleccionado. El código de está acción será el siguiente:

  1. public ActionResult Index()
  2.         {
  3.             var customers = cust.Customers.ToList();
  4.             ViewData["id"] = new SelectList(customers, "CustomerID", "ContactName");
  5.             return View();
  6.  
  7.         }

A continuación pasamos a configurar la vista correspondiente. Para ello hacemos clic con el botón derecho sobre la acción y seleccionamos AddView

image

Dentro de la vista, implementamos el siguiente código, que se encargará de cargar el desplegable con los valores de los clientes, y de lanzar la acción Details, cuando se pulse el botón definido

  1. <h2>Customers</h2>
  2.     <div>
  3.     <%
  4.         using (Ajax.BeginForm("Details", new AjaxOptions { UpdateTargetId = "customerDetails" })){ %>
  5.         <p>Customer:<%=Html.DropDownList("id")%></p>
  6.         <p><input type="submit" value="Details"/></p>
  7.         <% } %>
  8.     </div>
  9.     <div id="customerDetails">
  10.     </div>

Por lo tanto el segundo resultado de acción que tenemos que definir es Details(), que se encargará de hacer una consulta en nuestro contexto de datos, de coger el elemento coincidente con el id del valor buscado, y de devolvérnoslo a través de una vista parcial.

  1. public ActionResult Details(string id)
  2.         {
  3.             var customer = cust.Customers.Single(m => m.CustomerID == id);
  4.             return PartialView("customerDetails", customer);
  5.  
  6.         }

Para ello es necesario crear una vista parcial que se llame, tal y como indicamos, “customerDetails”. Hacemos clic con el botón derecho en Views > Customer > AddView y creamos una vista con las siguientes características:

image

Si queremos podemos modificar el estilo de dicha vista para que nos pinte los título de negrita, o podemos mostrar todos los detalles del elemento en línea horizontal, pero eso a gusto del consumidor 😉

De esta forma conseguimos dotar de mayor interactividad a nuestra aplicación, y de una interfaz de usuario más atractiva.

image image

[ASP.NET MVC] Mostrar imágenes + jQueryLightbox mediante modelo XML

Trabajando con las distintas opciones que ofrece el Modelo de las aplicaciones MVC, vamos a ver como implementar un modelo que nos permita leer la información referente a un conjunto de imágenes definidas en un archivo XML, y mostrarlas mediante una vista específica a la que, además, aplicaremos el efecto jQueryLightbox.

Inicialmente partimos de un proyecto de tipo ASP.NET MVC 2 Web Application llamado ImagesExample, y lo primero que hacemos es añadir las imágenes que queremos mostrar y el archivo que contiene los metadatos de las mismas. Para ello creamos una carpeta dentro de nuestro proyecto que se llamará Imagenes. En ella añadimos, las imágenes deseadas y un nuevo elemento de tipo XML file, llamado CaratulasMetaData, que en nuestro caso, contendrá el siguiente código de definición:

  1. <?xml version=«1.0« encoding=«utf-8«?>
  2. <images>
  3.   <image>
  4.     <filename>Bunbury.jpg</filename>
  5.     <titulo>Las Consecuencias</titulo>
  6.     <cantante>Bunbury</cantante>
  7.     <año>2010</año>
  8.   </image>
  9.   <image>
  10.     <filename>MonicaNaranjo.jpg</filename>
  11.     <titulo>Adagio</titulo>
  12.     <cantante>Monica Naranjo</cantante>
  13.     <año>2009</año>
  14.   </image>
  15.   <image>
  16.     <filename>Rosario.jpg</filename>
  17.     <titulo>Cuentame</titulo>
  18.     <cantante>Rosario Flores</cantante>
  19.     <año>2009</año>
  20.   </image>
  21.   <image>
  22.     <filename>Shakira.jpg</filename>
  23.     <titulo>Loba</titulo>
  24.     <cantante>Shakira</cantante>
  25.     <año>2008</año>
  26.   </image>
  27. </images>

En dicho código definimos una lista de imágenes <images>, donde cada imagen corresponde con un elemento <image>, y cuyas propiedades son las siguientes:

  • filename (nombre de la imagen)
  • titulo
  • cantante
  • año

A continuación pasamos a definir el modelo que nos permitirá interactuar con nuestros datos. Dentro de nuestra carpeta Models, añadimos 2 clases: una llamada Image, que utilizaremos para definir nuestro objeto, y otra llamada ImageModel que utilizaremos para interactuar con dicho objeto.

La clase Image contendrá el siguiente código:

  1. public class Image
  2.     {
  3.         public Image(string filename, string titulo, string cantante, string año)
  4.         {
  5.             Archivo = filename;
  6.             Album = titulo;
  7.             Cantante = cantante;
  8.             Año = año;
  9.  
  10.         }
  11.  
  12.         public string Archivo { get; set; }
  13.         public string Album { get; set; }
  14.         public string Cantante { get; set; }
  15.         public string Año { get; set; }
  16.     }

 

 

 

 

La clase ImageModel contendrá el siguiente código:

  1. public class ImageModel : List<Image>
  2.     {
  3.         public ImageModel()
  4.         {
  5.  
  6.             string directoryOfImage = HttpContext.Current.Server.MapPath(«~/Imagenes/»);
  7.             XDocument imageData = XDocument.Load(directoryOfImage + @»/CaratulasMetaData.xml»);
  8.             var images = from image in imageData.Descendants(«image») select new Image(image.Element(«filename»).Value, image.Element(«titulo»).Value, image.Element(«cantante»).Value,image.Element(«año»).Value);
  9.             this.AddRange(images.ToList<Image>());
  10.         }
  11.     }

Por último dentro de nuestro controlador HomeController, añadimos un resultado de acción llamado Music, a través del cual pasaremos a la vista el modelo que queremos mostrar:

  1. public ActionResult Music()
  2.         {
  3.             ImageModel cds = new ImageModel();
  4.             return View(cds);
  5.         }

A continuación creamos una vista vacía, que vamos a personalizar para que nos muestre los datos de nuestro modelo de la forma deseada.  Para ello hacemos clic con en botón derecho sobre el resultado de acción Music y seleccionamos Add View, creando una vista tal y como se observa en la siguiente imagen:

image 

En dicha vista, vamos a mostrar cada una de las imágenes y sus propiedades dentro de una tabla accediendo a los distintos valores a través de nuestro modelo. Para ello utilizamos el siguiente código:

  1.   <% foreach (var image in ViewData.Model) { %>
  2.  
  3. <table>
  4.     <tr>
  5.         <td rowspan=»3″>
  6.             <img alt=»» src=»/Imagenes/<%= image.Archivo %>« height=»100″ width=»100″ />
  7.         </td>
  8.             
  9.         <td>
  10.             <b>Disco:</b> <%= image.Album %>
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.             <td>
  15.             <b>Cantante:</b> <%= image.Cantante%>
  16.         </td>
  17.     </tr>
  18.     <tr>
  19.         <td>
  20.             <b>Año:</b> <%= image.Año %>
  21.         </td>
  22.     </tr>          
  23. </table>
  24.  
  25. <% }%>

 

Si compilamos, vemos que obtenemos una lista estática de imágenes con sus propiedades :

image

 

Por último vamos a aplicar el efecto JqueryLightBox a dichas imágenes, de forma que cuando hagamos clic sobre cada una de ellas podamos verlas en tamaño real, y navegar por ellas. Para poder aplicar este efecto descargamos los archivos necesarios que podemos encontrar en la siguiente dirección:

http://leandrovieira.com/projects/jquery/lightbox/

Introducimos cada archivo en la carpeta correspondiente:

  • Dentro de la carpeta Scripts, añadimos el archivo jquery.lightbox-0.5.js,
  • Dentro de la carpeta Contenidos añadimos las imágenes que nos permiten navegar por la aplicación: lightbox-btn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif, lightbox-ico-loading.gif
  • Creamos una carpeta llamada css, donde añadiremos el archivo referente a los estilos jquery.lightbox-0.5.css

A continuación debemos referenciar, tanto el archivo donde se encuentra el código Javascript que vamos a utilizar, como el de estilo que vamos a aplicar. Por lo que vamos a nuestra página maestra Views > Shared> Site.Master, y dentro de la cabecera <head> añadimos el siguiente código:

 

  1. <script src=»/Scripts/jquery-1.4.1.js» type=»text/javascript»></script>
  2. <script src=»/Scripts/jquery.lightbox-0.5.js» type=»text/javascript»></script>
  3. <link href=»/css/jquery.lightbox-0.5.css» rel=»stylesheet» type=»text/css» />

 

Por último vamos a llamar a la función lightbox desde la página en la que queremos aplicar dicho efecto, que en nuestro caso es Music.aspx. Para ello añadimos el siguiente código:

  1. <script type=»text/javascript»>
  2.         $(function ImageLB() {
  3.             $(‘#gallery a’).lightBox({
  4.                 imageLoading: ‘/Content/lightbox-ico-loading.gif’,
  5.                 imageBtnClose: ‘/Content/lightbox-btn-close.gif’,
  6.                 imageBtnPrev: ‘/Content/lightbox-btn-prev.gif’,
  7.                 imageBtnNext: ‘/Content/lightbox-btn-next.gif’,
  8.                 txtImage: ‘Álbum’,
  9.                 txtOf: ‘de’
  10.             });
  11.         });
  12.     </script>

Y modificamos la parte de nuestra vista en la que se cargaban las imágenes, para que dicho efecto funcione.

  1. Añadimos las imágenes que obtenemos de nuestro modelo dentro de un <div> cuyo id  sea gallery, ya que en el código javascript estamos indicando que vamos a aplicar este efecto a un elemento de tipo hipervínculo (<a>) cuyo identificador es gallery.
  2. Y añadimos una url (href) a nuestro hipervínculo, que será la dirección relativa en la que se encuentran nuestras imágenes dentro del sitio.

Teniendo en cuenta todo lo anterior, el código resultante será el siguiente:

  1. <div id=»gallery»>
  2.                 <a href=»/Imagenes/<%= image.Archivo %>«><img alt=»» src=»/Imagenes/<%= image.Archivo %>« height=»100″ width=»100″ /></a>
  3.             </div>

De forma que si compilamos nuestra aplicación y accedemos a la página de música, que en nuestro caso, tal y como la hemos la hemos definido a través del controlador y la acción es: http://localhost:52361/Home/Music vemos que al hacer clic sobre cualquiera de nuestras imágenes se aplica el efecto lightbox deseado

image

 

 

Así que de forma sencilla, hemos conseguido que la aplicación presente una interfaz de usuario enriquecida y, por lo tanto sea más atractiva visualmente para el usuario.Y esto es todo por hoy 😉

Descargar el código aquí

[ASP.NET MVC] Operaciones CRUD con el modelo LINQ To SQL

Aunque ahora ando inmersa en otro artículo, también relacionado con esta tecnología, he hecho un break para hablar sobre el uso de las operaciones CRUD mediante el modelo LINQtoSQL de ASP.NET MVC, ya que es un tema que se me ha solicitado varias veces a través del propio blog. Por lo tanto en este artículo vamos a ver como Crear, Leer, Actualizar y Borrar datos de nuestra base de datos, a través de nuestro modelo LINQtoSQL, ya que en un artículo anterior vimos estas mismas operaciones pero trabajando con un modelo ADO.NET Entity Data Model.

Para ello, partimos de un proyecto ASP.NET MVC 2 llamado Example1, al que añadimos una base de datos llamada ExampleDB, que cuenta con una tabla de equipos de balonmano cuyas propiedades son las siguientes TeamID, TeamName, TeamLocation. Una vez creada la base de datos pasamos a configurar el modelo que nos permita interactuar con ella. Dentro de la carpeta Models, hacemos clic con el botón derecho y seleccionamos la opción Add> New Item> LINQ to SQL Classes. Hacemos clic en Add y arrastramos nuestra tabla de datos al modelo, de forma que ya tenemos nuestro contexto de datos creado.

image image

Una vez implementado el modelo, vamos a configurar las acciones que nos permitan trabajar con él. Para ello creamos un nuevo controlador llamado TeamController, y seleccionamos el checkbox que indica que, por defecto, se añadirán las acciones Create, Update, Delete y Details.

image

En primer lugar, dentro de dicho controlador:

1. Añadimos a la referencia a nuestro modelo, para poder utilizar el modelo creado.

  1. using Example1.Models;

2. Creamos una instancia de nuestro contexto de datos

  1. Model2DataContext dbteam = new Model2DataContext();

3.Mostramos nuestro contexto de datos en forma de lista mediante la acción Index()

  1. public ActionResult Index()
  2.         {
  3.             var handballteam = (from ht in dbteam.HandballTeams
  4.                                 select ht).ToList();
  5.  
  6.  
  7.             return View(handballteam);
  8.         }

4.Creamos la vista correspondiente con los siguientes parámetros:

image

De esta forma conseguimos mostrar un listado de nuestros equipos:

image 

El siguiente resultado de acción que vamos a configurar es la opción Create(). Para ello:

1. El método Get de la acción Create() es el que se encarga de mostrarnos el formulario de creación de un nuevo elemento. Mientras que el método Post se encarga de actualizar nuestro contexto de datos con el nuevo elemento creado. Por tanto es en este último en el que añadiremos el siguiente código:

  1. [HttpPost]
  2.         public ActionResult Create([Bind(Exclude=«Id»)]HandballTeam TeamToCreate)
  3.         {
  4.             if (!ModelState.IsValid)
  5.             {
  6.                 return View();
  7.             }
  8.             try
  9.             {
  10.                 // TODO: Add insert logic here
  11.                 dbteam.HandballTeams.InsertOnSubmit(TeamToCreate);
  12.                 dbteam.SubmitChanges();
  13.  
  14.                 return RedirectToAction(«Index»);
  15.             }
  16.             catch
  17.             {
  18.                 return View(TeamToCreate);
  19.             }
  20.         }

2. Creamos la vista correspondiente con los parámetros que se observan en la imagen:

image

Continuamos, con el resultado de acción Edit(). Para ello:

1. Dentro del método Get, añadimos el siguientes código de forma que se nos muestre el elemento a editar, a partir de su id:

  1. public ActionResult Edit(int id)
  2.         {
  3.             var TeamToEdit = dbteam.HandballTeams.SingleOrDefault(x => x.TeamID == id);
  4.  
  5.             return View(TeamToEdit);   
  6.  
  7.         }

2. Dentro del método Post, añadimos el siguiente código que se encargará de guardar los cambios realizados en nuestro elemento:

  1. [HttpPost]
  2.         public ActionResult Edit(int id, HandballTeam TeamToEdit)
  3.         {
  4.             TeamToEdit = dbteam.HandballTeams.SingleOrDefault(x => x.TeamID == id);
  5.             try
  6.             {
  7.                 // TODO: Add update logic here
  8.                 UpdateModel(TeamToEdit);
  9.                 dbteam.SubmitChanges();
  10.                 return RedirectToAction(«Index»);
  11.             }
  12.             catch
  13.             {
  14.                 return View(TeamToEdit);
  15.             }
  16.         }

3. Creamos la vista correspondiente con los parámetros que se observan en la imagen:

image

A continuación, configuramos el resultado de acción Details(). Para ello:

1. Mostramos nuestro contexto de datos en forma de lista mediante la acción Details()

  1. public ActionResult Details(int id)
  2.         {
  3.             return View(dbteam.HandballTeams.SingleOrDefault(x => x.TeamID == id));
  4.         }

2. Creamos la vista correspondiente con los parámetros que se observan en la imagen:

image 

Y por último configuramos el resultado de acción Delete(). Para ello:

1. Dentro del método Get, añadimos el siguientes código de forma que se nos muestre el elemento a eliminar, a partir de su Id:

  1. public ActionResult Delete(int id)
  2.         {
  3.             var TeamToDelete = dbteam.HandballTeams.SingleOrDefault(x => x.TeamID == id);
  4.             return View(TeamToDelete);
  5.         }

2. Dentro del método Post, añadimos el siguiente código para que se encargué de eliminar el elemento seleccionado de la base de datos:

  1. [HttpPost]
  2.         public ActionResult Delete(int id, HandballTeam TeamToDelete)
  3.         {
  4.             TeamToDelete = dbteam.HandballTeams.SingleOrDefault(x => x.TeamID == id);
  5.             try
  6.             {
  7.                 // TODO: Add delete logic here
  8.                 dbteam.HandballTeams.DeleteOnSubmit(TeamToDelete);
  9.                 dbteam.SubmitChanges();
  10.                 return RedirectToAction(«Index»);
  11.             }
  12.             catch
  13.             {
  14.                 return View(TeamToDelete);
  15.             }

3. Creamos la vista correspondiente con los parámetros que se observan en la imagen:

image

De esta forma ya podemos interactuar con nuestra base de datos a través de nuestro modelo y las operaciones creadas.

Aquí os dejo el código del proyecto utilizado para este artículo.

Al igual que este artículo ha surgido gracias a los comentarios de los lectores del blog os animo a que contribuyáis con vuestras dudas o inquietudes, para ir generando contenido de interés. 😉

Curso ASP.NET MVC en los CES

Después del verano al igual que los niños toca ¡¡la vuelta al cole!!, y en los Centros de Excelencia Software de Navarra venimos con las tareas hechas. Esta semana se publicó el nuevo catálogo de Talleres y Jornadas CES 2º Semestre 2010, que cuenta con diversos cursos y charlas muy interesantes, y además de temática variada : MS Dynamics, Depuración .NET, Metodologías ágiles …

image

Entre estos curso se encuentra el taller que impartiré los próximos 8 y 9 de Noviembre: “Introducción a la programación de aplicaciones ASP.NET MVC”, y en el que veremos las principales características que presenta el patrón de desarrollo web ASP.NET MVC 2 y aprenderemos a desarrollar aplicaciones utilizando dicho modelo. Se puede encontrar información más detallada aquí.

Animaros 😉