Procedura dettagliata: creare l'applicazione CourseManagerWeb

Articolo
08/22/2008

In questo argomento viene illustrato come creare un'applicazione ASP.NET di base che utilizza un modello EDM (Entity Data Model). 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 2008 SP1.
Database di esempio School. Per informazioni sulla creazione di questo database di piccole dimensioni, vedere Creazione del database di esempio School (guida rapida di Entity Framework).

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.

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

Verrà visualizzata la finestra di dialogo Nuovo progetto.
Scegliere Visual Basic o Visual C# nel riquadro Tipo progetto. Specificare un tipo Modello per Applicazione Web ASP.NET e digitare il nome CourseManagerWeb.
Fare clic su OK.
Verificare che la soluzione sia stata generata e contenga i file Default.aspx e Web.config.

Generazione del modello EDM School

In questa applicazione i dati vengono visualizzati associando i controlli ASP.NET a un modello EDM.

Per generare il modello EDM School

Fare clic con il pulsante destro del mouse sul progetto CourseManagerWeb in Esplora soluzioni, scegliere Aggiungi, quindi fare clic su Nuovo elemento.
Selezionare ADO.NET Entity Data Model nel riquadro Modelli.
Digitare School.edmx come nome di modello, quindi fare clic su Aggiungi.

Verrà visualizzata la pagina iniziale della procedura guidata Entity Data Model.
Nella finestra di dialogo Scegli contenuto Model selezionare Genera da database, quindi scegliere Avanti.

Verrà visualizzata la finestra di dialogo Seleziona connessione dati.
Fare clic sul pulsante Nuova connessione.

Verrà visualizzata la finestra di dialogo Proprietà connessione.
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.
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.
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 riferimenti agli spazi dei nomi System.Data.Entity, System.Runtime.Serialization e System.Security.
- Generare il file School.edmx che definisce il modello EDM.
- Creare un file di codice sorgente contenente le classi generate in base al modello EDM. 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.

Nota
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

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.
Eliminare la sezione div predefinita che viene generata automaticamente nelle nuove applicazioni Web ASP.NET.
Trascinare un controllo DropDownList dalla casella degli strumenti nell'area di progettazione e impostare le proprietà seguenti:
- ID su departmentList
- AutoPostBack su True
Espandere la sezione Dati della casella degli strumenti e trascinare un controllo EntityDataSource nel pannello. Impostare la relativa proprietà ID su departmentDS.
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

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.
Nella finestra Progettazione pagina Web selezionare il controllo departmentDSEntityDataSource, fare clic sul relativo smart tag, quindi selezionare il comando Configura origine dati.

Verrà avviata la Configurazione guidata origine dati.
Nella finestra di dialogo Configura ObjectContext selezionare SchoolEntities nell'elenco a discesa Connessione denominata.
Selezionare SchoolEntities nell'elenco a discesa Contenitore predefinito.
Fare clic su Avanti.
Nella finestra di dialogo Configura selezione dati effettuare una delle operazioni seguenti:
1. Selezionare Department 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.
Tornare alla visualizzazione Progettazione della pagina Web.
Selezionare il controllo departmentListDropDownList, fare clic sullo smart tag, quindi su Scegli origine dati.

Verrà visualizzata la finestra di dialogo Seleziona origine dati della Configurazione guidata origine dati.
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.
Nota

Se non sono disponibili valori negli elenchi a discesa, fare clic su Aggiorna schema.
Fare clic su OK.

Nota
Se non sono disponibili valori negli elenchi a discesa, fare clic su Aggiorna schema.

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

In Esplora soluzioni fare clic con il pulsante destro del mouse su Default.aspx.vb o Default.aspx.cs e scegliere Visualizza codice.
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;
```

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;

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

Tornare alla visualizzazione Progettazione della pagina Web Default.aspx. Fare doppio clic sul controllo departmentListDropDownList.

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

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

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

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

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

Passaggi successivi

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

Vedere anche

Altre risorse

Guida rapida (Entity Framework)
Esempi (Entity Framework)
Object Services (Entity Framework)
Utilizzo di dati delle entità

Condividi tramite