Compartir a través de

Tutorial: Crear la aplicación web Course Manager (herramientas de Entity Data Model)

  • Artículo

En este tema se describe cómo crear una aplicación ASP.NET básica que utiliza Entity Framework. La aplicación, CourseManagerWeb, se parece mucho a la aplicación Course Manager de formularios Windows Forms del Tutorial de ADO.NET Entity Framework.

Requisitos previos

Para completar este tutorial, se debe haber instalado lo siguiente:

  • Microsoft Visual Studio 2010.

  • La base de datos de ejemplo School. Para obtener más información acerca de cómo crear esta pequeña base de datos, vea Creating the School Sample Database.

En este tutorial se suponen conocimientos básicos de Visual Studio, .NET Framework y de programación en Visual C# o Visual Basic.

Crear la solución

Esta aplicación se basa en un proyecto de aplicación web ASP.NET estándar.

Para crear la solución CourseManagerWeb en Visual Studio

  1. En el menú Archivo de Visual Studio, seleccione Nuevo y haga clic en Proyecto.

    Se muestra el cuadro de diálogo Nuevo proyecto.

  2. En el recuadro Tipo de proyecto, seleccione Visual Basic o Visual C#. Especifique como tipo Plantilla Aplicación web ASP.NET y escriba el nombre CourseManagerWeb.

  3. Haga clic en Aceptar.

  4. Confirme que se ha compilado la solución y que contiene los archivos Default.aspx y Web.config.

Generar el archivo School .edmx

Esta aplicación muestra los datos enlazando los controles ASP.NET a un modelo conceptual de Entity Framework .

Para generar el archivo .edmx School

  1. Haga clic con el botón secundario del mouse en el proyecto CourseManagerWeb en el Explorador de soluciones, haga clic con el botón secundario, seleccione Agregar y haga clic en Nuevo elemento.

  2. Seleccione ADO.NET Entity Data Model en el recuadro Plantillas.

  3. Escriba School.edmx como nombre del modelo y haga clic en Agregar.

    Se muestra la página inicial del Asistente para Entity Data Model.

  4. En el cuadro de diálogo Elegir contenido de Model, seleccione Generar desde la base de datos y, a continuación, haga clic en Siguiente.

    Aparece el cuadro de diálogo Elegir la conexión de datos.

  5. Haga clic en el botón Nueva conexión.

    Se mostrará el cuadro de diálogo Propiedades de la conexión.

  6. Escriba su nombre de servidor, seleccione el método de autenticación, escriba School como nombre de la base de datos y haga clic en Aceptar.

    El cuadro de diálogo Elegir la conexión de datos se actualiza con la configuración de la conexión de la base de datos.

  7. Asegúrese de que la opción Guardar configuración de conexión de entidad en Web.Config como: está seleccionada y el valor está establecido en SchoolEntities. Haga clic en Siguiente.

    Aparece el cuadro de diálogo Elija los objetos de base de datos.

  8. Asegúrese de que todas las tablas están seleccionadas y de que el valor de Espacio de nombres del modelo es SchoolModel, y haga clic en Finalizar para completar el asistente.

    El asistente realiza las tareas siguientes:

    • Agrega referencias a los espacios de nombres System.Data.Entity, System.Runtime.Serialization y System.Security.

    • Genera el archivo School.edm, el archivo que define el modelo conceptual, el modelo de almacenamiento y la asignación entre los dos modelos.

    • Crea un archivo de código fuente que contiene las clases que se generaron según el modelo conceptual. Para ver el archivo de código fuente, expanda el nodo Default.aspx en el Explorador de soluciones.

    • Actualiza la sección de cadena de conexión del archivo Web.Config.

Antes de continuar en el paso siguiente, examine el archivo School.edmx abriéndolo en ADO.NET Entity Data Model Designer (el visor predeterminado).

Bb896242.note(es-es,VS.100).gifNota:
En los proyectos de Visual Basic, algunos archivos podrían no estar visibles en el Explorador de soluciones.Para ver todos los archivos de proyecto, haga clic en Proyecto en la barra de tareas de Visual Studio y seleccione Mostrar todos los archivos.

Crear la interfaz de usuario (UI)

La UI para esta aplicación contiene controles web de ASP.NET y HTML.

Para crear la página web de CourseManager

  1. En el proyecto CourseManagerWeb, haga clic con el botón secundario en la página web predeterminada (Default.aspx) y seleccione View Designer.

    El archivo se abre en el diseñador de páginas web.

  2. Elimine la sección div predeterminada que se genera automáticamente en las aplicaciones web ASP.NET nuevas.

  3. En el cuadro de herramientas, arrastre un control DropDownList hasta la superficie de diseño y establezca las propiedades siguientes:

    • ID en departmentList

    • Autopostback en True

  4. Expanda la sección Datos del cuadro de herramientas y arrastre un control EntityDataSource hasta el recuadro. Cambie su propiedad ID a departmentDS.

  5. Arrastre un control web GridView hasta el recuadro y establezca su propiedad ID en courseGridView.

La UI está completa ahora.

Enlazar el control DropDownList

Después, enlace el control DropDownList al control EntityDataSource para que DropDownList muestre los nombres de departamento.

Para enlazar el control DropDownList

  1. Presione Ctrl + F5 para compilar la aplicación. Esto es necesario para hacer que los metadatos del modelo estén disponibles para el Asistente para la configuración de orígenes de datos, que se utilizará en el paso siguiente.

  2. En la ventana Diseñador de página web, seleccione el control departmentDS EntityDataSource, haga clic en su etiqueta inteligente y seleccione el comando Configurar origen de datos.

    El Asistente para la configuración de orígenes de datos se inicia.

  3. En el cuadro de diálogo Configurar ObjectContext, seleccione SchoolEntities en la lista desplegable Conexión con nombre.

  4. Seleccione SchoolEntities en la lista desplegable Contenedor predeterminado.

  5. Haga clic en Siguiente.

  6. En el cuadro de diálogo Configurar selección de datos, haga lo siguiente:

    1. Seleccione Departaments en la lista desplegable EntitySetName.

    2. Seleccione (Ninguno) en la lista desplegable EntityTypeFilter.

    3. Active los campos Name y DepartmentID en el cuadro Seleccionar.

    4. Haga clic en Finalizar para terminar de configurar el origen de datos.

  7. Vuelva a la Vista de diseño de la página web.

  8. Seleccione el control DropDownList departmentList, haga clic en la etiqueta inteligente y, a continuación, haga clic en Elegir origen de datos.

    Aparece el cuadro de diálogo Seleccionar un origen de datos del Asistente para la configuración de orígenes de datos.

  9. En el cuadro de diálogo Seleccionar un origen de datos, realice las selecciones siguientes:

    • En Seleccionar origen de datos, seleccione departmentDS.

    • En Seleccionar un campo de datos para mostrar en DropDownList, seleccione Nombre.

    • En Seleccionar un campo de datos para el valor de DropDownList, seleccione DepartmentID.

    Bb896242.note(es-es,VS.100).gifNota:
    Si no hay ningún valor disponible en las listas desplegables, haga clic en Actualizar esquema.

  10. Haga clic en Aceptar.

La solución se compilará ahora correctamente. Cuando se ejecuta la aplicación, el control DropDownList se rellena con los nombres de departamentos. Al seleccionar un departamento, el formulario lo expondrá, pero todavía no se mostrará información de programación de las clases.

Enlazar el control GridView

Luego, agregue el código para que el control GridView muestre todos los cursos proporcionados en el departamento seleccionado. Para ello, se crean las consultas fuertemente tipadas con los objetos de Common Language Runtime (CLR) que representan las entidades y asociaciones en el modelo School.

Para enlazar el control GridView

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx.vb o Default.aspx.cs, y seleccione Ver código.

  2. Agregue las instrucciones using (C#) o Imports (Visual Basic) siguientes para hacer referencia al modelo que creó a partir de la base de datos School y el espacio de nombres de la entidad.

    Imports System.Data.Objects

    using System.Data.Objects;

  3. Agregue una propiedad a la clase _Default que representa el contexto del objeto.

    ' Create an ObjectContext based on SchoolEntity.
Private schoolContext As SchoolEntities

    // Create an ObjectContext based on SchoolEntity.
private SchoolEntities schoolContext;

  4. Dentro del controlador de eventos de carga de páginas existente, agregue el código siguiente para inicializar la propiedad schoolContext.

    ' Initialize the ObjectContext.
schoolContext = New SchoolEntities()

    // Initialize the data context.
schoolContext = new SchoolEntities();

  5. Vuelva a la Vista de diseño de la página web Default.aspx. Haga doble clic en el control departmentList DropDownList.

    De esta forma se agrega un controlador de eventos SelectedIndexChanged para el control departmentList al archivo Default.aspx.vb o Default.aspx.cs.

  6. Pegue el código siguiente en el controlador de eventos SelectedIndexChanged:

    'Get the department ID.
Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

' Select course information based on department ID.
Dim courseInfo = _
    From c In schoolContext.Courses _
    Where c.Department.DepartmentID = departmentID _
    Select New With _
    { _
        .CourseID = c.CourseID, _
        .CourseName = c.Title, _
        .CourseCredits = c.Credits _
    }

' Bind the GridView control to the courseInfo collection.
courseGridView.DataSource = courseInfo
courseGridView.DataBind()

    // Get the department ID.
Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);

// Select course information based on department ID.
var courseInfo = from c in schoolContext.Courses
                 where c.Department.DepartmentID == departmentID
                 select new
                 {
                     CourseID = c.CourseID,
                     CourseTitle = c.Title,
                     CourseCredits = c.Credits
                 };

// Bind the GridView control to the courseInfo collection.
courseGridView.DataSource = courseInfo;
courseGridView.DataBind();

    Este código utiliza una consulta de LINQ to Entities para obtener la información del curso según el DepartmentID proporcionado. La consulta genera una colección de tipos anónimos que contiene el identificador, el título y los créditos del curso. A continuación, esta colección se enlaza al control GridView.

  7. Agregue un controlador de eventos PreRenderComplete a la clase _Default en el archivo Default.aspx.vb o Default.aspx.cs. Agregue el código siguiente para inicializar el control GridView cuando la página se muestre por primera vez.

    Private Sub Page_PreRenderComplete(ByVal sender As Object, _
                                   ByVal e As System.EventArgs) _
                                   Handles Me.PreRenderComplete
    ' Force initial GridView update.
    departmentList_SelectedIndexChanged(Me, New EventArgs())
End Sub

    protected void Page_PreRenderComplete(object sender, EventArgs e)
{
    // Force initial GridView update.
    departmentList_SelectedIndexChanged(this.Page, new EventArgs());
}

La aplicación se compilará ahora de forma correcta y será totalmente funcional. Al seleccionar un formulario de departamento diferente en la lista desplegable, el formulario se expone y el control GridView se actualiza con la información del curso correspondiente.

Códigos

Esta sección enumera las versiones finales del código para el cuerpo de la página web predeterminada y para el archivo de código subyacente de la solución CourseManagerWeb.

Cuerpo de la página web predeterminada

<body>
    <form id="form1" runat="server">
    <asp:DropDownList ID="departmentList" runat="server" 
                      AutoPostBack="True" DataSourceID="departmentDS" 
                      DataTextField="Name" DataValueField="DepartmentID" 
                      Height="19px" Width="161px">
    </asp:DropDownList>
    <asp:EntityDataSource ID="departmentDS" runat="server" 
        ConnectionString="name=SchoolEntities" 
        DefaultContainerName="SchoolEntities" 
        EnableFlattening="False" EntitySetName="Departments" 
        Select="it.[DepartmentID], it.[Name]">
    </asp:EntityDataSource>
    <asp:GridView ID="courseGridView" runat="server">
    </asp:GridView>
    </form>
</body>

Archivo de código subyacente

Imports System.Data.Objects
Partial Public Class _Default
    Inherits System.Web.UI.Page
    ' Create an ObjectContext based on SchoolEntity.
    Private schoolContext As SchoolEntities

    Protected Sub Page_Load(ByVal sender As Object, _
                            ByVal e As System.EventArgs) _
                            Handles Me.Load
        ' Initialize the ObjectContext.
        schoolContext = New SchoolEntities()
    End Sub

    Protected Sub departmentList_SelectedIndexChanged( _
                            ByVal sender As Object, _
                            ByVal e As EventArgs) _
                            Handles departmentList.SelectedIndexChanged
        'Get the department ID.
        Dim departmentID As Int32 = CType(departmentList.SelectedValue, Int32)

        ' Select course information based on department ID.
        Dim courseInfo = _
            From c In schoolContext.Courses _
            Where c.Department.DepartmentID = departmentID _
            Select New With _
            { _
                .CourseID = c.CourseID, _
                .CourseName = c.Title, _
                .CourseCredits = c.Credits _
            }

        ' Bind the GridView control to the courseInfo collection.
        courseGridView.DataSource = courseInfo
        courseGridView.DataBind()
    End Sub
    Private Sub Page_PreRenderComplete(ByVal sender As Object, _
                                       ByVal e As System.EventArgs) _
                                       Handles Me.PreRenderComplete
        ' Force initial GridView update.
        departmentList_SelectedIndexChanged(Me, New EventArgs())
    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Objects;
namespace CourseManagerWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        // Create an ObjectContext based on SchoolEntity.
        private SchoolEntities schoolContext;

        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            // Force initial GridView update.
            departmentList_SelectedIndexChanged(this.Page, new EventArgs());
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Initialize the data context.
            schoolContext = new SchoolEntities();
        }

        protected void departmentList_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Get the department ID.
            Int32 departmentID = Convert.ToInt32(departmentList.SelectedValue);

            // Select course information based on department ID.
            var courseInfo = from c in schoolContext.Courses
                             where c.Department.DepartmentID == departmentID
                             select new
                             {
                                 CourseID = c.CourseID,
                                 CourseTitle = c.Title,
                                 CourseCredits = c.Credits
                             };

            // Bind the GridView control to the courseInfo collection.
            courseGridView.DataSource = courseInfo;
            courseGridView.DataBind();
        }
    }
}

Pasos siguientes

Ha creado correctamente la aplicación CourseManagerWeb y la ha ejecutado. Para obtener más información acerca de Entity Framework, vea ADO.NET Entity Framework.

Vea también

Otros recursos

Quickstart
Samples (Entity Framework)
Querying an Entity Data Model