Iteración n.º 1: Crear la aplicación (C#)

de Microsoft

Descargar código

En la primera iteración, creamos el Administrador de contactos de la manera más sencilla posible. Agregamos compatibilidad con operaciones básicas de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD).

Creación de una aplicación de administración de contactos ASP.NET MVC (VB)

En esta serie de tutoriales, creamos una aplicación completa de administración de contactos de principio a fin. La aplicación Contact Manager le permite almacenar información de contacto (nombres, números de teléfono y direcciones de correo electrónico) para obtener una lista de personas.

Compilamos la aplicación en varias iteraciones. Con cada iteración, mejoramos gradualmente la aplicación. El objetivo de este enfoque de iteración múltiple es permitirle comprender el motivo de cada cambio.

• Iteración n.º 1: Crear la aplicación. En la primera iteración, creamos el Administrador de contactos de la manera más sencilla posible. Agregamos compatibilidad con operaciones básicas de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD).

• Iteración n.º 2: Hacer que la aplicación tenga un buen aspecto. En esta iteración, mejoramos la apariencia de la aplicación modificando la página maestra de vista de MVC predeterminada ASP.NET y la hoja de estilos en cascada.

• Iteración n.º 3: Agregar una validación de formulario. En la tercera iteración, agregamos validación básica de formularios. Evitamos que los usuarios envíen un formulario sin completar los campos de formulario obligatorios. También validamos las direcciones de correo electrónico y los números de teléfono.

• Iteración n.º 4: Hacer que la aplicación tenga un acoplamiento flexible. En esta cuarta iteración, aprovechamos varios patrones de diseño de software para facilitar el mantenimiento y modificación de la aplicación Contact Manager. Por ejemplo, refactorizamos la aplicación para usar el patrón Repository y el patrón de inserción de dependencias.

• Iteración n.º 5: Crear pruebas unitarias. En la quinta iteración, hacemos que la aplicación sea más fácil de mantener y modificar agregando pruebas unitarias. Simulamos nuestras clases de modelo de datos y compilamos pruebas unitarias para nuestros controladores y lógica de validación.

• Iteración n.º 6: Usar el desarrollo mediante pruebas. En esta sexta iteración, agregamos nueva funcionalidad a nuestra aplicación escribiendo primero pruebas unitarias y escribiendo código en las pruebas unitarias. En esta iteración, agregamos grupos de contactos.

• Iteración n.º 7: Agregar funcionalidad de Ajax. En la séptima iteración, mejoramos la capacidad de respuesta y el rendimiento de nuestra aplicación agregando compatibilidad con Ajax.

Esta iteración

En esta primera iteración, compilamos la aplicación básica. El objetivo es crear el Administrador de contactos de la manera más rápida y sencilla posible. En iteraciones posteriores, mejoramos el diseño de la aplicación.

La aplicación Contact Manager es una aplicación básica controlada por base de datos. Puede usar la aplicación para crear nuevos contactos, editar contactos existentes y eliminar contactos.

En esta iteración, se completan los pasos siguientes:

1. Aplicación de ASP.NET MVC
2. Crear una base de datos para almacenar nuestros contactos
3. Generación de una clase de modelo para nuestra base de datos con Microsoft Entity Framework
4. Creación de una acción y vista del controlador que nos permite enumerar todos los contactos de la base de datos
5. Creación de acciones de controlador y una vista que nos permite crear un nuevo contacto en la base de datos
6. Crear acciones de controlador y una vista que nos permita editar un contacto existente en la base de datos
7. Crear acciones de controlador y una vista que nos permita eliminar un contacto existente en la base de datos

Requisitos previos de software

En ASP.NET aplicaciones MVC, debe tener Instalado Visual Studio 2008 o Visual Web Developer 2008 en el equipo (Visual Web Developer es una versión gratuita de Visual Studio que no incluye todas las características avanzadas de Visual Studio). Puede descargar la versión de prueba de Visual Studio 2008 o Visual Web Developer desde la siguiente dirección:

https://www.asp.net/downloads/essential/

Nota:

Para ASP.NET aplicaciones MVC con Visual Web Developer, debe tener instalado Visual Web Developer Service Pack 1. Sin Service Pack 1, no puede crear proyectos de aplicación web.

ASP.NET MVC Framework. Puede descargar el marco de ASP.NET MVC desde la siguiente dirección:

https://www.asp.net/mvc

En este tutorial, se usa Microsoft Entity Framework para acceder a una base de datos. Entity Framework se incluye con .NET Framework 3.5 Service Pack 1. Puede descargar este Service Pack desde la siguiente ubicación:

https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35

Como alternativa a realizar cada una de estas descargas una por una, puede aprovechar el Instalador de plataforma web (WEB PI). Puede descargar el PI web desde la siguiente dirección:

https://www.asp.net/downloads/essential/

Proyecto ASP.NET MVC

ASP.NET MVC Proyecto de aplicación web. Inicie Visual Studio y seleccione la opción de menú Archivo, Nuevo proyecto. Aparece el cuadro de diálogo Nuevo proyecto (vea la figura 1). Seleccione el tipo de proyecto web y la plantilla ASP.NET aplicación web MVC. Asigne al nuevo proyecto el nombre ContactManager y haga clic en el botón Aceptar.

Asegúrese de que ha seleccionado .NET Framework 3.5 en la lista desplegable de la parte superior derecha del cuadro de diálogo Nuevo proyecto . De lo contrario, no aparecerá la plantilla ASP.NET aplicación web MVC.

Figura 01: Cuadro de diálogo Nuevo proyecto(Haga clic para ver la imagende tamaño completo)

ASP.NET aplicación MVC, aparece el cuadro de diálogo Crear proyecto de prueba unitaria. Puede usar este cuadro de diálogo para indicar que desea crear y agregar un proyecto de prueba unitaria a la solución al crear la aplicación ASP.NET MVC. Aunque no crearemos pruebas unitarias en esta iteración, debe seleccionar la opción Sí, crear un proyecto de prueba unitaria porque tenemos previsto agregar pruebas unitarias en una iteración posterior. Agregar un proyecto de prueba al crear por primera vez un nuevo proyecto de ASP.NET MVC es mucho más fácil que agregar un proyecto de prueba después de crear el proyecto de ASP.NET MVC.

Nota:

Dado que Visual Web Developer no admite proyectos de prueba, no obtiene el cuadro de diálogo Crear proyecto de prueba unitaria al usar Visual Web Developer.

Figura 02: Cuadro de diálogo Crear proyecto de prueba unitaria (haga clic para ver la imagende tamaño completo)

ASP.NET aplicación MVC aparece en la ventana Explorador de soluciones de Visual Studio (vea la figura 3). Si no ve la ventana Explorador de soluciones, puede abrir esta ventana seleccionando la opción de menú Ver, explorador de soluciones. Observe que la solución contiene dos proyectos: el proyecto ASP.NET MVC y el proyecto Test. El proyecto ASP.NET MVC se denomina ContactManager y el proyecto Test se denomina ContactManager.Tests.

Figura 03: Ventana explorador de soluciones (haga clic para ver la imagen de tamaño completo)

Eliminación de los archivos de ejemplo de proyecto

La plantilla de proyecto ASP.NET MVC incluye archivos de ejemplo para controladores y vistas. Antes de crear una nueva aplicación ASP.NET MVC, debe eliminar estos archivos. Puede eliminar archivos y carpetas en la ventana explorador de soluciones haciendo clic con el botón derecho en un archivo o carpeta y seleccionando la opción de menú Eliminar.

Debe eliminar los siguientes archivos del proyecto de ASP.NET MVC:

• \Controllers\HomeController.cs

• \Views\Home\About.aspx

• \Views\Home\Index.aspx

Además, debe eliminar el siguiente archivo del proyecto De prueba:

\Controllers\HomeControllerTest.cs

Creación de la base de datos

La aplicación Contact Manager es una aplicación web controlada por base de datos. Usamos una base de datos para almacenar la información de contacto.

El marco de ASP.NET MVC con cualquier base de datos moderna, incluidas las bases de datos de Microsoft SQL Server, Oracle, MySQL e IBM DB2. En este tutorial, se usa una base de datos de Microsoft SQL Server. Al instalar Visual Studio, se le proporciona la opción de instalar Microsoft SQL Server Express, que es una versión gratuita de la base de datos de Microsoft SQL Server.

Cree una nueva base de datos haciendo clic con el botón derecho en la carpeta App_Data en la ventana Explorador de soluciones y seleccionando la opción de menú Agregar, Nuevo elemento. En el cuadro de diálogo Agregar nuevo elemento, seleccione la categoría Datos y la plantilla Base de datos de SQL Server (vea la figura 4). Asigne un nombre al nuevo ContactManagerDB.mdf de base de datos y haga clic en el botón Aceptar.

Figura 04: Crear una nueva base de datos de Microsoft SQL Server Express (haga clic para ver la imagen de tamaño completo)

Después de crear la nueva base de datos, la base de datos aparece en la carpeta App_Data en la ventana Explorador de soluciones. Haga doble clic en el archivo ContactManager.mdf para abrir la ventana Explorador de servidores y conectarse a la base de datos.

Nota:

La ventana Explorador de servidores se denomina ventana Explorador de bases de datos en el caso de Microsoft Visual Web Developer.

Puede usar la ventana Explorador de servidores para crear nuevos objetos de base de datos, como tablas de base de datos, vistas, desencadenadores y procedimientos almacenados. Haga clic con el botón derecho en la carpeta Tablas y seleccione la opción de menú Agregar nueva tabla. Aparece el Diseñador de tablas de base de datos (vea la figura 5).

Figura 05: Diseñador de tablas de base de datos (haga clic para ver la imagen de tamaño completo)

Es necesario crear una tabla que contenga las columnas siguientes:

Nombre de la columna	Tipo de datos	Permitir valores NULL
Identificador	int	false
Nombre	nvarchar(50)	false
Apellidos	nvarchar(50)	false
Teléfono	nvarchar(50)	false
Email	nvarchar(255)	false

La primera columna, la columna Id, es especial. Debe marcar la columna Id como una columna Identity y una columna Primary Key. Para indicar que una columna es una columna Identidad, expanda Propiedades de columna (vea la parte inferior de la figura 6) y desplácese hacia abajo hasta la propiedad Especificación de identidad. Establezca la propiedad (Is Identity) en el valor Sí.

Para marcar una columna como una columna de clave principal, seleccione la columna y haga clic en el botón con el icono de una clave. Después de marcar una columna como una columna de clave principal, aparece un icono de una clave junto a la columna (vea la figura 6).

Después de terminar de crear la tabla, haga clic en el botón Guardar (el botón con un icono de un disquete) para guardar la nueva tabla. Asigne a la nueva tabla el nombre Contactos.

Después de terminar de crear la tabla de base de datos Contactos, debe agregar algunos registros a la tabla. Haga clic con el botón derecho en la tabla Contactos en la ventana Explorador de servidores y seleccione la opción de menú Mostrar datos de tabla. Escriba uno o varios contactos en la cuadrícula que aparece.

Creación del modelo de datos

La aplicación ASP.NET MVC consta de modelos, vistas y controladores. Comenzamos creando una clase Model que representa la tabla Contacts que creamos en la sección anterior.

En este tutorial, se usa Microsoft Entity Framework para generar automáticamente una clase de modelo a partir de la base de datos.

Nota:

El marco de ASP.NET MVC no está vinculado a Microsoft Entity Framework de ninguna manera. Puede usar ASP.NET MVC con tecnologías de acceso a bases de datos alternativas, como NHibernate, LINQ to SQL o ADO.NET.

Siga estos pasos para crear las clases de modelo de datos:

1. Haga clic con el botón derecho en la carpeta Modelos de la ventana Explorador de soluciones y seleccione Agregar, Nuevo elemento. Aparece el cuadro de diálogo Agregar nuevo elemento (vea la figura 6).
2. En la categoría Datos, seleccione la plantilla Entity Data Model de ADO.NET. Asigne un nombre al modelo de datos ContactManagerModel.edmx y haga clic en el botón Agregar. Aparecerá el Asistente para Entity Data Model (consultar 7).
3. En el paso Elegir contenido del modelo, seleccione Generar a partir de la base de datos (vea la figura 7).
4. En el paso Elegir la conexión de datos, seleccione la base de datos ContactManagerDB.mdf y escriba el nombre ContactManagerDBEntities para la configuración de conexión de entidad (vea la figura 8).
5. En el paso Elegir los objetos de base de datos, active la casilla tablas con la etiqueta Tablas (vea la figura 9). El modelo de datos incluirá todas las tablas contenidas en la base de datos (solo hay una, la tabla Contactos). Escriba el espacio de nombres Modelos. Haga clic en el botón Finalizar para completar el asistente.

Figura 06: Cuadro de diálogo Agregar nuevo elemento (haga clic para ver la imagen de tamaño completo)

Figura 07: Elegir contenido del modelo (haga clic para ver la imagen de tamaño completo)

Figura 08: Elegir la conexión de datos (haga clic para ver la imagen de tamaño completo)

Figura 09: Elegir los objetos de base de datos (haga clic para ver la imagen de tamaño completo)

Después de completar el Asistente para modelos de datos de entidad, aparece el Diseñador de modelos de datos de entidad. El diseñador muestra una clase que corresponde a cada tabla que se modela. Debería ver una clase denominada Contacts.

El Asistente para entity Data Model genera nombres de clase basados en nombres de tabla de base de datos. Casi siempre debe cambiar el nombre de la clase generada por el asistente. Haga clic con el botón derecho en la clase Contacts del diseñador y seleccione la opción de menú Cambiar nombre. Cambie el nombre de la clase de Contacts (plural) a Contact (singular). Después de cambiar el nombre de clase, la clase debería aparecer como la figura 10.

Figura 10: La clase Contact (Haga clic para ver la imagen de tamaño completo)

En este momento, hemos creado nuestro modelo de base de datos. Podemos usar la clase Contact para representar un registro de contacto determinado en nuestra base de datos.

Creación del controlador principal

El siguiente paso es crear nuestro controlador de inicio. El controlador Home es el controlador predeterminado invocado en una aplicación ASP.NET MVC.

Cree la clase Home controller haciendo clic con el botón derecho en la carpeta Controllers de la ventana Explorador de soluciones y seleccionando la opción de menú Agregar, Controlador (vea la figura 11). Observe la casilla denominada Agregar métodos de acción para escenarios de creación, actualización y detalles. Asegúrese de que esta casilla está activada antes de hacer clic en el botón Agregar.

Figura 11: Agregar el controlador inicio (haga clic para ver la imagen de tamaño completo)

Al crear el controlador Home, obtendrá la clase en La lista 1.

Lista 1: Controladores\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace ContactManager.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /Home/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /Home/Create

        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /Home/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Home/Edit/5
 
        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /Home/Edit/5

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

Enumerar los contactos

Para mostrar los registros en la tabla de base de datos Contactos, es necesario crear una acción Index() y una vista Índice.

El controlador inicio ya contiene una acción Index(). Es necesario modificar este método para que tenga un aspecto similar al listado 2.

Lista 2: Controladores\HomeController.cs

public class HomeController : Controller
{

    private ContactManagerDBEntities _entities = new ContactManagerDBEntities();

    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View(_entities.ContactSet.ToList());
    }
…

Tenga en cuenta que la clase De controlador Home de La lista 2 contiene un campo privado denominado _entities. El campo _entities representa las entidades del modelo de datos. Usamos el campo _entities para comunicarse con la base de datos.

El método Index() devuelve una vista que representa todos los contactos de la tabla de base de datos Contacts. Expresión _entities. ContactSet.ToList() devuelve la lista de contactos como una lista genérica.

Ahora que hemos creado el controlador de índice, debemos crear la vista Índice. Antes de crear la vista Índice, compile la aplicación seleccionando la opción de menú Compilar, Compilar solución. Siempre debe compilar el proyecto antes de agregar una vista para que se muestre la lista de clases de modelo en el cuadro de diálogo Agregar vista.

Para crear la vista Índice, haga clic con el botón derecho en el método Index() y seleccione la opción de menú Agregar vista (vea la figura 12). Al seleccionar esta opción de menú se abre el cuadro de diálogo Agregar vista (vea la figura 13).

Figura 12: Agregar la vista Índice (haga clic para ver la imagen de tamaño completo)

En el cuadro de diálogo Agregar vista, active la casilla con la etiqueta Crear una vista fuertemente tipada. Seleccione la clase de datos View ContactManager.Models.Contact y View content List( Ver lista de contenido). Al seleccionar estas opciones, se genera una vista que muestra una lista de registros de contactos.

Figura 13: Cuadro de diálogo Agregar vista (haga clic para ver la imagen de tamaño completo)

Al hacer clic en el botón Agregar, se genera la vista Índice de la lista 3. Observe la directiva <%@ Page %> que aparece en la parte superior del archivo. La vista Index hereda de la clase ContactManager.Models.Contact< de ViewPage <IEnumerable>>. En otras palabras, la clase Model de la vista representa una lista de entidades Contact.

El cuerpo de la vista Índice contiene un bucle foreach que recorre en iteración cada uno de los contactos representados por la clase Model. El valor de cada propiedad de la clase Contact se muestra dentro de una tabla HTML.

Listado 3 - Views\Home\Index.aspx (sin modificar)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ContactManager.Models.Contact>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>
                Id
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>

    <% foreach (var item in Model) { %>
    
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
                <%= Html.ActionLink("Details", "Details", new { id=item.Id  })%>
            </td>
            <td>
                <%= Html.Encode(item.Id) %>
            </td>
            <td>
                <%= Html.Encode(item.FirstName) %>
            </td>
            <td>
                <%= Html.Encode(item.LastName) %>
            </td>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
    
    <% } %>

    </table>

    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>

</asp:Content>

Es necesario realizar una modificación en la vista Índice. Dado que no estamos creando una vista Detalles, podemos quitar el vínculo Detalles. Busque y quite el código siguiente de la vista Índice:

{ id=item. Id.})%>

Después de modificar la vista Índice, puede ejecutar la aplicación Contact Manager. Seleccione la opción de menú Depurar, Iniciar depuración o simplemente presione F5. La primera vez que ejecute la aplicación, obtendrá el cuadro de diálogo en la figura 14. Seleccione la opción Modificar el archivo Web.config para habilitar la depuración y haga clic en el botón Aceptar.

Figura 14: Habilitación de la depuración (haga clic para ver la imagen de tamaño completo)

La vista Índice se devuelve de forma predeterminada. En esta vista se enumeran todos los datos de la tabla de base de datos Contactos (vea la figura 15).

Figura 15: Vista índice (haga clic para ver la imagen de tamaño completo)

Observe que la vista Índice incluye un vínculo con la etiqueta Create New (Crear nuevo) en la parte inferior de la vista. En la sección siguiente, aprenderá a crear nuevos contactos.

Crear nuevos contactos

Para permitir que los usuarios creen nuevos contactos, es necesario agregar dos acciones Create() al controlador Home. Es necesario crear una acción Create() que devuelva un formulario HTML para crear un nuevo contacto. Es necesario crear una segunda acción Create() que realice la inserción real de la base de datos del nuevo contacto.

Los nuevos métodos Create() que necesitamos agregar al controlador Home se encuentran en la lista 4.

Lista 4: Controladores\HomeController.cs (con métodos Create)

//
// GET: /Home/Create

public ActionResult Create()
{
    return View();
} 

//
// POST: /Home/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        _entities.AddToContactSet(contactToCreate);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

El primer método Create() se puede invocar con un HTTP GET, mientras que el segundo método Create() solo se puede invocar mediante HTTP POST. En otras palabras, el segundo método Create() solo se puede invocar al publicar un formulario HTML. El primer método Create() simplemente devuelve una vista que contiene el formulario HTML para crear un nuevo contacto. El segundo método Create() es mucho más interesante: agrega el nuevo contacto a la base de datos.

Observe que se ha modificado el segundo método Create() para aceptar una instancia de la clase Contact. Los valores de formulario publicados desde el formulario HTML están enlazados a esta clase Contact por el marco de ASP.NET MVC automáticamente. Cada campo de formulario del formulario HTML Create se asigna a una propiedad del parámetro Contact.

Observe que el parámetro Contact está decorado con un atributo [Bind]. El atributo [Bind] se usa para excluir la propiedad Contact Id del enlace. Dado que la propiedad Id representa una propiedad Identity, no queremos establecer la propiedad Id.

En el cuerpo del método Create(), entity Framework se usa para insertar el nuevo contacto en la base de datos. El nuevo contacto se agrega al conjunto existente de Contactos y se llama al método SaveChanges() para volver a insertar estos cambios en la base de datos subyacente.

Puede generar un formulario HTML para crear nuevos contactos haciendo clic con el botón derecho en cualquiera de los dos métodos Create() y seleccionando la opción de menú Agregar vista (vea la figura 16).

Figura 16: Agregar la vista Crear (haga clic para ver la imagen de tamaño completo)

En el cuadro de diálogo Agregar vista, seleccione la clase ContactManager.Models.Contact y la opción Crear para ver contenido (vea la figura 17). Al hacer clic en el botón Agregar, se genera automáticamente una vista Crear.

Figura 17: Ver una explosión de página (Haga clic para ver la imagen de tamaño completo)

La vista Crear contiene campos de formulario para cada una de las propiedades de la clase Contact. El código de la vista Crear se incluye en la lista 5.

Lista 5 - Views\Home\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Después de modificar los métodos Create() y agregar la vista Crear, puede ejecutar la aplicación Contact Manger y crear nuevos contactos. Haga clic en el vínculo Crear nuevo que aparece en la vista Índice para ir a la vista Crear. Debería ver la vista en la figura 18.

Figura 18: La vista Crear (haga clic para ver la imagende tamaño completo)

Edición de contactos

Agregar la funcionalidad para editar un registro de contacto es muy similar a agregar la funcionalidad para crear nuevos registros de contacto. En primer lugar, es necesario agregar dos nuevos métodos Edit a la clase Home controller. Estos nuevos métodos Edit() se incluyen en la lista 6.

Lista 6: Controladores\HomeController.cs (con métodos Edit)

//
// GET: /Home/Edit/5

public ActionResult Edit(int id)
{
    var contactToEdit = (from c in _entities.ContactSet
                           where c.Id == id
                           select c).FirstOrDefault();

    return View(contactToEdit);
}

//
// POST: /Home/Edit/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Contact contactToEdit)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        var originalContact = (from c in _entities.ContactSet
                             where c.Id == contactToEdit.Id
                             select c).FirstOrDefault();
        _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}
}

Una operación HTTP GET invoca el primer método Edit(). Se pasa un parámetro Id a este método que representa el identificador del registro de contacto que se está editando. Entity Framework se usa para recuperar un contacto que coincida con el identificador. Se devuelve una vista que contiene un formulario HTML para editar un registro.

El segundo método Edit() realiza la actualización real a la base de datos. Este método acepta una instancia de la clase Contact como parámetro. El marco de ASP.NET MVC enlaza automáticamente los campos de formulario desde el formulario Editar a esta clase. Observe que no incluye el atributo[Bind] al editar un contacto (necesitamos el valor de la propiedad Id).

Entity Framework se usa para guardar el contacto modificado en la base de datos. El contacto original debe recuperarse primero de la base de datos. A continuación, se llama al método ApplyPropertyChanges() de Entity Framework para registrar los cambios en el contacto. Por último, se llama al método SaveChanges() de Entity Framework para conservar los cambios en la base de datos subyacente.

Puede generar la vista que contiene el formulario Editar haciendo clic con el botón derecho en el método Edit() y seleccionando la opción de menú Agregar vista. En el cuadro de diálogo Agregar vista, seleccione la clase ContactManager.Models.Contact y el contenido de la vista Editar (vea la figura 19).

Figura 19: Agregar una vista de edición (haga clic para ver la imagende tamaño completo)

Al hacer clic en el botón Agregar, se genera automáticamente una nueva vista Editar. El formulario HTML que se genera contiene campos que corresponden a cada una de las propiedades de la clase Contact (vea Lista 7).

Lista 7- Views\Home\Edit.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Eliminar contactos

Si desea eliminar contactos, debe agregar dos acciones Delete() a la clase Home controller. La primera acción Eliminar() muestra un formulario de confirmación de eliminación. La segunda acción Delete() realiza la eliminación real.

Nota:

Más adelante, en Iteración n.º 7, modificamos el Administrador de contactos para que admita una eliminación de Ajax de un solo paso.

Los dos nuevos métodos Delete() se incluyen en la lista 8.

Lista 8: Controladores\HomeController.cs (métodos Delete)

//
// GET: /Home/Delete/5

public ActionResult Delete(int id)
{
    var contactToDelete = (from c in _entities.ContactSet
                         where c.Id == id
                         select c).FirstOrDefault();

    return View(contactToDelete);
}

//
// POST: /Home/Delete/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(Contact contactToDelete)
{
    try
    {
        var originalContact = (from c in _entities.ContactSet
                               where c.Id == contactToDelete.Id
                               select c).FirstOrDefault();

        _entities.DeleteObject(originalContact);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

El primer método Delete() devuelve un formulario de confirmación para eliminar un registro de contacto de la base de datos (ver Figura20). El segundo método Delete() realiza la operación de eliminación real en la base de datos. Una vez recuperado el contacto original de la base de datos, se llama a los métodos Entity Framework DeleteObject() y SaveChanges() para realizar la eliminación de la base de datos.

Figura 20: La vista de confirmación de eliminación (haga clic para ver la imagende tamaño completo)

Es necesario modificar la vista Índice para que contenga un vínculo para eliminar registros de contacto (vea la figura 21). Debe agregar el código siguiente a la misma celda de tabla que contiene el vínculo Editar:

Html.ActionLink( { id=item. Id}) %>

Figura 21: Vista de índice con vínculo Editar (haga clic para ver la imagen de tamaño completo)

A continuación, es necesario crear la vista de confirmación de eliminación. Haga clic con el botón derecho en el método Delete() de la clase Controladora de inicio y seleccione la opción de menú Agregar vista. Aparece el cuadro de diálogo Agregar vista (vea la figura 22).

A diferencia de en el caso de las vistas Lista, Crear y Editar, el cuadro de diálogo Agregar vista no contiene una opción para crear una vista Eliminar. En su lugar, seleccione la clase de datos ContactManager.Models.Contact y el contenido de la vista Vacía. Al seleccionar la opción De contenido de vista vacía, es necesario crear la vista nosotros mismos.

Figura 22: Agregar la vista de confirmación de eliminación (haga clic para ver la imagende tamaño completo)

El contenido de la vista Eliminar se encuentra en la lista 9. Esta vista contiene un formulario que confirma si se debe eliminar o no un contacto determinado (consulte la figura 21).

Lista 9- Vistas\Inicio\Delete.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Delete</h2>
    
    <p>
    Are you sure that you want to delete the entry for
    <%= Model.FirstName %> <%= Model.LastName %>?
    </p>

    <% using (Html.BeginForm(new { Id = Model.Id }))
       { %>
       <p> 
            <input type="submit" value="Delete" />
        </p>
    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Cambiar el nombre del controlador predeterminado

Puede molestarte que el nombre de nuestra clase de controlador para trabajar con contactos se denomina la clase HomeController. ¿No debería llamarse ContactController el controlador?

Este problema es lo suficientemente fácil de corregir. En primer lugar, es necesario refactorizar el nombre del controlador home. Abra la clase HomeController en el Editor de Visual Studio Code, haga clic con el botón derecho en el nombre de la clase y seleccione la opción de menú Refactorizar, Cambiar nombre. Al seleccionar esta opción de menú se abre el cuadro de diálogo Cambiar nombre.

Figura 23: Refactorización de un nombre de controlador (haga clic para ver la imagen de tamaño completo)

Figura 24: Usar el cuadro de diálogo Cambiar nombre (haga clic para ver la imagen de tamaño completo)

Si cambia el nombre de la clase de controlador, Visual Studio actualizará también el nombre de la carpeta en la carpeta Vistas. Visual Studio cambiará el nombre de la carpeta \Views\Home a la carpeta \Views\Contact.

Después de realizar este cambio, la aplicación ya no tendrá un controlador home. Al ejecutar la aplicación, obtendrá la página de error de la figura 25.

Figura 25: Sin controlador predeterminado (haga clic para ver la imagen de tamaño completo)

Es necesario actualizar la ruta predeterminada en el archivo Global.asax para usar el controlador de contacto en lugar del controlador inicio. Abra el archivo Global.asax y modifique el controlador predeterminado usado por la ruta predeterminada (vea Lista 10).

Lista 10: Global.asax.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace ContactManager
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Contact", action = "Index", id = "" }  // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

Después de realizar estos cambios, el Administrador de contactos se ejecutará correctamente. Ahora, usará la clase contact controller como controlador predeterminado.

Resumen

En esta primera iteración, creamos una aplicación básica de Contact Manager de la manera más rápida posible. Aprovechamos Visual Studio para generar el código inicial de nuestros controladores y vistas automáticamente. También aprovechamos Entity Framework para generar automáticamente nuestras clases de modelo de base de datos.

Actualmente, podemos enumerar, crear, editar y eliminar registros de contacto con la aplicación Contact Manager. En otras palabras, podemos realizar todas las operaciones básicas de base de datos requeridas por una aplicación web controlada por base de datos.

Desafortunadamente, nuestra aplicación tiene algunos problemas. Primero y dudo en admitir esto, la aplicación Contact Manager no es la aplicación más atractiva. Necesita algún trabajo de diseño. En la siguiente iteración, veremos cómo podemos cambiar la página maestra de vista predeterminada y la hoja de estilos en cascada para mejorar la apariencia de la aplicación.

En segundo lugar, no hemos implementado ninguna validación de formularios. Por ejemplo, no hay nada para evitar que envíe el formulario Crear contacto sin escribir valores para ninguno de los campos de formulario. Además, puede escribir números de teléfono y direcciones de correo electrónico no válidos. Empezamos a abordar el problema de la validación de formularios en iteración n.º 3.

Por último, y lo más importante, la iteración actual de la aplicación Contact Manager no se puede modificar ni mantener fácilmente. Por ejemplo, la lógica de acceso a la base de datos se realiza directamente en las acciones del controlador. Esto significa que no podemos modificar nuestro código de acceso a datos sin modificar nuestros controladores. En iteraciones posteriores, exploramos los patrones de diseño de software que podemos implementar para que contact Manager sea más resistente al cambio.

Siguiente