Procedura dettagliata: creazione dell'applicazione Course Manager Web (strumenti di Entity Data Model)

  • Articolo

In questo argomento viene illustrato come creare un'applicazione ASP.NET di base che utilizza Entity Framework. L'applicazione CourseManagerWeb presenta caratteristiche molto simili all'applicazione CourseManager di Windows Form presentata nella Guida rapida di ADO.NET Entity Framework.

Prerequisiti

Per completare la procedura dettagliata, è necessario verificare che sia installato quanto segue:

  • Microsoft Visual Studio 2010

  • Il database di esempio School. Per informazioni sulla creazione di questo database di piccole dimensioni, vedere Creating the School Sample Database.

In questa procedura dettagliata si presuppone che si disponga di una conoscenza di base di Visual Studio, .NET Framework e della programmazione in Visual C# o Visual Basic.

Creazione della soluzione

Questa applicazione è basata su un progetto di applicazione Web ASP.NET standard.

Per creare la soluzione CourseManagerWeb in Visual Studio.

  1. Scegliere Nuovo dal menu File di Visual Studio, quindi fare clic su Progetto.

    Verrà visualizzata la finestra di dialogo Nuovo progetto.

  2. Scegliere Visual Basic o Visual C# nel riquadro Tipo progetto. Specificare un tipo Modello per Applicazione Web ASP.NET e digitare il nome CourseManagerWeb.

  3. Fare clic su OK.

  4. Verificare che la soluzione sia stata generata e contenga i file Default.aspx e Web.config.

Generazione del file con estensione edmx School

In questa applicazione, i dati vengono visualizzati associando i controlli ASP.NET a un modello concettuale Entity Framework .

Per generare il file con estensione edmx School

  1. Fare clic con il pulsante destro del mouse sul progetto CourseManagerWeb in Esplora soluzioni, scegliere Aggiungi, quindi fare clic su Nuovo elemento.

  2. Selezionare ADO.NET Entity Data Model nel riquadro Modelli.

  3. Digitare School.edmx come nome di modello, quindi fare clic su Aggiungi.

    Verrà visualizzata la pagina iniziale della procedura guidata Entity Data Model.

  4. Nella finestra di dialogo Scegli contenuto Model selezionare Genera da database, quindi scegliere Avanti.

    Verrà visualizzata la finestra di dialogo Seleziona connessione dati.

  5. Fare clic sul pulsante Nuova connessione.

    Verrà visualizzata la finestra di dialogo Proprietà connessione.

  6. Immettere il nome del server, selezionare il metodo di autenticazione, digitare School come nome del database, quindi scegliere OK.

    La finestra di dialogo Seleziona connessione dati verrà aggiornata con le impostazioni di connessione al database.

  7. Verificare che l'opzione Salva impostazioni stringa di connessione entity in Web.Config come sia selezionata e che il valore sia impostato su SchoolEntities. Fare clic su Avanti.

    Verrà visualizzata la finestra di dialogo Seleziona oggetti di database.

  8. Verificare che tutte le tabelle siano selezionate e che il valore di Spazio dei nomi modello sia SchoolModel, quindi scegliere Fine per completare la procedura guidata.

    La procedura guidata consente di effettuare le operazioni seguenti:

    • Aggiungere i riferimenti agli spazi dei nomi System.Data.Entity, System.Runtime.Serialization e System.Security.

    • Generare il file School.edmx, che definisce il modello concettuale, il modello di archiviazione e il mapping tra i due.

    • Creare un file di codice sorgente contenente le classi generate in base al modello concettuale. Per visualizzare il file di codice sorgente, espandere il nodo Default.aspx in Esplora soluzioni.

    • Aggiornare la sezione della stringa di connessione del file Web.Config.

Prima di andare al passaggio successivo, esaminare il file School.edmx aprendolo nel visualizzatore predefinito, ovvero ADO.NET Entity Data Model Designer.

Bb896242.note(it-it,VS.100).gifNota:
Per i progetti di Visual Basic alcuni file potrebbero non essere visibili in Esplora soluzioni.Per visualizzare tutti i file di progetto, fare clic su Progetto nella barra delle applicazioni di Visual Studio e selezionare Mostra tutti i file.

Creazione dell'interfaccia utente

L'interfaccia utente di quest'applicazione contiene controlli Web HTML e ASP.NET.

Per creare la pagina Web di CourseManager

  1. Nel progetto CourseManagerWeb fare clic con il pulsante destro del mouse sulla pagina Web predefinita (Default.aspx) e scegliere Visualizza finestra di progettazione

    Il file verrà aperto nella finestra Progettazione pagina Web.

  2. Eliminare la sezione div predefinita che viene generata automaticamente nelle nuove applicazioni Web ASP.NET.

  3. Trascinare un controllo DropDownList dalla casella degli strumenti nell'area di progettazione e impostare le proprietà seguenti:

    • ID su departmentList

    • AutoPostBack su True

  4. Espandere la sezione Dati della casella degli strumenti e trascinare un controllo EntityDataSource nel pannello. Impostare la relativa proprietà ID su departmentDS.

  5. Trascinare un controllo Web GridView nel pannello e impostarne la proprietà ID su courseGridView.

L'interfaccia utente è ora completa.

Associazione del controllo DropDownList

A questo punto, si procede all'associazione del controllo DropDownList al controllo EntityDataSource in modo che DropDownList visualizzi i nomi dei reparti.

Per associare il controllo DropDownList

  1. Premere CTRL+F5 per compilare l'applicazione. Questa operazione è necessaria per rendere disponibili i metadati del modello alla Configurazione guidata origine dati che verrà utilizzata nel passaggio successivo.

  2. Nella finestra Progettazione pagina Web selezionare il controllo departmentDS EntityDataSource, fare clic sul relativo smart tag, quindi selezionare il comando Configura origine dati.

    Verrà avviata la Configurazione guidata origine dati.

  3. Nella finestra di dialogo Configura ObjectContext selezionare SchoolEntities nell'elenco a discesa Connessione denominata.

  4. Selezionare SchoolEntities nell'elenco a discesa Contenitore predefinito.

  5. Fare clic su Avanti.

  6. Nella finestra di dialogo Configura selezione dati effettuare le seguenti operazioni:

    1. Selezionare Reparti nell'elenco a discesa EntitySetName.

    2. Selezionare (Nessuno) nell'elenco a discesa EntityTypeFilter.

    3. Selezionare i campi DepartmentID e Name nella casella Seleziona.

    4. Fare clic su Fine per completare la configurazione dell'origine dati.

  7. Tornare alla visualizzazione Progettazione della pagina Web.

  8. Selezionare il controllo departmentList DropDownList, fare clic sullo smart tag, quindi su Scegli origine dati.

    Verrà visualizzata la finestra di dialogo Seleziona origine dati della Configurazione guidata origine dati.

  9. Nella finestra di dialogo Seleziona origine dati effettuare le selezioni seguenti:

    • Per Selezionare un'origine dati selezionare departmentDS.

    • Per Selezionare un campo dati da visualizzare in DropDownList selezionare Name.

    • Per Selezionare un campo dati da cui ottenere il valore di DropDownList selezionare DepartmentID.

    Bb896242.note(it-it,VS.100).gifNota:
    Se non sono disponibili valori negli elenchi a discesa, fare clic su Aggiorna schema.

  10. Fare clic su OK.

La soluzione è stata compilata. Quando l'applicazione viene eseguita, nel controllo DropDownList vengono inseriti i nomi dei reparti. Quando si seleziona un reparto, il form viene inviato, ma le informazioni relative alla pianificazione delle classi non vengono ancora visualizzate.

Associazione del controllo GridView

A questo punto, aggiungere il codice in modo che il controllo GridView visualizzi tutti i corsi offerti nel reparto selezionato. A tale scopo, verranno create query fortemente tipizzate sugli oggetti CLR (Common Language Runtime) che rappresentano entità e associazioni nel modello School.

Per associare il controllo GridView

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse su Default.aspx.vb o Default.aspx.cs e scegliere Visualizza codice.

  2. Aggiungere le istruzioni using (C#) o Imports (Visual Basic) seguenti per fare riferimento al modello creato dal database School e allo spazio dei nomi dell'entità.

    Imports System.Data.Objects

    using System.Data.Objects;

  3. Aggiungere una proprietà alla classe _Default che rappresenta il contesto dell'oggetto.

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

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

  4. Nel gestore eventi per il caricamento della pagina esistente, aggiungere il codice seguente per inizializzare la proprietà schoolContext.

    ' Initialize the ObjectContext.
schoolContext = New SchoolEntities()

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

  5. Tornare alla visualizzazione Progettazione della pagina Web Default.aspx. Fare doppio clic sul controllo departmentList DropDownList.

    In questo modo viene aggiunto un gestore eventi SelectedIndexChanged per il controllo departmentList al file Default.aspx.vb o Default.aspx.cs.

  6. Incollare il codice seguente nel gestore eventi 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();

    Questo codice utilizza una query LINQ to Entities per ottenere informazioni sui corsi in base al valore DepartmentID fornito. La query genera una raccolta di tipi anonimi che contiene l'ID, il titolo e i crediti del corso. La raccolta viene quindi associata al controllo GridView.

  7. Aggiungere un gestore eventi PreRenderComplete alla classe _Default nel file Default.aspx.vb o Default.aspx.cs. Aggiungere il codice seguente per inizializzare il controllo GridView quando la pagina viene visualizzata per la prima volta.

    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());
}

L'applicazione è ora compilata e completamente funzionale. La selezione del form di un reparto diverso nell'elenco a discesa determina l'invio del form e l'aggiornamento del controllo GridView con le informazioni sui corsi corrispondenti.

Listato di codice

In questa sezione sono elencate le versioni finali del codice per il corpo della pagina Web predefinita e per il file code-behind della soluzione CourseManagerWeb.

Corpo della pagina Web predefinita

<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>

File code-behind

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();
        }
    }
}

Passaggi successivi

L'applicazione CourseManagerWeb è stata creata ad eseguita. Per ulteriori informazioni su Entity Framework, vedere ADO.NET Entity Framework.

Vedere anche

Altre risorse

Quickstart
Samples (Entity Framework)
Querying an Entity Data Model