Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
por Microsoft
En la primera iteración, creamos la aplicación Contact Manager de la manera más sencilla posible. Se ha agregado compatibilidad con operaciones básicas de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD).
Creación de una aplicación ASP.NET MVC de administración de contactos (VB)
En esta serie de tutoriales, crearemos una aplicación completa de administración de contactos de principio a fin. La aplicación Contact Manager permite almacenar información de contacto (nombres, números de teléfono y direcciones de correo electrónico) de una lista de personas.
Compilaremos la aplicación en varias iteraciones. Con cada iteración, mejoraremos 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: Creación de la aplicación En la primera iteración, creamos la aplicación Contact Manager de la manera más sencilla posible. Se ha agregado compatibilidad con operaciones básicas de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD).
Iteración n.º 2: Hacer atractiva la aplicación En esta iteración, mejoraremos la apariencia de la aplicación modificando la página maestra de vistas y la hoja de estilos en cascada predeterminadas de ASP.NET MVC.
Iteración n.º 3: Adición de una validación de formulario En la tercera iteración, agregaremos validación básica de formularios. Evitaremos que los usuarios envíen un formulario sin rellenar los campos de formulario obligatorios. También validaremos las direcciones de correo electrónico y los números de teléfono.
Iteración n.º 4: Hacer que la aplicación se acople de forma flexible En esta cuarta iteración, aprovecharemos varios patrones de diseño de software para facilitar el mantenimiento y la modificación de la aplicación Contact Manager. Por ejemplo, refactorizaremos nuestra aplicación para usar el patrón Repositorio y el patrón Inserción de dependencias.
Iteración n.º 5: Creación de pruebas unitarias En la quinta iteración, haremos que la aplicación sea más fácil de mantener y modificar mediante la adición de pruebas unitarias. Simularemos nuestras clases de modelo de datos y compilaremos pruebas unitarias para nuestros controladores y nuestra lógica de validación.
Iteración n.º 6: Uso del desarrollo controlado por pruebas En esta sexta iteración, agregaremos nueva funcionalidad a nuestra aplicación escribiendo primero pruebas unitarias y escribiendo luego código basado en las pruebas unitarias. En esta iteración, agregaremos grupos de contactos.
Iteración n.º 7: Adición de funcionalidad de Ajax En la séptima iteración, mejoraremos la capacidad de respuesta y el rendimiento de nuestra aplicación agregando compatibilidad con Ajax.
Esta iteración
En esta primera iteración, crearemos la aplicación básica. El objetivo es crear la aplicación Contact Manager de la manera más rápida y sencilla posible. En iteraciones posteriores, mejoraremos 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 realizarán los pasos siguientes:
- Aplicación ASP.NET MVC
- Crear una base de datos para almacenar nuestros contactos.
- Generar una clase de modelo para nuestra base de datos con Microsoft Entity Framework.
- Crear una acción de controlador y una vista que nos permita enumerar todos los contactos de la base de datos.
- Crear acciones de controlador y una vista que nos permita crear un nuevo contacto en la base de datos.
- Crear acciones de controlador y una vista que nos permita editar un contacto existente en la base de datos.
- Crear acciones de controlador y una vista que nos permita eliminar un contacto existente de la base de datos.
Requisitos previos de software
En la aplicación ASP.NET 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 en la siguiente dirección:
https://www.asp.net/downloads/essential/
Nota:
Para aplicaciones ASP.NET 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.
Marco ASP.NET MVC. Puede descargar el marco ASP.NET MVC en la siguiente dirección:
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 archivo en 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 usar el Instalador de plataforma web (Web PI). Puede descargar Web PI en la siguiente dirección:
https://www.asp.net/downloads/essential/
Proyecto ASP.NET MVC
Proyecto de aplicación web ASP.NET MVC. Inicie Visual Studio y seleccione la opción de menú Archivo, Nuevo proyecto. Aparece el diálogo Nuevo proyecto (vea la figura 1). Seleccione el tipo de proyecto Web y la plantilla Aplicación web ASP.NET MVC. Asigne al nuevo proyecto el nombre ContactManager y haga clic en el botón Aceptar.
Asegúrese de que tiene .NET Framework 3.5 seleccionado en la lista desplegable de la parte superior derecha del cuadro de diálogo Nuevo proyecto. De lo contrario, no aparecerá la plantilla Aplicación web ASP.NET MVC.
Figura 01: Cuadro de diálogo Nuevo proyecto (Haga clic para ver la imagen a tamaño completo)
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 vamos a crear 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 la primera vez que se crea un nuevo proyecto de ASP.NET MVC es mucho más fácil que hacerlo una vez creado.
Nota:
Dado que Visual Web Developer no admite proyectos de prueba, no aparece 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 (Haga clic para ver la imagen a tamaño completo)
La aplicación ASP.NET MVC aparece en la ventana del Explorador de soluciones de Visual Studio (vea la figura 3). Si no ve la ventana del Explorador de soluciones, puede abrirla 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 de prueba. El proyecto ASP.NET MVC se llama ContactManager y el proyecto de prueba ContactManager.Tests.
Figura 03: La ventana del Explorador de soluciones (Haga clic para ver la imagen a tamaño completo)
Eliminación de los archivos de ejemplo del 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 del 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 ASP.NET MVC:
\Controllers\HomeController.vb
\Views\Home\About.aspx
\Views\Home\Index.aspx
Además, debe eliminar el siguiente archivo del proyecto de prueba:
\Controllers\HomeControllerTest.vb
Creación de la base de datos
La aplicación Contact Manager es una aplicación web controlada por base de datos. Usaremos una base de datos para almacenar la información de contacto.
El marco 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; para ello, haga clic con el botón derecho en la carpeta App_Data de la ventana del Explorador de soluciones y seleccione 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 SQ Server (vea la figura 4). Asigne a la nueva base de datos el nombre ContactManagerDB.mdf y haga clic en el botón Aceptar.
Figura 04: Creación de una nueva base de datos de Microsoft SQL Server Express (Haga clic para ver la imagen a tamaño completo)
Después de crear la nueva base de datos, esta aparece en la carpeta App_Data de la ventana del Explorador de soluciones. Haga doble clic en el archivo ContactManager.mdf para abrir la ventana del Explorador de servidores y conectarse a la base de datos.
Nota:
La ventana del Explorador de servidores se llama Explorador de bases de datos en el caso de Microsoft Visual Web Developer.
Puede usar la ventana del 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 a 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 |
| 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 Identity, expanda Propiedades de columna (mire la parte inferior de la figura 6) y desplácese hacia abajo hasta la propiedad Identity Specification. Establezca la propiedad (Is Identity) en el valor Sí.
Para marcar una columna como columna Primary Key, seleccione la columna y haga clic en el botón con el icono de una llave. Después de marcar una columna como Primary Key, aparece al lado un icono de una llave (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 Contacts.
Después de terminar de crear la tabla de base de datos Contacts, debe agregar a ella algunos registros. Haga clic con el botón derecho en la tabla Contacts en la ventana del 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. Comenzaremos 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 ASP.NET MVC no está vinculado a Microsoft Entity Framework de ninguna manera. Puede usar ASP.NET MVC con tecnologías alternativas de acceso a bases de datos, como NHibernate, LINQ to SQL o ADO.NET.
Siga estos pasos para crear las clases de modelo de datos:
- Haga clic con el botón derecho en la carpeta Models de la ventana del Explorador de soluciones y seleccione Agregar, Nuevo elemento. Aparece el cuadro de diálogo Agregar nuevo elemento (vea la figura 6).
- Seleccione la categoría Datos y la plantilla Entity Data Model de ADO.NET. Asigne al modelo de datos el nombre ContactManagerModel.edmx y haga clic en el botón Agregar. Aparecerá el Asistente de Entity Data Model (vea la figura 7).
- En el cuadro de diálogo Elegir contenido del modelo, seleccione Generar desde la base de datos (vea la figura 7).
- En el paso Elegir la conexión de datos, seleccione la base de datos ContactManagerDB.mdf y, en la configuración de conexión de la entidad, escriba el nombre ContactManagerDBEntities (vea la figura 8).
- En el paso Elegir los objetos de base de datos, active la casilla Tablas (vea la figura 9). El modelo de datos incluirá todas las tablas contenidas en la base de datos (solo hay una, la tabla Contacts). Especifique el espacio de nombres Models. Haga clic en el botón Finalizar para finalizar el asistente.
Figura 06: El cuadro de diálogo Agregar nuevo elemento (Haga clic para ver la imagen a tamaño completo)
Figura 07: Elegir contenido del modelo (Haga clic para ver la imagen a tamaño completo)
Figura 08: Elegir la conexión de datos (Haga clic para ver la imagen a tamaño completo)
Figura 09: Elegir los objetos de base de datos (Haga clic para ver la imagen a tamaño completo)
Después de completar el Asistente de Entity Data Model, aparece el Diseñador de Entity Data Model. El diseñador muestra una clase que corresponde a cada modelo de tabla. Debería ver una clase denominada Contacts.
El Asistente de Entity Data Model genera nombres de clase basados en nombres de tabla de base de datos. Casi siempre deberá cambiar el nombre de la clase generada por el asistente. Haga clic con el botón derecho en la clase Contacts en el 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 la clase, esta debe aparecer como en la figura 10.
Figura 10: La clase Contact (Haga clic para ver la imagen a 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 Home
El siguiente paso es crear nuestro controlador Home. El controlador Home es el controlador predeterminado invocado en una aplicación ASP.NET MVC.
Cree la clase de controlador Home; para ello, haga clic con el botón derecho en la carpeta Controllers de la ventana del Explorador de soluciones y seleccione la opción de menú Agregar, Controlador (vea la figura 11). Observe la casilla con 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: Adición del controlador Home (Haga clic para ver la imagen a tamaño completo)
Al crear el controlador Home, obtendrá la clase en la lista 1.
Lista 1: Controllers\HomeController.vb
Public Class HomeController
Inherits System.Web.Mvc.Controller
'
' GET: /Home/
Function Index() As ActionResult
Return View()
End Function
'
' GET: /Home/Details/5
Function Details(ByVal id As Integer) As ActionResult
Return View()
End Function
'
' GET: /Home/Create
Function Create() As ActionResult
Return View()
End Function
'
' POST: /Home/Create
<AcceptVerbs(HttpVerbs.Post)> _
Function Create(ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add insert logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Return View()
End Function
'
' POST: /Home/Edit/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add update logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
End Class
Enumeración de los contactos
Para mostrar los registros en la tabla de base de datos Contacts, es necesario crear una acción Index() y una vista Index.
El controlador Home ya contiene una acción Index(). Necesitamos modificar este método para que se parezca al de la lista 2.
Lista 2: Controllers\HomeController.vb
Public Class HomeController
Inherits System.Web.Mvc.Controller
Private _entities As New ContactManagerDBEntities()
'
' GET: /Home/
Function Index() As ActionResult
Return View(_entities.ContactSet.ToList())
End Function
…
Observe que la clase del controlador Home de la lista 2 contiene un campo privado denominado _entities. El campo _entities representa las entidades del modelo de datos. Este campo se usa para comunicarnos 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. La expresión _entities.ContactSet.ToList() devuelve la lista de contactos como una lista genérica.
Ahora que hemos creado el controlador Index, necesitamos crear la vista Index. Antes de crear la vista Index, 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 Index, 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: Adición de la vista Index (Haga clic para ver la imagen a tamaño completo)
En el cuadro de diálogo Agregar vista, active la casilla Crear una vista fuertemente tipada. Seleccione la clase de datos de vista ContactManager.Contact y la lista de contenido de la vista. Al seleccionar estas opciones, se genera una vista que muestra una lista de registros de contacto.
Figura 13: El cuadro de diálogo Agregar vista (Haga clic para ver la imagen a tamaño completo)
Al hacer clic en el botón Agregar, se genera la vista Index de la lista 3. Observe la directiva <%@ Page %> que aparece en la parte superior del archivo. La vista Index hereda de la clase ViewPage<IEnumerable<ContactManager.Models.Contact>>. En otras palabras, la clase Model de la vista representa una lista de entidades Contact.
El cuerpo de la vista Index 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.
Lista 3: Views\Home\Index.aspx (sin modificar)
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable(Of ContactManager.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>
<p>
<%=Html.ActionLink("Create New", "Create")%>
</p>
<table>
<tr>
<th></th>
<th>
Id
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Phone
</th>
<th>
Email
</th>
</tr>
<% For Each item In Model%>
<tr>
<td>
<%=Html.ActionLink("Edit", "Edit", New With {.id = item.Id})%> |
<%=Html.ActionLink("Details", "Details", New With {.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>
<% Next%>
</table>
</asp:Content>
Es necesario realizar una modificación en la vista Index. Dado que no estamos creando una vista Details, podemos quitar el vínculo Details. Busque y quite el código siguiente de la vista Index:
{.id = item.Id})%>
Después de modificar la vista Index, 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, aparecerá el cuadro de diálogo de 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 a tamaño completo)
La vista Index se devuelve de forma predeterminada. En esta vista se enumeran todos los datos de la tabla de base de datos Contacts (vea la figura 15).
Figura 15: La vista Index (Haga clic para ver la imagen a tamaño completo)
Observe que la vista Index incluye un vínculo Crear nuevo en la parte inferior de la vista. En la sección siguiente, aprenderá a crear nuevos contactos.
Creación de nuevos contactos
Para permitir que los usuarios creen nuevos contactos, se deben agregar dos acciones Create() al controlador Home. Se debe crear una acción Create() que devuelva un formulario HTML para crear un nuevo contacto. Se debe crear una segunda acción Create() que realice la inserción real del nuevo contacto en la base de datos.
Los nuevos métodos Create() que debemos agregar al controlador Home se encuentran en la lista 4.
Lista 4: Controllers\HomeController.vb (con métodos Create)
'
' GET: /Home/Create
Function Create() As ActionResult
Return View()
End Function
'
' POST: /Home/Create
<AcceptVerbs(HttpVerbs.Post)> _
Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
If Not ModelState.IsValid Then
Return View()
End If
Try
_entities.AddToContactSet(contactToCreate)
_entities.SaveChanges()
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
El primer método Create() se puede invocar con 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 el segundo método Create() se ha modificado para aceptar una instancia de la clase Contact. Los valores del formulario publicados desde el formulario HTML se enlazan automáticamente a esta clase Contact mediante el marco ASP.NET MVC. A cada campo de formulario del formulario HTML Create se le asigna 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: Adición de la vista Create (Haga clic para ver la imagen a tamaño completo)
En el cuadro de diálogo Agregar vista, seleccione la clase ContactManager.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 Create.
Figura 17: Vista de una página (Haga clic para ver la imagen a tamaño completo)
La vista Create contiene campos de formulario para cada una de las propiedades de la clase Contact. El código de la vista Create se incluye en la lista 5.
Lista 5: Views\Home\Create.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.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>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Después de modificar los métodos Create() y agregar la vista Create, puede ejecutar la aplicación Contact Manger y crear nuevos contactos. Haga clic en el vínculo Crear nuevo que aparece en la vista Index para ir a la vista Create. Debería ver la vista en la figura 18.
Figura 18: La vista Create (Haga clic para ver la imagen a 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 contactos. En primer lugar, es necesario agregar dos nuevos métodos Edit a la clase de controlador Home. Estos nuevos métodos Edit() se incluyen en la lista 6.
Lista 6: Controllers\HomeController.vb (con métodos Edit)
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Dim contactToEdit = (from c in _entities.ContactSet _
where c.Id = id _
select c).FirstOrDefault()
Return View(contactToEdit)
End Function
'
' POST: /Home/Edit/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal contactToEdit As Contact) As ActionResult
If Not ModelState.IsValid Then
Return View()
End If
Try
Dim 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()
End Try
End Function
El primer método Edit() se invoca mediante una operación HTTP GET. Se pasa un parámetro Id a este método que representa el identificador del registro de contacto editado. Se usa Entity Framework 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 en la base de datos. Este método acepta una instancia de la clase Contact como parámetro. El marco ASP.NET MVC enlaza automáticamente los campos de formulario del formulario Edit con esta clase. Observe que no se incluye el atributo [Bind] al editar un contacto (necesitamos el valor de la propiedad Id).
Se usa Entity Framework 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.
Para generar la vista que contiene el formulario Edit, haga clic con el botón derecho en el método Edit() y seleccione 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 Edit (vea la figura 19).
Figura 19: Adición de una vista Edit (Haga clic para ver la imagen a tamaño completo)
Al hacer clic en el botón Agregar, se genera automáticamente una nueva vista Edit. El formulario HTML que se genera contiene campos que corresponden a cada una de las propiedades de la clase Contact (vea la lista 7).
Lista 7: Views\Home\Edit.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.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>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Eliminación de contactos
Si desea eliminar contactos, debe agregar dos acciones Delete() a la clase de controlador Home. La primera acción Delete() 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, modificaremos la aplicación Contact Manager para que admita un paso de eliminación de Ajax.
Los dos nuevos métodos Delete() se incluyen en la lista 8.
Lista 8: Controllers\HomeController.vb (métodos Delete)
'
' GET: /Home/Delete/5
Function Delete(ByVal id As Integer) As ActionResult
Dim contactToDelete = (from c in _entities.ContactSet _
where c.Id = id _
select c).FirstOrDefault()
Return View(contactToDelete)
End Function
'
' POST: /Home/Delete/5
<AcceptVerbs(HttpVerbs.Post)> _
Function Delete(ByVal contactToDelete As Contact) As ActionResult
Try
Dim 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()
End Try
End Function
El primer método Delete() devuelve un formulario de confirmación para eliminar un registro de contacto de la base de datos (vea la figura 20). 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 DeleteObject() y SaveChanges() de Entity Framework 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 imagen a tamaño completo)
Es necesario modificar la vista Index para que contenga un vínculo para eliminar los registros de contacto (vea la figura 21). Debe agregar el código siguiente a la misma celda de tabla que contiene el vínculo Edit:
{.id = item.Id})%>
Figura 21: Vista Index con el vínculo Edit (Haga clic para ver la imagen a 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 de controlador Home y seleccione la opción de menú Agregar vista. Aparece el cuadro de diálogo Agregar vista (vea la figura 22).
A diferencia de las vistas List, Create y Edit, el cuadro de diálogo Agregar vista no contiene una opción para crear una vista Delete. En su lugar, seleccione la clase de datos ContactManager.Models.Contact y el contenido de la vista Vacío. Al seleccionar la opción de contenido de vista Vacío, es necesario crear la vista nosotros mismos.
Figura 22: Adición de la vista de confirmación de eliminación (Haga clic para ver la imagen a tamaño completo)
El contenido de la vista Delete se encuentra en la lista 9. Esta vista contiene un formulario que confirma si se debe eliminar o no un contacto determinado (vea la figura 21).
Lista 9: Views\Home\Delete.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.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 With { .Id = Model.Id }) %>
<p>
<input type="submit" value="Delete" />
</p>
<% End Using %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
Cambo de nombre del controlador predeterminado
Puede ser molesto que el nombre de nuestra clase de controlador para trabajar con contactos se llame HomeController. ¿El controlador no se debería llamar ContactController?
Este problema es bastante 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ú 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 a tamaño completo)
Figura 24: Uso del cuadro de diálogo Cambiar nombre (Haga clic para ver la imagen a tamaño completo)
Si cambia el nombre de la clase de controlador, Visual Studio también actualizará el nombre de la carpeta en la carpeta Views. Visual Studio cambiará el nombre de la carpeta \Views\Home por la carpeta \Views\Contact.
Después de realizar este cambio, la aplicación ya no tendrá un controlador Home. Al ejecutar la aplicación, recibirá la página de error de la figura 25.
Figura 25: Sin controlador predeterminado (Haga clic para ver la imagen a tamaño completo)
Es necesario actualizar la ruta predeterminada en el archivo Global.asax para usar el controlador Contact en lugar del controlador Home. Abra el archivo Global.asax y modifique el controlador predeterminado usado por la ruta predeterminada (vea la lista 10).
Lista 10: Global.asax.vb
Public Class MvcApplication
Inherits System.Web.HttpApplication
Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
' MapRoute takes the following parameters, in order:
' (1) Route name
' (2) URL with parameters
' (3) Parameter defaults
routes.MapRoute( _
"Default", _
"{controller}/{action}/{id}", _
New With {.controller = "Home", .action = "Index", .id = ""} _
)
End Sub
Sub Application_Start()
RegisterRoutes(RouteTable.Routes)
End Sub
End Class
Después de realizar estos cambios, Contact Manager se ejecutará correctamente. Ahora, usará la clase de controlador Contact como controlador predeterminado.
Resumen
En esta primera iteración, crearemos una aplicación Contact Manager básica de la manera más rápida posible. Aprovecharemos Visual Studio para generar automáticamente el código inicial para nuestros controladores y vistas. También aprovecharemos Entity Framework para generar automáticamente nuestras clases de modelo de base de datos.
Actualmente, podemos enumerar, crear, editar y eliminar registros de contactos 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 admitirlo, 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 y la hoja de estilos en cascada predeterminadas para mejorar la apariencia de la aplicación.
En segundo lugar, no hemos implementado ninguna validación de formularios. Por ejemplo, no hay forma de evitar que envíe el formulario de contacto Create sin especificar 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 validación de formularios en la 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 prepara directamente en las acciones del controlador. Esto significa que no podemos modificar el código de acceso a datos sin modificar nuestros controladores. En iteraciones posteriores, exploraremos los patrones de diseño de software que podemos implementar para que Contact Manager sea más resistente al cambio.