Modificar elementos del modelo de datos en ASP.NET MVC

En mi post anterior vimos como se podía mostrar los elementos de una base de datos de manera sencilla, pero todavía no éramos capaces de interactuar con ella. Así que vamos a ir viendo como podemos conseguir trabajar con nuestro modelo de datos, implementando algunas acciones específicas mediante un controlador y una serie de vistas.

Para ello vamos a partir del proyecto MvcBookApp, que cree en el post anterior y vamos a ir dotándolo de las funcionalidades Crear, Editar y Mostrar detalles, que son las acciones que se nos añadieron al controlador HomeController al crearlo:

image

Inicialmente añadiremos la referencia a 

  1. using MvcBookApp.Models

de forma que podamos trabajar más cómodamente con los objetos definidos en nuestro modelo. A continuación comenzaremos por implementar la opción Crear, que nos permitirá crear nuevos elementos en nuestra base de datos. Para ello vamos al archivo HomeController.cs y dentro del método Create():

  1. Hacemos clic con el botón derecho y añadimos una vista
  2. Dejamos el nombre que toma por defecto (Create)
  3. Verificamos que está seleccionado el chekbox “Create a strongly-typed view”
  4. Seleccionamos el valor MvcBookApp.Models.Book dentro de la lista desplegable View data class
  5. Seleccionamos el valor Create dentro de la lista desplegable View content
  6. Hacemos clic en el botón Add para añadir la nueva vista.

image image

Como podemos observar el controlador contiene dos métodos denominados Create(). El primero se encarga de mostrar el formulario HTML para crear un nuevo registro. El segundo método se llama cuando se ejecuta el formulario HTML en el servidor, y este contiene la lógica para la inserción de un nuevo libro en la base de datos Book.

Como no nos interesa que el usuario cree el valor del bookID, sino que su actualización sea dinámica, vamos a quitarlo de la vista. Para ello eliminamos el siguiente código:

  1. <div class="editor-label">
  2.                 <%= Html.LabelFor(model => model.bookID) %>
  3.             </div>
  4.             <div class="editor-field">
  5.                 <%= Html.TextBoxFor(model => model.bookID) %>
  6.                 <%= Html.ValidationMessageFor(model => model.bookID) %>
  7.             </div>

Por último vamos a establecer el código que se ejecutará como resultado de la acción Create, dentro de las acciones del controlador:

  1. // POST: /Home/Create
  2.  
  3.         [HttpPost]
  4.         public ActionResult Create(Book bookC)
  5.         {
  6.             try
  7.             {
  8.                 // TODO: Add insert logic here
  9.                 if (!ModelState.IsValid)
  10.                 {
  11.                     return View();
  12.                 }
  13.                 mbook.AddToBooks(bookC);
  14.                 mbook.SaveChanges();
  15.                 return RedirectToAction("Index");
  16.             }
  17.             catch
  18.             {
  19.                 return View();
  20.             }
  21.         }

        

De esta forma si compilamos podemos ver como al seleccionar el vinculo Create new, nos aparece un formulario para introducir un nuevo elemento,permitiéndonos crear nuevos elementos:

image image

A continuación vamos a implementar la funcionalidad de Editar. Para ello vamos a seguir los mismos pasos que antes, y dentro del archivo HomeController.cs, en el método Edit:

  1. Hacemos clic con el botón derecho y añadimos una vista
  2. Dejamos el nombre que toma por defecto (Edit)
  3. Verificamos que está seleccionado el chekbox “Create a strongly-typed view”
  4. Seleccionamos el valor MvcBookApp.Models.Book dentro de la lista desplegable View data class
  5. Seleccionamos el valor Edit dentro de la lista desplegable View content
  6. Hacemos clic en el botón Add para añadir la nueva vista.

image image

Por último establecemos el código que se ejecutará como resultado de la acción Edit, y que será el siguiente:

  1. // GET: /Home/Edit/5
  2.         public ActionResult Edit(int id)
  3.         {
  4.             var bookE = (from m in mbook.Books
  5.  
  6.                                where m.bookID == id
  7.  
  8.                                select m).First();
  9.  
  10.             return View(bookE);
  11.         }
  12.  
  13.         //
  14.         // POST: /Home/Edit/5
  15.  
  16.         [HttpPost]
  17.         public ActionResult Edit(Book bookE)
  18.         {
  19.             try
  20.             {
  21.                 var bookO = (from m in mbook.Books
  22.  
  23.                                      where m.bookID == bookE.bookID
  24.  
  25.                                      select m).First();
  26.  
  27.                 if (!ModelState.IsValid)
  28.  
  29.                 return View(bookO);
  30.                 mbook.ApplyCurrentValues(bookO.EntityKey.EntitySetName, bookE);
  31.                 mbook.SaveChanges();
  32.  
  33.                 return RedirectToAction("Index");
  34.             }
  35.             catch
  36.             {
  37.                 return View();
  38.             }
  39.         }

Si compilamos podemos ver como al seleccionar el vinculo Edit, nos aparece un formulario que nos permite modificar el elemento seleccionado de nuestra lista.

image image

Para terminar vamos a implementar la funcionalidad que nos permita mostrar los detalles de un elemento. Para ello vamos a seguir los mismos pasos que antes, y dentro del archivo HomeController.cs, en el método Details:

  1. Hacemos clic con el botón derecho y añadimos una vista
  2. Dejamos el nombre que toma por defecto (Details)
  3. Verificamos que está seleccionado el chekbox “Create a strongly-typed view”
  4. Seleccionamos el valor MvcBookApp.Models.Book dentro de la lista desplegable View data class
  5. Seleccionamos el valor Details dentro de la lista desplegable View content
  6. Hacemos clic en el botón Add para añadir la nueva vista.

image image

Por último implementaremos la funcionalidad para mostrar, en formato de detalles, los elementos de nuestra base de datos mediante el siguiente código:

  1. public ActionResult Details(int id)
  2.         {
  3.             Book book = mbook.Books.FirstOrDefault(elemento => elemento.bookID == id);
  4.             return View(book);
  5.         }

Si compilamos podemos ver como al seleccionar el vinculo Details, obtenemos los detalles del elemento seleccionado.

image

Para personalizar un poco la aplicación, he modificado alguna de las vistas para que aparezcan los títulos en negrita, y también he eliminado el campo del ID porque no me interesa que se vea en algunas ocasiones. De esta forma ya tendríamos nuestra aplicación perfectamente funcionando, y le podríamos añadir nuevas funcionalidades como, por ejemplo, la opción Delete.

Un comentario sobre “Modificar elementos del modelo de datos en ASP.NET MVC”

  1. Saludos
    Me ha encantado tu post felicidades.
    Tengo una pregunta para ti, como seria lo recomendable para desarrollar con MVC asp, pero en capas y con acceso a datos con el «EntiFram», como seria la esructura a seguir???

    Espero su respuesta.
    pedfer_chonero@hotmail.com
    Gracias
    Pedro Zambrano

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *