[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 😉

Aplicando Silverlight a “la V de MVC”

En el último artículo que escribí, relacionado con la tecnología ASP.NET MVC, hablé de como explotar los datos de nuestra aplicación web mediante los RIA Services de Silverlight. Pero también comenté que se puede acceder a ellos sin necesidad de utilizar dichos servicios, que es lo que vamos a ver en este caso: el uso de Silverlight como plataforma para mejorar la interfaz de usuario, o lo que en ASP.NET MVC viene a ser la “la V (Vista) ”.

Inicialmente lo que hacemos es crear un proyecto de tipo Silverlight Application llamado SilverlightDep y que se alojará en una aplicación web ASP.NET MVC. Al igual que en el resto de aplicaciones ASP.NET MVC se nos preguntará si queremos crear un proyecto de pruebas unitarias a lo que diremos que no (de momento).

SilverApp image image

A continuación, añadimos la base de datos AdventureWorks_Data a nuestro proyecto, y tal y como hemos visto en otras ocasiones creamos un modelo de acceso a datos de tipo ADO.NET Entity Data Model que nos permita acceder a los elementos de la tabla Department.

image image  imageimage

Una vez definido nuestro modelo de datos, pasamos a diseñar el objeto Silverlight que se encargará de mostrar dichos datos de la forma deseada. Para ello abrimos el archivo Main.xaml, y añadimos un ListBox, llamado Departments, que se encargará de mostrar los nombres de los departamento, y un TextBlock, llamado DepartmentsInfo, en el cual se mostrará toda la información relacionada con el departamento seleccionado. Además configuramos el evento de carga de nuestro control de usuario para que se lance con la carga de la página “Page_Loaded”.

image 

Dentro del proyecto SilverlightDep, añadimos una clase llamada Department que nos permita trabajar con nuestros datos mediante dicho objeto. Por ello, este tiene que tener las mismas propiedades que la tabla Department de nuestra base de datos, para que sea posible el mapeo.

  1. public class Department
  2.     {
  3.  
  4.             public int DepartmentID { get; set; }
  5.             public string Name { get; set; }
  6.             public string GroupName { get; set; }
  7.             public DateTime ModifiedDate { get; set; }
  8.     }

Añadimos las siguientes referencias al proyecto SilverlightDep, para que podamos utilizar Json para serializar nuestros datos, y poder mostrarlos a través de nuestra vista:

System.Runtime.Serialization

System.ServiceModel.Web

Una vez que ya tenemos la interfaz diseñada, vamos a dotar a cada elemento de la funcionalidad específica. Para ello vamos al archivo Main.xaml.cs, añadimos la siguiente referencia:

Inicializamos un objeto de tipo lista de departamentos:

  1. IList<Department> result;

Y añadimos el siguiente código:

– Se lanza la aplicación cliente de Silverlight

  1. void Page_Loaded(object sender, RoutedEventArgs e)
  2.         {
  3.             WebClient wc = new WebClient();
  4.             wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
  5.             wc.OpenReadAsync(new Uri(“http://localhost:49705/Department/List”));
  6.         }

*Para saber cuál es la url que debemos indicar, es necesario compilar la aplicación y ver en que sitio web se está ejecutando. La ruta Department/List se define así porque vamos a trabajar con un controlador llamado Department, y una vista llamada List.

– Se leen los datos de nuestro objeto y se cargan en el ListBox, mediante el uso de la serialización en Json

  1. void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
  2.         {
  3.             DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(List<Department>));
  4.             result = (List<Department>)(json.ReadObject(e.Result));
  5.             for (int i = 0; i < result.Count; i++)
  6.             {
  7.                 Departments.Items.Add(result[i].Name);
  8.             }
  9.  
  10.         }

– Se muestra en el TextBlock la información de cada elemento seleccionado en el ListBox

  1. private void Departments_SelectionChanged(object sender, SelectionChangedEventArgs e)
  2.         {
  3.  
  4.             int index = Departments.SelectedIndex;
  5.             DepartmentsInfo.Text = “DepartmentID: “ + result[index].DepartmentID.ToString() + “n” +
  6.                               “Name: “ + result[index].Name.ToString() + “n” +
  7.                               “GroupName: “ + result[index].GroupName.ToString() + “n” +
  8.                               “ModifiedDate: “ + result[index].ModifiedDate.ToString();
  9.         }

Por último tenemos que crear la vista específica que nos permita interactuar con nuestro objeto cliente Silverlight. Para ello creamos un controlador llamado Department, y que contendrá un ActionResult, que nos devuelva a través de Json la vista que nosotros queremos. Para ello dentro de SilverlightDep.Web, hacemos clic con el botón derecho sobre Controllers > AddController, y creamos un controlador que llamaremos DepartmentController.

Dentro de este archivo:

– Hacemos referencia a las siguientes bibliotecas:

  1. using SilverMvcApp.Web.Models;

– Instanciamos la entidad con la que vamos a trabajar:

  1. AdventureWorks_DataEntities entity = new AdventureWorks_DataEntities();

– Creamos un resultado de acción que nos muestre los datos definidos en la entidad, en forma de lista

  1. public ActionResult List()
  2.         {
  3.             return Json(entity.Department.ToList(),JsonRequestBehavior.AllowGet);
  4.         }

Es necesario, indicar la opción JsonRequestBehavior.AllowGet, ya que si no, podemos tener problemas de acceso a las peticiones Json.

Por último creamos la vista correspondiente, para ello hacemos clic con el botón derecho sobre List > AddView.

image

Dentro de la vista List, en el apartado en MainContent, añadimos nuestro objeto Silverlight, cuyo código generado podemos encontrar en la página de prueba SilverlightDepTestPage.aspx

  1.     <div id=”silverlightControlHost”>
  2.         <object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”100%” height=”100%”>
  3.           <param name=”source” value=”ClientBin/SilverlightDep.xap”/>
  4.           <param name=”onError” value=”onSilverlightError” />
  5.           <param name=”background” value=”white” />
  6.           <param name=”minRuntimeVersion” value=”4.0.50401.0″ />
  7.           <param name=”autoUpgrade” value=”true” />
  8.           <a href=”http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0″ style=”text-decoration:none”>
  9.               <img src=”http://go.microsoft.com/fwlink/?LinkId=161376″ alt=”Get Microsoft Silverlight” style=”border-style:none”/>
  10.           </a>
  11.         </object><iframe id=”_sl_historyFrame” style=”visibility:hidden;height:0px;width:0px;border:0px”></iframe></div>

Compilamos (F5), y el resultado que obtendríamos sería el siguiente.

image 

Si queremos utilizar este objeto en cualquier otra vista, lo único que tenemos que hacer es insertar este mismo código en la vista específica.

Además vamos a ver este mismo proceso pero utilizando un modelo de datos LinqToSql, ya que en artículos anteriores así me lo pedíais. La mayoría del procedimiento es similar a lo visto anteriormente, por lo que sólo comentaré las cosas diferentes. En este caso, nuestro modelo de acceso a datos será de tipo LINQ to SQL Classes, y lo llamaremos DepartmentModel.

image

Y una vez creado el modelo, debemos modificar el archivo DepartmentController, y configurar nuestro resultado de acción List de la siguiente forma:

  1. public ActionResult List()
  2.         {
  3.             DepartmentModelDataContext db = new DepartmentModelDataContext();
  4.             var deps = from dep in db.Departments
  5.                        select new
  6.                        {
  7.                            dep.DepartmentID,
  8.                            dep.Name,
  9.                            dep.GroupName,
  10.                            dep.ModifiedDate
  11.  
  12.                        };
  13.             return Json(deps,JsonRequestBehavior.AllowGet);
  14.  
  15.         }

De esta forma, combinando ASP.NET MVC y Silverlight, podemos crear aplicaciones muy potentes a nivel de interfaz de usuario…¡¡entre otras cosas!!