Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Tutorial: Crear un proyecto de MVC básico con pruebas unitarias en Visual Studio

.NET Framework 4

Este tutorial muestra cómo puede crear una aplicación ASP.NET MVC en Visual Studio. En este tutorial, creará y ejecutará la aplicación MVC de ejemplo. A continuación, personalizará la aplicación agregando un controlador y una vista.

Además, este tutorial muestra cómo utilizar el desarrollo basado en pruebas (TDD). En el tutorial, creará un proyecto que contiene pruebas unitarias para la aplicación MVC.

Un proyecto de Visual Studio con código fuente está disponible como acompañamiento de este tema: Download.

Para poder completar este tutorial, necesitará:

  • Microsoft Visual Studio 2008 Service Pack 1 o posterior.

    NotaNota

    Visual Studio Standard Edition y Visual Web Developer Express no admiten los proyectos de prueba unitaria. Puede utilizar estas versiones de Visual Studio para ejecutar las partes de este tutorial relacionadas con la creación y ejecución de un proyecto de ASP.NET MVC. Sin embargo, no podrá trabajar con las pruebas unitarias como se explica en este tutorial.

  • El marco de ASP.NET MVC 2. Si ha instalado Visual Studio 2010, ASP.NET MVC 2 ya está instalado en su equipo. Para descargar la versión más actualizada del marco, vea la página de descarga de ASP.NET MVC.

Para empezar, creará un proyecto nuevo de ASP.NET MVC.

Para crear un proyecto nuevo de MVC

  1. En el menú Archivo, haga clic en Nuevo proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto.

    Cuadro de diálogo Nuevo proyecto
  2. En la esquina superior derecha, asegúrese de que esté seleccionado .NET Framework 3.5.

  3. En Tipos de proyecto, expanda Visual Basic o Visual C# y, a continuación, haga clic en Web.

  4. En Plantillas instaladas de Visual Studio, seleccione Aplicación web de ASP.NET MVC 2.

  5. En el cuadro Nombre, escriba MvcBasicWalkthrough.

  6. En el cuadro Ubicación, escriba un nombre para la carpeta de proyecto.

  7. Si desea que el nombre de la solución difiera del nombre del proyecto, escriba un nombre en el cuadro Nombre de la solución.

  8. Seleccione Crear directorio para la solución.

  9. Haga clic en Aceptar.

    Aparecerá el cuadro de diálogo Crear proyecto de prueba unitaria.

    Cuadro de diálogo Crear pruebas unitarias
    NotaNota

    Si está utilizando las ediciones Standard o Express de Visual Studio, no se muestra el cuadro de diálogo Crear proyecto de prueba unitaria. En su lugar, el nuevo proyecto de aplicación MVC se genera sin un proyecto de prueba.

  10. Seleccione Sí, crear un proyecto de prueba unitaria.

    De forma predeterminada, el nombre del proyecto de prueba es el nombre del proyecto de aplicación y se le agrega "Tests". Sin embargo, puede cambiar el nombre del proyecto de prueba. De forma predeterminada, el proyecto de prueba utilizará el marco de pruebas unitarias de Visual Studio. Para obtener información sobre cómo utilizar un marco de pruebas de otro fabricante, vea Cómo: Agregar un marco de pruebas de ASP.NET MVC personalizado en Visual Studio.

  11. Haga clic en Aceptar.

    Se generan el nuevo proyecto de aplicación MVC y un proyecto de prueba. (Si está utilizando las ediciones Standard o Express de Visual Studio, no se crea el proyecto de prueba.)

La ilustración siguiente muestra la estructura de carpetas de una solución de MVC recién creada.

Estructura de carpetas de MVC

La estructura de carpetas de un proyecto de MVC difiere de la de un proyecto de sitio web de ASP.NET. El proyecto de MVC contiene las carpetas siguientes:

  • Content, para los archivos de compatibilidad del contenido. Esta carpeta contiene la hoja de estilos en cascada (archivo .css) para la aplicación.

  • Controllers, para los archivos de controlador. Esta carpeta contiene los controladores de ejemplo de la aplicación, que se denominan AccountController y HomeController. La clase AccountController contiene la lógica de inicio de sesión para la aplicación. La clase HomeController contiene la lógica a la que se llama de forma predeterminada cuando la aplicación se inicia.

  • Models, para los archivos de modelo de datos como los archivos .dbml de LINQ to SQL o los archivos de entidad de datos.

  • Scripts, para los archivos de script, como los compatibles con ASP.NET AJAX y jQuery.

  • Views, para los archivos de paginación de vistas. Esta carpeta contiene tres subcarpetas: Account, Home y Shared. La carpeta Account contiene vistas que se utilizan como interfaz de usuario para el inicio de sesión y para cambiar las contraseñas. La carpeta Home contiene una vista Index (la página de inicio predeterminada para la aplicación) y una vista de página Acerca de. La carpeta Shared contiene la vista de la página maestra para la aplicación.

Si está utilizando una edición de Visual Studio distinta de Standard o Express, también se generó un proyecto de prueba. El proyecto de prueba tiene una carpeta Controllers que contiene la clase HomeControllerTest. Esta clase tiene una prueba unitaria para cada método de acción HomeController (Index y About).

El proyecto de MVC recién generado es una aplicación completa que puede compilar y ejecutar sin cambios. La ilustración siguiente muestra cómo aparecía la aplicación al ejecutarla en un explorador.

Vista de aplicación predeterminada

El proyecto de prueba unitaria también está listo para compilar y ejecutar. Para este tutorial, agregará un controlador con un método de acción y una vista y agregará una prueba unitaria para el método de acción.

Ahora agregará un controlador que contiene la lógica para descargar mapas urbanos del servicio Web Microsoft Virtual Earth.

Para agregar un controlador al proyecto de MVC

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta Controllers, haga clic en Agregar y, a continuación, haga clic en Controlador.

    Aparece el cuadro de diálogo Agregar controlador.

    Cuadro de diálogo Agregar controlador
  2. En el cuadro Nombre, escriba MapsController.

    El marco de ASP.NET MVC exige que los nombres de controlador acaben en "Controller", como HomeController, GameController o MapsController.

  3. Desactive la casilla Agregar métodos de acción para los escenarios Create, Update y Details.

  4. Haga clic en Agregar.

    Visual Studio agrega la clase MapsController al proyecto y lo abre en el editor.

Para aplicar técnicas de desarrollo basado en pruebas (TDD) a este proyecto debe escribir la prueba unitaria para un método de acción antes de escribir el propio método de acción. Sin embargo, si desea que su prueba unitaria se compile, debe tener un código auxiliar para el método de acción planeado, que en este tutorial es ViewMaps.

Para agregar un código auxiliar de método de acción

  1. Abra o cambie a la clase MapsController.

  2. Reemplace el método de acción Index con el código siguiente para crear el código auxiliar de método de acción ViewMaps.

    Function ViewMaps()
        ' Add action logic here
        Throw New NotImplementedException()
    End Function
    

    public ActionResult ViewMaps()
    {
        // Add action logic here
        throw new NotImplementedException();
    }
    

A continuación agregará una clase de prueba de controlador al proyecto de pruebas. En la clase, agregará una prueba unitaria para el método de acción ViewMaps. Se producirá un error en la prueba unitaria, porque el código auxiliar de método de acción ViewMaps produce una excepción. Al finalizar el método de acción posteriormente en este tutorial, la prueba se realizará correctamente.

Para agregar pruebas unitarias para los métodos de acción

  1. En el proyecto de pruebas, haga clic con el botón secundario del mouse en la carpeta Controllers, haga clic en Agregar y después haga clic en Clase.

  2. En el cuadro de texto Nombre, escriba MapsControllerTest.

  3. Haga clic en Agregar.

    Visual Studio agrega la clase MapsControllerTest al proyecto de prueba.

  4. Abra la clase MapsControllerTest y escriba el código que se muestra a continuación:

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using System.Web.Mvc;
    using MvcBasicWalkthrough;
    using MvcBasicWalkthrough.Controllers;
    
    namespace MvcBasicWalkthrough.Tests.Controllers
    {
        [TestClass]
        public class MapsControllerTest
        {
            [TestMethod]
            public void ViewMaps()
            {
                // Arrange
                MapsController controller = new MapsController();
    
                // Act
                ViewResult result = controller.ViewMaps() as ViewResult;
    
                // Assert
                Assert.IsNotNull(result);
            }
        }
    }
    
    
    

    Este código define las pruebas unitarias para el método de acción que terminará después.

  5. En Explorador de soluciones, seleccione el proyecto de prueba y presione CTRL+F5 para ejecutar las pruebas unitarias.

    La prueba produce un error, porque el método de acción ViewMaps produce una excepción actualmente.

Ahora agregará el código a la clase MapsController para el método de acción ViewMaps con objeto de representar la vista Maps.

Para agregar el código al método de acción

  1. Abra la clase MapsController y reemplace el código auxiliar de método de acción ViewMaps con el código siguiente para representar la vista Maps:

    
    public ActionResult ViewMaps()
    {
         return View();
    }
    
    
    
  2. Guarde y cierre el archivo.

Después agregará una vista Maps. Para mantener las vistas organizadas, agregará primero una carpeta Maps bajo la carpeta Views.

Para agregar una vista de contenido de página al proyecto de MVC

  1. Abra la clase MapsController, haga clic con el botón secundario del mouse dentro del método de acción ViewMaps y, a continuación, haga clic en Agregar vista.

    Se mostrará el cuadro de diálogo Agregar vista.

    Cuadro de diálogo Agregar vista
  2. En el cuadro Nombre de vista, escriba ViewMaps.

  3. Desactive las casillas Crear una vista parcial (.ascx) y Crear una vista fuertemente tipada.

  4. Active la casilla Seleccionar la página maestra y establezca la página maestra en ~/Views/Shared/Site.Master.

  5. Establezca ContentPlaceHolder ID en "MainContent".

  6. Haga clic en Agregar.

    La nueva vista se agrega al proyecto en la carpeta Maps.

A continuación, agregará contenido a la nueva vista.

Para agregar contenido a la vista

  1. Abra ViewMaps.aspx y agregue el contenido siguiente dentro del elemento Content:

    
    <h2>My City Maps</h2>
    Select map: 
    <select onclick="GetMap(value);">
        <option value="Seattle">Seattle, WA</option>
        <option value="LasVegas">Las Vegas, NV</option>
        <option value="SaltLake">Salt Lake City, UT</option>
        <option value="Dallas">Dallas, TX</option>
        <option value="Chicago">Chicago, IL</option>
        <option value="NewYork">New York, NY</option>
        <option value="Rio">Rio de Janeiro, Brazil</option>
        <option value="Paris">Paris, France</option>
        <option value="Naples">Naples, Italy</option>
        <option value="Keta">Keta, Ghana</option>
        <option value="Beijing">Beijing, China</option>
        <option value="Sydney">Sydney, Australia</option>
    </select>
    <br />
    <br />
    <div id='earthMap' style="position:relative; width:400px; height:400px;">
    </div>
    <script charset="UTF-8" type="text/javascript" 
        src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">
    </script>
    <script type="text/javascript">
        var map = null;
        var mapID = '';
    
        function GetMap(mapID)
        {
            switch (mapID)
            {
                case 'Seattle':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'i', true);
                    break;
                case 'LasVegas':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(36.17, -115.14), 10 ,'i' ,true);
                    break;
                case 'SaltLake':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(40.75, -111.89), 10 ,'i' ,true);
                    break;
                case 'Dallas':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(32.78, -96.8), 10 ,'i' ,true);
                    break;
                case 'Chicago':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(41.88, -87.62), 10 ,'i' ,true);
                    break;
                case 'NewYork':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(40.7, -74), 10 ,'i' ,true);
                    break;
                case 'Rio':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(-22.91, -43.18), 10 ,'i' ,true);
                    break;
                case 'Paris':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(48.87, 2.33), 10 ,'i' ,true);
                    break;
                case 'Naples':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(40.83, 14.25), 10 ,'i' ,true);
                    break;
                case 'Keta':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(5.92, 0.983), 10 ,'i' ,true);
                    break;
                case 'Beijing':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(39.91, 116.39), 10 ,'i' ,true);
                    break;
                case 'Sydney':
                    map = new VEMap('earthMap');
                    map.LoadMap(new VELatLong(-33.86, 151.21), 10 ,'i' ,true);
             }
        }   
    </script>
    
    
    

    Este marcado define una lista desplegable para seleccionar un mapa y la lógica de JavaScript para recuperar el mapa seleccionado del servicio Web Microsoft Virtual Earth.

  2. Guarde y cierre el archivo.

Agregará ahora un elemento al menú de página maestra que llama al método de acción ViewMaps.

Para agregar una pestaña al menú de página maestra

  1. En la carpeta Shared, abra el archivo Site.master y busque la lista no ordenada (elemento ul) en el elemento div cuyo identificador es "menucontainer".

  2. Agregue el código siguiente a la lista entre el Índice y las pestañas About Us:

    
    <li><%= Html.ActionLink("My City Maps", "ViewMaps", "Maps")%></li>
    
    
    

    El método ActionLink es un método auxiliar con vínculos a un método de acción. Toma los parámetros siguientes: el texto del vínculo, el nombre del método de acción y el nombre del controlador.

  3. Guarde y cierre el archivo.

Ya puede probar la aplicación.

Para probar la aplicación MVC

  1. En el menú Prueba, haga clic sucesivamente en Ejecutar, Todas las pruebas de la solución.

    Los resultados se muestran en la ventana Resultados de pruebas. Esta vez las pruebas se realizan correctamente.

  2. En Explorador de soluciones, seleccione el proyecto de tutorial y presione CTRL+F5 para ejecutar la aplicación.

    Se muestra la página Index.aspx, que incluye las pestañas que están definidas en la página maestra.

  3. Haga clic en la pestaña My City Maps.

    Se muestra la página My City Maps. Seleccione cualquier mapa para verlo en pantalla.

    Vista de mapas

Este tutorial le ofrece una primera muestra de la creación de una aplicación MVC y el trabajo con pruebas unitarias en ASP.NET MVC. A partir de ahora, puede obtener más información sobre el marco de ASP.NET MVC. La lista siguiente sugiere otros temas de aprendizaje adicionales.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft