Recupero e visualizzazione di dati con l'associazione di modelli e i Web form

Questa serie di esercitazioni illustra gli aspetti di base dell'uso dell'associazione di modelli con un progetto Web Form ASP.NET. L'associazione di modelli rende l'interazione dei dati più semplice rispetto alla gestione di oggetti origine dati, ad esempio ObjectDataSource o SqlDataSource. Questa serie inizia con materiale introduttivo e passa a concetti più avanzati nelle esercitazioni successive.

Il modello di associazione di modelli funziona con qualsiasi tecnologia di accesso ai dati. In questa esercitazione si userà Entity Framework, ma è possibile usare la tecnologia di accesso ai dati più familiare. Da un controllo server associato a dati, ad esempio un controllo GridView, ListView, DetailsView o FormView, è possibile specificare i nomi dei metodi da usare per la selezione, l'aggiornamento, l'eliminazione e la creazione di dati. In questa esercitazione verrà specificato un valore per SelectMethod.

All'interno di questo metodo si fornisce la logica per il recupero dei dati. Nell'esercitazione successiva verranno impostati i valori per UpdateMethod, DeleteMethod e InsertMethod.

È possibile scaricare il progetto completo in C# o Visual Basic. Il codice scaricabile funziona con Visual Studio 2012 e versioni successive. Usa il modello di Visual Studio 2012, leggermente diverso dal modello di Visual Studio 2017 illustrato in questa esercitazione.

Nell'esercitazione si esegue l'applicazione in Visual Studio. È anche possibile distribuire l'applicazione in un provider di hosting e renderla disponibile tramite Internet. Microsoft offre hosting Web gratuito per un massimo di 10 siti Web in un
account di valutazione di Azure gratuito. Per informazioni su come distribuire un progetto Web di Visual Studio in App Web del servizio app di Azure, vedere la serie ASP.NET distribuzione Web con Visual Studio . Questa esercitazione mostra anche come utilizzare le migrazioni Code First di Entity Framework per distribuire il database di SQL Server nel database SQL di Azure.

Versioni software usate nell'esercitazione

Microsoft Visual Studio 2017 o Microsoft Visual Studio Community 2017

Questa esercitazione funziona anche con Visual Studio 2012 e Visual Studio 2013, ma esistono alcune differenze nell'interfaccia utente e nel modello di progetto.

Cosa costruirai

In questa esercitazione si apprenderà come:

Creare oggetti dati che riflettono un'università con studenti iscritti ai corsi
Compilare tabelle di database dagli oggetti
Popolare il database con dati di test
Visualizzare i dati in un modulo Web

Creare il progetto

In Visual Studio 2017 creare un progetto applicazione Web (.NET Framework) di ASP.NET denominato ContosoUniversityModelBinding.
Seleziona OK. Verrà visualizzata la finestra di dialogo per selezionare un modello.
Selezionare il modello Web Form .
Se necessario, modificare l'autenticazione in Account utente singoli.
Selezionare OK per creare il progetto.

Modificare l'aspetto del sito

Apportare alcune modifiche per personalizzare l'aspetto del sito.

Aprire il file Site.Master.
Modificare il titolo per visualizzare Contoso University e non My ASP.NET Application.
```
<title><%: Page.Title %> - Contoso University</title>
```

Modificare il testo dell'intestazione da Nome applicazione a Contoso University.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" runat="server" href="~/">Contoso University</a>
</div>

Modificare i link di navigazione nell'intestazione con quelli più adatti al sito.

Rimuovere i collegamenti a Informazioni e Contatto e, invece, collegarsi a una pagina Studenti, che verrà creata.
```
<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>
```
Salvare Site.Master.

Aggiungere un modulo Web per visualizzare i dati degli studenti

In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto, scegliere Aggiungi e quindi Nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare il modello Web Form con pagina master e denominarlo Students.aspx.
Seleziona Aggiungi.
Per la pagina master del modulo Web selezionare Site.Master.
Seleziona OK.

Aggiungere il modello di dati

Nella cartella Models aggiungere una classe denominata UniversityModels.cs.

Fare clic con il pulsante destro del mouse su Modelli, scegliere Aggiungi e quindi Nuovo elemento. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Nel menu di spostamento a sinistra selezionare Codice, quindi Classe.

Assegnare alla classe il nome UniversityModels.cs e selezionare Aggiungi.

In questo file definire le SchoolContextclassi , Student, Enrollmente Course come indicato di seguito:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace ContosoUniversityModelBinding.Models
{
    public class SchoolContext : DbContext
    {
        public DbSet<Student> Students { get; set; }
        public DbSet<Enrollment> Enrollments { get; set; }
        public DbSet<Course> Courses { get; set; }
    }

    public class Student
    {
        [Key, Display(Name = "ID")]
        [ScaffoldColumn(false)]
        public int StudentID { get; set; }

        [Required, StringLength(40), Display(Name="Last Name")]
        public string LastName { get; set; }

        [Required, StringLength(20), Display(Name = "First Name")]
        public string FirstName { get; set; }

        [EnumDataType(typeof(AcademicYear)), Display(Name = "Academic Year")]
        public AcademicYear Year { get; set; }

        public virtual ICollection<Enrollment> Enrollments { get; set; }
    }

    public class Enrollment
    {
        [Key]
        public int EnrollmentID { get; set; }
        public int CourseID { get; set; }
        public int StudentID { get; set; }
        public decimal? Grade { get; set; }
        public virtual Course Course { get; set; }
        public virtual Student Student { get; set; }
    }

    public class Course
    {
        [Key]
        public int CourseID { get; set; }
        public string Title { get; set; }
        public int Credits { get; set; }
        public virtual ICollection<Enrollment> Enrollments { get; set; }
    } 

    public enum AcademicYear
    {
        Freshman,
        Sophomore,
        Junior,
        Senior
    }
}

La SchoolContext classe deriva da DbContext, che gestisce la connessione al database e le modifiche nei dati.

Nella classe Student, notare gli attributi applicati alle proprietà FirstName, LastName e Year. Questa esercitazione usa questi attributi per la convalida dei dati. Per semplificare il codice, solo queste proprietà sono contrassegnate con attributi di convalida dei dati. In un progetto reale si applicano attributi di convalida a tutte le proprietà che richiedono la convalida.

Salvare UniversityModels.cs.

Configurare il database in base alle classi

In questa esercitazione si usano le Migrazioni Code First per creare oggetti e tabelle di database. Queste tabelle archiviano informazioni sugli studenti e sui loro corsi.

Fare clic su Strumenti>Gestione Pacchetti NuGet>Console di Gestione pacchetti.
Nella console di Gestione pacchetti eseguire questo comando:
enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

Se il comando viene completato correttamente, viene visualizzato un messaggio che informa che le migrazioni sono state abilitate.

Si noti che è stato creato un file denominato Configuration.cs . La Configuration classe dispone di un Seed metodo che può precompilare le tabelle di database con dati di test.

Precompilare il database

Apri Configuration.cs.

Aggiungere il codice seguente al metodo Seed. Aggiungere anche un'istruzione using per lo spazio dei nomi ContosoUniversityModelBinding. Models.

namespace ContosoUniversityModelBinding.Migrations
{
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Migrations;
    using System.Linq;
    using ContosoUniversityModelBinding.Models;

    internal sealed class Configuration : DbMigrationsConfiguration<SchoolContext>
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = false;
        }

        protected override void Seed(SchoolContext context)
        {

            context.Students.AddOrUpdate(
                 new Student { 
                     FirstName = "Carson", 
                     LastName = "Alexander", 
                     Year = AcademicYear.Freshman },
                 new Student { 
                     FirstName = "Meredith", 
                     LastName = "Alonso", 
                     Year = AcademicYear.Freshman },
                 new Student { 
                     FirstName = "Arturo", 
                     LastName = "Anand", 
                     Year = AcademicYear.Sophomore },
                 new Student { 
                     FirstName = "Gytis", 
                     LastName = "Barzdukas", 
                     Year = AcademicYear.Sophomore },
                 new Student { 
                     FirstName = "Yan", 
                     LastName = "Li", 
                     Year = AcademicYear.Junior },
                 new Student { 
                     FirstName = "Peggy", 
                     LastName = "Justice", 
                     Year = AcademicYear.Junior },
                 new Student { 
                     FirstName = "Laura", 
                     LastName = "Norman", 
                     Year = AcademicYear.Senior },
                 new Student { 
                     FirstName = "Nino", 
                     LastName = "Olivetto", 
                     Year = AcademicYear.Senior }
                 );

            context.SaveChanges();

            context.Courses.AddOrUpdate(
                new Course { Title = "Chemistry", Credits = 3 },
                new Course { Title = "Microeconomics", Credits = 3 },
                new Course { Title = "Macroeconomics", Credits = 3 },
                new Course { Title = "Calculus", Credits = 4 },
                new Course { Title = "Trigonometry", Credits = 4 },
                new Course { Title = "Composition", Credits = 3 },
                new Course { Title = "Literature", Credits = 4 }
                );

            context.SaveChanges();

            context.Enrollments.AddOrUpdate(
                new Enrollment { StudentID = 1, CourseID = 1, Grade = 1 },
                new Enrollment { StudentID = 1, CourseID = 2, Grade = 3 },
                new Enrollment { StudentID = 1, CourseID = 3, Grade = 1 },
                new Enrollment { StudentID = 2, CourseID = 4, Grade = 2 },
                new Enrollment { StudentID = 2, CourseID = 5, Grade = 4 },
                new Enrollment { StudentID = 2, CourseID = 6, Grade = 4 },
                new Enrollment { StudentID = 3, CourseID = 1 },
                new Enrollment { StudentID = 4, CourseID = 1 },
                new Enrollment { StudentID = 4, CourseID = 2, Grade = 4 },
                new Enrollment { StudentID = 5, CourseID = 3, Grade = 3 },
                new Enrollment { StudentID = 6, CourseID = 4 },
                new Enrollment { StudentID = 7, CourseID = 5, Grade = 2 }
                );

            context.SaveChanges();
        }
    }
}

Salvare Configuration.cs.
Nella console di Gestione pacchetti eseguire il comando add-migration initial.
Eseguire il comando update-database.

Se si riceve un'eccezione durante l'esecuzione di questo comando, i StudentID valori e CourseID potrebbero essere diversi dai valori del Seed metodo. Aprire le tabelle di database e trovare i valori esistenti per StudentID e CourseID. Aggiungere tali valori al codice per il seeding della Enrollments tabella.

Aggiungere un controllo GridView

Con i dati del database popolati, è ora possibile recuperarli e visualizzarli.

Aprire Students.aspx.

Individuare il MainContent segnaposto. All'interno di tale segnaposto aggiungere un controllo GridView che include questo codice.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView runat="server" ID="studentsGrid"
        ItemType="ContosoUniversityModelBinding.Models.Student" DataKeyNames="StudentID" 
        SelectMethod="studentsGrid_GetData"
        AutoGenerateColumns="false">
        <Columns>
            <asp:DynamicField DataField="StudentID" />
            <asp:DynamicField DataField="LastName" />
            <asp:DynamicField DataField="FirstName" />
            <asp:DynamicField DataField="Year" />          
            <asp:TemplateField HeaderText="Total Credits">
              <ItemTemplate>
                <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>" 
                    runat="server" />
              </ItemTemplate>
            </asp:TemplateField>        
        </Columns>
    </asp:GridView>
</asp:Content>

Informazioni da considerare:

Si noti il valore impostato per la SelectMethod proprietà nell'elemento GridView. Questo valore specifica il metodo usato per recuperare i dati gridView creati nel passaggio successivo.
La ItemType proprietà è impostata sulla Student classe creata in precedenza. Questa impostazione consente di fare riferimento alle proprietà della classe nel markup. Ad esempio, la Student classe ha una raccolta denominata Enrollments. È possibile usare Item.Enrollments per recuperare tale raccolta e quindi usare la sintassi LINQ per recuperare la somma dei crediti registrati di ogni studente.

Salva Students.aspx

Aggiungere codice per recuperare i dati

Nel file di origine (code-behind) Students.aspx, aggiungi il metodo specificato per il valore SelectMethod.

Aprire Students.aspx.cs.
Aggiungere istruzioni using per gli spazi dei nomi ContosoUniversityModelBinding. Models e System.Data.Entity.
```
using ContosoUniversityModelBinding.Models;
using System.Data.Entity;
```
Aggiungere il metodo specificato per SelectMethod:
```
public IQueryable<Student> studentsGrid_GetData()
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
}
```
La Include clausola migliora le prestazioni delle query, ma non è necessaria. Senza la Include clausola, i dati vengono recuperati usando il caricamento differito, che comporta l'invio di una query separata al database ogni volta che vengono recuperati i dati correlati. Con la Include clausola, i dati vengono recuperati usando il caricamento prioritario, ovvero una singola query di database recupera tutti i dati correlati. Se i dati correlati non vengono usati, il caricamento anticipato è meno efficiente perché vengono recuperati più dati. Tuttavia, in questo caso, il caricamento eager offre le prestazioni migliori perché i dati correlati vengono visualizzati per ogni record.

Per ulteriori informazioni sulle considerazioni sulle prestazioni durante il caricamento di dati correlati, vedere la sezione Caricamento lazy, eager ed esplicito dei dati correlati nell'articolo Lettura di dati correlati con Entity Framework in un'applicazione ASP.NET MVC.

Per impostazione predefinita, i dati vengono ordinati in base ai valori della proprietà contrassegnati come chiave. È possibile aggiungere una OrderBy clausola per specificare un valore di ordinamento diverso. In questo esempio viene utilizzata la proprietà predefinita StudentID per l'ordinamento. Nell'articolo Ordinamento, paging e filtro dei dati, l'utente può selezionare una colonna per l'ordinamento.
Salva Students.aspx.cs.

Eseguire l'applicazione

Eseguire l'applicazione Web (F5) e passare alla pagina Studenti , che visualizza quanto segue:

visualizzare i dati

Generazione automatica dei metodi di associazione di modelli

Quando si esegue questa serie di esercitazioni, è sufficiente copiare il codice dall'esercitazione al progetto. Tuttavia, uno svantaggio di questo approccio è che potrebbe non essere a conoscenza della funzionalità fornita da Visual Studio per generare automaticamente il codice per i metodi di associazione di modelli. Quando si lavora su progetti personalizzati, la generazione automatica del codice consente di risparmiare tempo e di acquisire un'idea di come implementare un'operazione. Questa sezione descrive la funzionalità di generazione automatica del codice. Questa sezione è solo informativa e non contiene codice che è necessario implementare nel progetto.

Quando si imposta un valore per le SelectMethodproprietà , UpdateMethod, InsertMethodo DeleteMethod nel codice di markup, è possibile selezionare l'opzione Crea nuovo metodo .

creare un metodo

Visual Studio non solo crea un metodo nel code-behind con la firma corretta, ma genera anche il codice di implementazione per eseguire l'operazione. Se si imposta la proprietà prima di usare la ItemType funzionalità di generazione automatica del codice, il codice generato usa tale tipo per le operazioni. Ad esempio, quando si imposta la UpdateMethod proprietà, viene generato automaticamente il codice seguente:

// The id parameter name should match the DataKeyNames value set on the control
public void studentsGrid_UpdateItem(int id)
{
    ContosoUniversityModelBinding.Models.Student item = null;
    // Load the item here, e.g. item = MyDataLayer.Find(id);
    if (item == null)
    {
        // The item wasn't found
        ModelState.AddModelError("", String.Format("Item with id {0} was not found", id));
        return;
    }
    TryUpdateModel(item);
    if (ModelState.IsValid)
    {
        // Save changes here, e.g. MyDataLayer.SaveChanges();

    }
}

Anche in questo caso, questo codice non deve essere aggiunto al progetto. Nell'esercitazione successiva verranno implementati metodi per l'aggiornamento, l'eliminazione e l'aggiunta di nuovi dati.

Riassunto

In questa esercitazione sono state create classi di modelli di dati e è stato generato un database da tali classi. Le tabelle di database sono state riempite con i dati di test. È stata usata l'associazione di modelli per recuperare i dati dal database e quindi visualizzare i dati in un controllo GridView.

Nell'esercitazione successiva di questa serie si abiliterà l'aggiornamento, l'eliminazione e la creazione di dati.

Avanti

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2026-02-21