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.
Traducción
Inglés

Tutorial: Utilizar plantillas de vista MVC

Al crear una aplicación ASP.NET MVC en Visual Studio, tiene la opción de crear controladores y vistas que admiten scaffolding. Este tutorial muestra cómo crear una aplicación MVC sencilla que saca partido de las plantillas de datos para los controladores y vistas que Visual Studio admite para MVC.

En este tutorial, agregará un controlador que ya contiene los métodos de acción para mostrar, editar y actualizar los datos de modelo. Al utilizar el scaffolding de datos integrado en ASP.NET MVC, también generará vistas basadas en el modelo que defina.

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 SP1 o posterior. No puede utilizar Microsoft Visual Web Developer Express Edition para 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 que este tutorial sea sencillo, no creará el proyecto de prueba que es una opción para los proyectos de ASP.NET MVC. Para obtener más información sobre cómo crear clases un proyecto de MVC, vea Walkthrough: Creating a Basic MVC Project with Unit Tests in Visual Studio.

Para crear un proyecto nuevo de MVC

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

  2. En Tipos de proyecto del cuadro de diálogo Nuevo proyecto, expanda Visual Basic o Visual C# y, a continuación, haga clic en Web.

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

  4. En el cuadro Nombre, escriba MvcDataViews.

  5. En el cuadro Ubicación, escriba el nombre de la carpeta de proyecto.

  6. Seleccione Crear directorio para la solución.

  7. Haga clic en Aceptar.

  8. En el cuadro de diálogo Crear proyecto de prueba unitaria, seleccione No, no cree un proyecto de prueba unitaria.

    NotaNota:

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

  9. Haga clic en Aceptar.

    Se crea el nuevo proyecto de aplicación MVC.

Este tutorial utiliza un modelo de datos simple cuyos valores se agregan, revisan y muestran utilizando las plantillas de vistas. Creará una clase que define una persona. Para este tutorial, una clase de persona tiene propiedades de identificador, nombre y edad.

Para crear una clase modelo

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

  2. Cambie el nombre de la clase a Person.vb o Person.cs.

  3. Agregue el código siguiente al código de la clase Person.

    
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
    
    
    
  4. En el menú Compilar, haga clic en Compilar MvcDataViews para compilar el proyecto y crear una instancia del objeto Person.

    NotaNota:

    Este paso es necesario porque Visual Studio utiliza la instancia modelo cuando genera el código del controlador y el marcado de vistas basándose en plantillas de MVC.

  5. Guarde y cierre el archivo.

Luego, creará un controlador que contiene códigos auxiliares del método de acción que representarán las vistas para crear, actualizar y mostrar una lista de los objetos Person.

Para agregar el controlador de administración de datos

  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.

  2. Asigne al controlador el nombre PersonController.

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

  4. Haga clic en Agregar.

    El nuevo controlador se agrega a la aplicación. El controlador contiene los métodos de acción siguientes: Index, Details, Create (para HTTP GET), Create (para HTTP POST), Delete (para HTTP GET), Delete (para HTTP POST), Edit (para HTTP GET) y Edit (para HTTP POST).

  5. Agregue la siguiente línea de código al comienzo de la clase PersonController:

    
    static List<Person> people = new List<Person>();
    
    
    

    Este código crea una lista de los objetos Person.

  6. Guarde el archivo.

Puede agregar las vistas de datos ahora. La primera vista que se crea es una vista de lista representada por el método de acción Index. Esta vista muestra los objetos Person que se crean en una cuadrícula. Cada fila también incluye los vínculos para mostrar la persona en una vista de detalles o una vista de edición.

Para agregar la lista de vista

  1. Abra o cambie a la clase PersonController en el editor y busque el método de acción Index.

  2. Haga clic con el botón secundario del mouse dentro del método de acción Index y, a continuación, haga clic en Agregar vista.

  3. En el cuadro Nombre de vista, escriba Índice.

  4. Active la casilla Crear una vista fuertemente tipada.

  5. En la lista Clase de datos de View, seleccione MvcDataViews.Models.Person.

  6. En la lista Ver contenido, seleccione Lista.

    NotaNota:

    Deje activada la casilla Seleccionar la página maestra.

  7. Haga clic en Agregar.

    Se crea una vista denominada Index dentro de una nueva carpeta Person. La vista Index contendrá la plantilla de MVC para mostrar una lista de datos.

  8. En la vista Index, busque los controles Html.ActionLink y cámbielos como se muestra en el ejemplo siguiente:

    
    <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%> |
    <%= Html.ActionLink("Details", "Details", new { id = item.Id })%>
    
    
    
  9. En PersonController, reemplace el método de acción Index por el código siguiente:

    
    public ActionResult Index()
    {
        return View(people);
    }
    
    
    
  10. Guarde los archivos.

Luego, agregará una vista para crear los objetos Person. Al crear un objeto Person, se definen el nombre, la edad y el identificador de la persona. PersonController tiene dos métodos de acción Create. Un método de acción Create recibe una solicitud de HTTP GET y representa la vista de creación. El otro método de acción Create recibe la solicitud HTTP POST de la vista de creación, comprueba la validez de los datos, agrega los datos a la lista y redirecciona al método de acción Index.

Para agregar la vista de creación

  1. Abra o cambie a PersonController en el editor y busque el método de acción Create que controla HTTP GET.

  2. Haga clic con el botón secundario del mouse dentro del método de acción Create y, a continuación, haga clic en Agregar vista.

  3. En el cuadro Nombre de vista, escriba Crear.

  4. Active la casilla Crear una vista fuertemente tipada.

  5. En la lista Ver clase de datos, seleccione MvcDataViews.Models.Person.

  6. En la lista Ver contenido, Crear.

    NotaNota:

    Deje activada la casilla Seleccionar la página maestra.

  7. Haga clic en Agregar.

    Una vista denominada Create se agrega al proyecto.

  8. En PersonController, reemplace el método de acción Create que controla HTTP POST con el código siguiente:

    
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create(Person p)
    {
        if (!ModelState.IsValid)
        {
            return View("Create", p);
        }
    
        people.Add(p);
    
        return RedirectToAction("Index");
    }
    
    
    
  9. Guarde los archivos.

La vista de detalles muestra los valores para un objeto Person único. La vista también proporciona vínculos a una vista de edición y para volver a la vista de lista.

Para agregar la vista de detalles

  1. Abra o cambie a PersonController en el editor y busque el método de acción Details.

  2. Haga clic con el botón secundario del mouse dentro del método de acción Details y, a continuación, haga clic en Agregar vista.

  3. En el cuadro Nombre de vista, escriba Detalles.

  4. Active la casilla Crear una vista fuertemente tipada.

  5. En la lista Ver clase de datos, seleccione MvcDataViews.Models.Person.

  6. En la lista Ver contenido, seleccione Detalles.

    NotaNota:

    Deje activada la casilla Seleccionar la página maestra.

  7. Haga clic en Agregar.

    Una vista denominada Details se agrega al proyecto.

  8. En la vista Details, busque el control Html.ActionLink con un vínculo a la vista Edit y cámbiela como se muestra en el ejemplo siguiente:

    
    <%=Html.ActionLink("Edit", "Edit", new { id=Model.Id }) %> |
    
    
    
  9. En PersonController, reemplace el método de acción Details por el código siguiente:

    
    public ActionResult Details(int id)
    {
        Person p = new Person();
        foreach (Person pn in people)
        {
            if (pn.Id == id)
            {
                p.Name = pn.Name;
                p.Age = pn.Age;
                p.Id = pn.Id;
            }
        }
    
        return View(p);
    }
    
    
    
  10. Guarde los archivos.

La vista de eliminación permite al usuario quitar un objeto Person de la lista. El usuario tiene la opción de eliminar el objeto Person seleccionado o de volver a la vista de lista. PersonController tiene dos métodos de acción Delete. Un método de acción Delete recibe una solicitud de HTTP GET y presenta la vista de eliminación. El otro método de acción Delete recibe la solicitud HTTP POST de la vista de eliminación, quita el objeto seleccionado y redirecciona al método de acción Index.

Para agregar la vista de detalles

  1. Abra o cambie a PersonController en el editor y busque el método de acción Details.

  2. Haga clic con el botón secundario del mouse dentro del método de acción Delete y, a continuación, haga clic en Agregar vista.

  3. En el cuadro Nombre de vista, escriba Eliminar.

  4. Active la casilla Crear una vista fuertemente tipada.

  5. En la lista Clase de datos de View, seleccione MvcDataViews.Models.Person.

  6. En la lista Ver contenido, seleccione Detalles.

    NotaNota:

    Deje activada la casilla Seleccionar la página maestra.

  7. Haga clic en Agregar.

    Una vista denominada Delete se agrega al proyecto.

  8. En PersonController, reemplace el método de acción Delete que controla HTTP GET con el código siguiente:

    
    public ActionResult Edit(int id)
    {
        Person p = new Person();
        foreach (Person pn in people)
        {
            if (pn.Id == id)
            {
                p.Name = pn.Name;
                p.Age = pn.Age;
                p.Id = pn.Id;
            }
        }
    
        return View(p);
    }
    
    
    
  9. Reemplace el método de acción Delete que controla HTTP POST con el código siguiente:

    
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(Person p)
    {
        if (!ModelState.IsValid)
        {
            return View("Edit", p);
        }
    
        foreach (Person pn in people)
        {
            if (pn.Id == p.Id)
            {
                pn.Name = p.Name;
                pn.Age = p.Age;
                pn.Id = p.Id;
            }
        }
    
        return RedirectToAction("Index");
    }
    
    
    
  10. Guarde los archivos.

La vista de edición permite al usuario cambiar los valores para uno de los objetos Person. PersonController tiene dos métodos de acción Edit. Un método de acción Edit recibe una solicitud de HTTP GET y representa la vista de edición. El otro método de acción Edit recibe la solicitud HTTP POST de la vista de edición, comprueba la validez de los datos, actualiza los datos en el objeto Person apropiado y redirecciona al método de acción Index.

Para agregar contenido a la vista de edición

  1. Abra o cambie a PersonController en el editor y busque el método de acción Edit que controla HTTP GET.

  2. Reemplace el método de acción Edit con el código siguiente:

  3. Haga clic con el botón secundario del mouse dentro del método de acción Edit, haga clic en Agregar vista.

  4. En el cuadro Nombre de vista, escriba Edición.

  5. Active la casilla Crear una vista fuertemente tipada.

  6. En la lista Ver clase de datos, seleccione MvcDataViews.Models.Person.

  7. En la lista Ver contenido, seleccione Edición.

  8. Deje activada la casilla Seleccionar la página maestra.

  9. Haga clic en Agregar.

    Una vista denominada Edit se agrega al proyecto.

  10. En PersonController, reemplace el método de acción Edit que controla HTTP POST con el código siguiente:

  11. Guarde y cierre los archivos.

Para finalizar la aplicación, agregará un vínculo en la página maestra a la lista de personas.

Para vincular a la lista de personas

  1. En la carpeta Home, abra la vista Index.

  2. Agregue el marcado siguiente en la línea siguiente a la etiqueta </h2>:

    <p>
      <%=Html.ActionLink("Open Person List", "Index", "Person") %>
    </p>
    
  3. Guarde y cierre el archivo.

Ahora puede compilar y ejecutar la aplicación.

Para probar la aplicación

  1. Presione CTRL+F5 para iniciar la aplicación.

  2. En la página maestra, haga clic en Abrir lista de personas.

  3. Haga clic en Crear nueva.

  4. Especifique valores en los cuadros Name, Age, Phone, Email e Id y, a continuación, haga clic en Crear.

    Se muestra la vista Index e incluye la persona que agregó a la lista.

  5. Repita el paso anterior varias veces para especificar más personas.

  6. En la vista Index, haga clic en uno de los vínculos Detalles.

    Se mostrará la vista Details.

  7. Haga clic en Volver a la lista.

  8. Haga clic en uno de los vínculos Edición.

    Se mostrará la vista Edit.

  9. Cambie el nombre o la antigüedad de una persona y, a continuación, haga clic en Actualizar.

    La vista Index se muestra de nuevo con los campos de datos actualizados.

  10. Haga clic en uno de los vínculos Eliminar.

    Se mostrará la vista Delete.

  11. Haga clic en el botón Eliminar.

    La vista Index se muestra una vez más con la entrada seleccionada quitada.

El código de ejemplo completo de este tutorial está disponible como proyecto de Visual Studio: Descargar.

Adiciones de comunidad

AGREGAR
Mostrar: