Tutorial: generación de vistas de EF Database First con la aplicación MVC de ASP.NET

  • Artículo

Con MVC, Entity Framework y Scaffolding de ASP.NET, puede crear una aplicación web que proporcione una interfaz a una base de datos existente. En esta serie de tutoriales se muestra cómo generar código automáticamente que permita a los usuarios mostrar, editar, crear y eliminar datos que residen en una tabla de base de datos. El código generado corresponde a las columnas de la tabla de base de datos.

Este tutorial se centra en el uso de Scaffoldingde ASP.NET para generar los controladores y vistas.

En este tutorial, hizo lo siguiente:

  • Agregará el scaffold
  • Agregará vínculos a nuevas vistas
  • Mostrará vistas de alumnos
  • Mostrará vistas de inscripción

Requisito previo

Agregar el scaffold

Ya está listo para generar código que proporcionará operaciones de datos estándar a las clases modelo. Para agregar el código, inserte un elemento scaffold. Hay muchas opciones para el tipo de scaffolding que puede agregar. En este tutorial, el scaffold incluirá un controlador y vistas correspondientes a los modelos Estudiante e Inscripción que creó en la sección anterior.

Para mantener la coherencia en el proyecto, agregará el nuevo controlador a la carpeta Controladores existente. Haga clic con el botón derecho en la carpeta Controladores y seleccione Agregar> Nuevo elemento con scaffolding.

Seleccione la opción Controlador de MVC 5 con vistas que usa Entity Framework. Esta opción generará el controlador y vistas para actualizar, eliminar, crear y mostrar los datos en el modelo.

add mvc controller

Seleccione Estudiante (ContosoSite.Models) para la clase del modelo y seleccione ContosoUniversityDataEntities (ContosoSite.Models) para la clase del contexto. Deje el nombre del controlador como StudentsController.

Haga clic en Agregar.

Si recibe un error, puede deberse a que no ha compilado el proyecto en la sección anterior. Si es así, intente compilar el proyecto y agregue de nuevo el elemento con scaffolding.

Una vez completado el proceso de generación de código, verá un nuevo controlador y vistas en las carpetas Controladores y Vistas>Estudiantes.

Vuelva a hacer los mismos pasos, pero agregue un scaffold en la clase Enrollment. Cuando termine, tendrá un archivo EnrollmentsController.cs y una carpeta en Vistas con el nombre Inscripciones con las vistas Crear, Eliminar, Detalles, Editar e Índice.

Para facilitar la navegación a las nuevas vistas, puede agregar un par de hipervínculos a las vistas de índice de alumnos e inscripciones. Abra el archivo en Vistas>Inicio>Index.cshtml, que es la página principal del sitio. Agregue el siguiente código debajo del jumbotron.

<div>
    @Html.ActionLink("List of students", "Index", "Students")<br />
    @Html.ActionLink("List of enrollments", "Index", "Enrollments")
</div>

En el método ActionLink, el primer parámetro es el texto que se va a mostrar en el vínculo. El segundo es la acción y el tercero es el nombre del controlador. Por ejemplo, el primer vínculo apunta a la acción Index en StudentsController. El hipervínculo real se construye con estos valores. En última instancia, el primer vínculo lleva a los usuarios al archivo Index.cshtml dentro de la carpeta Vistas/Estudiantes.

Mostrar vistas de alumnos

Comprobará que el código agregado al proyecto muestra correctamente una lista de los alumnos y permite a los usuarios editar, crear o eliminar los registros de alumnos en la base de datos.

Haga clic con el botón derecho en Vistas>Inicio>Index.cshtml y seleccione Ver en el explorador. En la página de inicio de la aplicación, seleccione Lista de alumnos.

Screenshot that shows the My A S P dot NET Home Page. List of students is circled in red.

En la página Índice, observe la lista de alumnos y vínculos para modificar estos datos. Seleccione el vínculo Crear nuevo y proporcione algunos valores de un alumno nuevo. Haga clic en Crear y observe que el nuevo alumno se agrega a la lista.

De nuevo en la página Índice, seleccione el vínculo Editar y cambie algunos de los valores de un alumno. Haga clic en Guardar y observe que se ha cambiado el registro del alumno.

Por último, seleccione el vínculo Eliminar y confirme que desea eliminar el registro, para ello, haga clic en el botón Eliminar.

Sin escribir nada de código, ha agregado vistas que realizan operaciones comunes en los datos de la tabla Estudiante.

Es posible que haya observado que la etiqueta de texto de un campo se basa en la propiedad de base de datos (por ejemplo, Apellidos), que no es necesariamente lo que desea mostrar en la página web. Por ejemplo, puede preferir que la etiqueta sea Apellidos. Corregirá este problema de presentación más adelante en el tutorial.

Mostrar vistas de inscripción

La base de datos incluye una relación de uno a varios entre las tablas Estudiante e Inscripciones, así como una relación de uno a varios entre las tablas Curso e Inscripciones. Las vistas de Inscripción controlan correctamente estas relaciones. Vaya a la página de inicio del sitio y seleccione el vínculo Lista de inscripciones y, luego, el vínculo Crear nuevo.

La vista muestra un formulario para crear un nuevo registro de inscripción. En concreto, observe que el formulario contiene una lista desplegable CourseID y una lista desplegable StudentID. Ambos contienen los valores de las tablas relacionadas.

Además, la validación de los valores proporcionados se aplica automáticamente según el tipo de datos del campo. Nota requiere un número, por lo que se muestra un mensaje de error si intenta proporcionar un valor incompatible: El campo Nota debe ser un número.

Ha comprobado que las vistas generadas automáticamente permiten a los usuarios trabajar con los datos de la base de datos. En el siguiente tutorial de esta serie, actualizará la base de datos y hará los cambios correspondientes en la aplicación web.

Pasos siguientes

En este tutorial ha:

  • Agregó el scaffold
  • Agregó vínculos a nuevas vistas
  • Mostró vistas de alumno
  • Mostró vistas de inscripción

Pase al tutorial siguiente para aprender a cambiar la base de datos.

Cambio de la base de datos