Compartir a través de

Tutorial: crear la aplicación web Course Manager

  • Artículo

En este tema se describe cómo crear una aplicación ASP.NET básica que utiliza un Entity Data Model (EDM). 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:

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 panel Tipo de proyecto, seleccione Visual Basic o Visual C#. Especifique como tipo PlantillaAplicación web ASP.NET y escriba el nombre CourseManagerWeb.

  3. Haga clic en Aceptar.

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

Generar el Entity Data Model School

Esta aplicación muestra los datos enlazando los controles ASP.NET a un EDM.

Para generar el EDM 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 panel 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.edmx que define el EDM.

    • Crea un archivo de código fuente que contiene las clases que se generaron según el modelo EDM. 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).

Nota

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 panel. Cambie su propiedad ID a departmentDS.

  5. Arrastre un control web GridView hasta el panel 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 generar 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 departmentDSEntityDataSource, 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 Departament 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 DropDownListdepartmentList, 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 para mostrar en DropDownList, seleccione Nombre.

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

    Nota

    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 generará 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 con establecimiento inflexible de tipos 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 departmentListDropDownList.

    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.Course _
        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.Course
                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 generará 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" >
    <asp:DropDownList ID="departmentList"  
         AutoPostBack="True" DataSourceID="departmentDS" 
        DataTextField="Name" DataValueField="DepartmentID" 
        onselectedindexchanged="departmentList_SelectedIndexChanged"> 
    </asp:DropDownList>
    
    <asp:EntityDataSource ID="departmentDS"  
       ConnectionString="name=SchoolEntities"
       DefaultContainerName="SchoolEntities" 
       EntitySetName="Department" Select="it.[DepartmentID], 
       it.[Name]">
    </asp:EntityDataSource>

    <asp:GridView ID="courseGridView" >
    </asp:GridView>

    <asp:Button ID="closePage"  Text="Close" 
       onclick="closePage_Click" />
  </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.Course _
            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.Course
                            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

Tutorial rápido (Entity Framework)
Ejemplos (Entity Framework)
Servicios de objeto (Entity Framework)
Trabajar con datos de entidad