Para ver el artículo en inglés, active la casilla Inglés.

 También puede ver el texto en inglés en una ventana

emergente si pasa el puntero del mouse por el texto.

Tutorial: Crear un proyecto de MVC

básico con pruebas unitarias en Visual
Studio
Visual Studio 2010

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.

Requisitos previos
Para poder completar este tutorial, necesitará:

• Microsoft Visual Studio 2008 Service Pack 1 o posterior.

Nota

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.

Crear un proyecto de MVC nuevo

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.

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.

 Nota

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.)

Examinar el proyecto de MVC

La ilustración siguiente muestra la estructura de carpetas de una solución de MVC recién creada.
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.
 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.

Agregar un controlador
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.

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.

Crear un código auxiliar de método de acción
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.

VB

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

C#

public ActionResult ViewMaps()

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

Agregar pruebas unitarias para métodos de acción

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:

C#

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.

Agregar el código al método de acción

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:

C#

public ActionResult ViewMaps()

{
return View();
}

2. Guarde y cierre el archivo.

Agregar una vista

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.

 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.

Agregar contenido a la vista

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:

None

<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 una pestaña al menú de página maestra

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:

None

<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.

Probar la aplicación MVC

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.
Pasos siguientes
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.

• Para obtener más información sobre los controladores de MVC, vea Controladores y métodos de
acción en aplicaciones ASP.NET MVC.

• Para obtener más información sobre las vistas de MVC, vea Vistas y presentación de la interfaz de
usuario en aplicaciones de ASP.NET MVC.

• Para obtener más información sobre los modelos de MVC, vea Modelos y validación en ASP.NET MVC.

• Para obtener más información sobre el enrutamiento de direcciones URL, vea Enrutamiento de
ASP.NET.

Vea también
 Tareas
Cómo: Agregar un marco de pruebas de ASP.NET MVC personalizado en Visual Studio
Otros recursos
ASP.NET MVC 2
Información general sobre MVC en ASP.NET

© 2018 Microsoft