Tutorial: personalización de la vista para EF Database First con la aplicación ASP.NET MVC

Con el scaffolding de MVC, Entity Framework y 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 automáticamente código que permite 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 cambiar las vistas generadas automáticamente para mejorar la presentación.

En este tutorial va a:

  • Agregar cursos a la página de detalles de estudiante
  • Confirmar que los cursos se agregan a la página

Requisitos previos

Agregar cursos a los detalles de estudiante

El código generado proporciona un buen punto de partida para la aplicación, pero no proporciona necesariamente toda la funcionalidad que necesita en la aplicación. Puede personalizar el código para satisfacer los requisitos específicos de la aplicación. Actualmente, la aplicación no muestra los cursos inscritos del estudiante seleccionado. En esta sección, agregará los cursos inscritos de cada estudiante a la vista de detalles del alumno.

Abra vistas > estudiantes > details. cshtml. Debajo de la última <etiqueta de>/DL, pero antes de la etiqueta de cierre </div>, agregue el código siguiente.

<table class="table">
    <tr>
        <th>
            Course Title
        </th>
        <th>
            Grade
        </th>
        <th>
            Credits
        </th>
    </tr>

    @foreach (var item in Model.Enrollments)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Course.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Grade)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Course.Credits)
            </td>
        </tr>
    }
</table>

Este código crea una tabla que muestra una fila para cada registro de la tabla de inscripción del alumno seleccionado. El método de visualización representa el código HTML para el objeto (modelItem) que representa la expresión. Use el método display (en lugar de simplemente incrustar el valor de propiedad en el código) para asegurarse de que el valor tiene el formato correcto según su tipo y la plantilla de ese tipo. En este ejemplo, cada expresión devuelve una única propiedad del registro actual del bucle y los valores son tipos primitivos que se representan como texto.

Confirmar que se han agregado cursos

Ejecute la solución. Haga clic en lista de estudiantes y seleccione detalles para uno de los alumnos. Verá que los cursos inscritos se han incluido en la vista.

estudiante con inscripción

Pasos siguientes

En este tutorial va a:

  • Cursos agregados a la página de detalles de estudiante
  • Confirmado que los cursos se han agregado a la página

Avance al siguiente tutorial para aprender a agregar anotaciones de datos para especificar los requisitos de validación y el formato de presentación.