Il recupero e visualizzazione dei dati con l'associazione di modelli e web formRetrieving and displaying data with model binding and web forms

Questa serie di esercitazioni illustra aspetti di base dell'uso di associazione di modelli con un progetto di Web Form ASP.NET.This tutorial series demonstrates basic aspects of using model binding with an ASP.NET Web Forms project. Associazione di modelli consente l'interazione dei dati più semplice rispetto a gestione dati di oggetti di origine (ad esempio ObjectDataSource o SqlDataSource).Model binding makes data interaction more straight-forward than dealing with data source objects (such as ObjectDataSource or SqlDataSource). Questa serie inizia con materiale introduttivo e sposta i concetti più avanzati nelle esercitazioni successive.This series starts with introductory material and moves to more advanced concepts in later tutorials.

Il modello di associazione del modello funziona con qualsiasi tecnologia di accesso ai dati.The model binding pattern works with any data access technology. In questa esercitazione si userà Entity Framework, ma è possibile usare la tecnologia di accesso ai dati che è più nota all'utente.In this tutorial, you will use Entity Framework, but you could use the data access technology that is most familiar to you. Da un controllo server associato a dati, ad esempio un controllo GridView, ListView, DetailsView e FormView, si specificano i nomi dei metodi da usare per la selezione, l'aggiornamento, eliminazione e creazione di dati.From a data-bound server control, such as a GridView, ListView, DetailsView, or FormView control, you specify the names of the methods to use for selecting, updating, deleting, and creating data. In questa esercitazione, si specificherà un valore per la proprietà SelectMethod.In this tutorial, you will specify a value for the SelectMethod.

All'interno di tale metodo, per fornire la logica per recuperare i dati.Within that method, you provide the logic for retrieving the data. Nella prossima esercitazione, si imposteranno i valori per UpdateMethod e InsertMethod e DeleteMethod.In the next tutorial, you will set values for UpdateMethod, DeleteMethod and InsertMethod.

È possibile scaricare il progetto completo in C# o Visual Basic.You can download the complete project in C# or Visual Basic. Il codice scaricabile funziona con Visual Studio 2012 e versioni successive.The downloadable code works with Visual Studio 2012 and later. Usa il modello di Visual Studio 2012, che è leggermente diverso rispetto al modello di Visual Studio 2017 illustrato in questa esercitazione.It uses the Visual Studio 2012 template, which is slightly different than the Visual Studio 2017 template shown in this tutorial.

In questa esercitazione si esegue l'applicazione in Visual Studio.In the tutorial you run the application in Visual Studio. È anche possibile distribuire l'applicazione in un provider di hosting e renderlo disponibile tramite internet.You can also deploy the application to a hosting provider and make it available over the internet. Microsoft offre l'hosting web gratuito per fino a 10 siti web in unMicrosoft offers free web hosting for up to 10 web sites in a
account Azure gratuito.free Azure trial account. Per informazioni su come distribuire un progetto web Visual Studio per App Web di servizio App di Azure, vedere la distribuzione Web ASP.NET tramite Visual Studio serie.For information about how to deploy a Visual Studio web project to Azure App Service Web Apps, see the ASP.NET Web Deployment using Visual Studio series. Tale esercitazione illustra anche come usare le migrazioni di Entity Framework Code First per distribuire il database di SQL Server in Database SQL di Azure.That tutorial also shows how to use Entity Framework Code First Migrations to deploy your SQL Server database to Azure SQL Database.

Versioni del software utilizzate nell'esercitazioneSoftware versions used in the tutorial

  • Microsoft Visual Studio 2017 or Microsoft Visual Studio Community 2017Microsoft Visual Studio 2017 or Microsoft Visual Studio Community 2017

Questa esercitazione funziona anche con Visual Studio 2012 e Visual Studio 2013, ma esistono alcune differenze nel modello di progetto e dell'interfaccia utente.This tutorial also works with Visual Studio 2012 and Visual Studio 2013, but there are some differences in the user interface and project template.

Scopo dell'esercitazioneWhat you'll build

In questa esercitazione, sarà:In this tutorial, you'll:

  • Creare oggetti dati che riflettono un'università con studenti iscritti a corsiBuild data objects that reflect a university with students enrolled in courses
  • Creare tabelle di database dagli oggettiBuild database tables from the objects
  • Popolare il database con dati di testPopulate the database with test data
  • Visualizzare i dati in un web formDisplay data in a web form

Creare il progettoCreate the project

  1. In Visual Studio 2017, creare un applicazione Web ASP.NET (.NET Framework) progetto chiamato ContosoUniversityModelBinding.In Visual Studio 2017, create a ASP.NET Web Application (.NET Framework) project called ContosoUniversityModelBinding.

    Crea progetto

  2. Scegliere OK.Select OK. Viene visualizzata la finestra di dialogo per selezionare un modello.The dialog box to select a template appears.

    Selezionare web form

  3. Selezionare il Web Form modello.Select the Web Forms template.

  4. Se necessario, modificare l'autenticazione singoli account utente di.If necessary, change the authentication to Individual User Accounts.

  5. Selezionare OK per creare il progetto.Select OK to create the project.

Modificare l'aspetto del sitoModify site appearance

Apportare alcune modifiche per personalizzare l'aspetto del sito.Make a few changes to customize site appearance.

  1. Aprire il file Site. master.Open the Site.Master file.

  2. Modificare il titolo da visualizzare Contoso University e non My ASP.NET Application.Change the title to display Contoso University and not My ASP.NET Application.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. Modificare il testo dell'intestazione dal nome dell'applicazione al Contoso University.Change the header text from Application name to 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>
    
  4. Modificare i collegamenti di intestazione di navigazione per le colonne appropriate del sito.Change the navigation header links to site appropriate ones.

    Rimuovere i collegamenti per sulle e Contact e, invece, crea un collegamento a una studenti pagina, che verrà creato.Remove the links for About and Contact and, instead, link to a Students page, which you will create.

    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/Students">Students</a></li>
    </ul>
    
  5. Salvare Site. master.Save Site.Master.

Aggiungere un web form per visualizzare i dati degli studentiAdd a web form to display student data

  1. Nelle Esplora soluzioni, fare clic sul progetto, selezionare Add e quindi nuovo elemento.In Solution Explorer, right-click your project, select Add and then New Item.

  2. Nel Aggiungi nuovo elemento finestra di dialogo, seleziona la Web Form con pagina Master modello e denominarlo Students.aspx.In the Add New Item dialog box, select the Web Form with Master Page template and name it Students.aspx.

    pagina Crea

  3. Selezionare Aggiungi.Select Add.

  4. Per la pagina master del web form, selezionare Site. master.For the web form's master page, select Site.Master.

  5. Scegliere OK.Select OK.

Aggiungere il modello di datiAdd the data model

Nel modelli cartella, aggiungere una classe denominata UniversityModels.cs.In the Models folder, add a class named UniversityModels.cs.

  1. Fare doppio clic su modelli, selezionare Adde quindi nuovo elemento.Right-click Models, select Add, and then New Item. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.The Add New Item dialog box appears.

  2. Nel menu di spostamento a sinistra, selezionare codice, quindi classe.From the left navigation menu, select Code, then Class.

    creare una classe di modello

  3. Denominare la classe UniversityModels.cs e selezionare Add.Name the class UniversityModels.cs and select Add.

    In questo file, definire le SchoolContext, Student, Enrollment, e Course classi come indicato di seguito:In this file, define the SchoolContext, Student, Enrollment, and Course classes as follows:

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

    Il SchoolContext deriva dalla classe DbContext, che gestisce la connessione al database e modifica dei dati.The SchoolContext class derives from DbContext, which manages the database connection and changes in the data.

    Nel Student classe, si noti che gli attributi applicati al FirstName, LastName, e Year proprietà.In the Student class, notice the attributes applied to the FirstName, LastName, and Year properties. Questa esercitazione Usa questi attributi per la convalida dei dati.This tutorial uses these attributes for data validation. Per semplificare il codice, queste proprietà sono contrassegnate con attributi di convalida dei dati.To simplify the code, only these properties are marked with data-validation attributes. In un progetto reale, gli attributi di convalida viene applicato a tutte le proprietà che necessitano di convalida.In a real project, you would apply validation attributes to all properties needing validation.

  4. Save UniversityModels.cs.Save UniversityModels.cs.

Configurare il database basato su classiSet up the database based on classes

Questa esercitazione viene usato migrazioni Code First per creare oggetti e tabelle di database.This tutorial uses Code First Migrations to create objects and database tables. Queste tabelle archiviano informazioni agli studenti e i rispettivi corsi.These tables store information about the students and their courses.

  1. Selezionare strumenti di > Gestione pacchetti NuGet > la Console di Gestione pacchetti.Select Tools > NuGet Package Manager > Package Manager Console.

  2. Nelle Console di gestione pacchetti, eseguire questo comando:In Package Manager Console, run this command:
    enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

    Se il comando viene completato correttamente, viene visualizzato un messaggio che indica che le migrazioni sono state abilitate.If the command completes successfully, a message stating migrations have been enabled appears.

    abilitare migrazioni

    Si noti che un file denominato Configuration.cs è stato creato.Notice that a file named Configuration.cs has been created. Il Configuration classe ha un Seed metodo, che è possibile popolare anticipatamente tabelle del database con dati di test.The Configuration class has a Seed method, which can pre-populate the database tables with test data.

Pre-popolare il databasePre-populate the database

  1. Aprire Configuration.cs.Open Configuration.cs.

  2. Aggiungere al metodo Seed il seguente codice.Add the following code to the Seed method. Aggiungere anche un using istruzione per il ContosoUniversityModelBinding. Models dello spazio dei nomi.Also, add a using statement for the ContosoUniversityModelBinding. Models namespace.

    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();
            }
        }
    }
    
  3. Salvare Configuration.cs.Save Configuration.cs.

  4. Nella Console di gestione pacchetti eseguire il comando aggiungere la migrazione iniziale.In the Package Manager Console, run the command add-migration initial.

  5. Eseguire il comando update-database.Run the command update-database.

    Se si riceve un'eccezione quando si esegue questo comando, il StudentID e CourseID valori potrebbero essere diversi dal Seed i valori del metodo.If you receive an exception when running this command, the StudentID and CourseID values might be different from the Seed method values. Aprire le tabelle di database e i valori esistenti per trovare StudentID e CourseID.Open those database tables and find existing values for StudentID and CourseID. Aggiungere tali valori per il codice per il seeding di Enrollments tabella.Add those values to the code for seeding the Enrollments table.

Aggiungere un controllo GridViewAdd a GridView control

Con dati popolati del database, ora possibile recuperare tali dati e visualizzarli.With populated database data, you're now ready to retrieve that data and display it.

  1. Aprire Students.aspx.Open Students.aspx.

  2. Individuare il MainContent segnaposto.Locate the MainContent placeholder. All'interno di tale segnaposto, aggiungere un GridView controllo che include il codice.Within that placeholder, add a GridView control that includes this code.

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

    Note importanti:Things to note:

    • Si noti che il valore impostato per il SelectMethod proprietà nell'elemento GridView.Notice the value set for the SelectMethod property in the GridView element. Questo valore specifica il metodo utilizzato per recuperare i dati di GridView, che creato nel passaggio successivo.This value specifies the method used to retrieve GridView data, which you create in the next step.

    • Il ItemType è impostata sul Student classe creata in precedenza.The ItemType property is set to the Student class created earlier. Questa impostazione consente di fare riferimento alle proprietà di classe nel markup.This setting allows you to reference class properties in the markup. Ad esempio, il Student classe dispone di una raccolta denominata Enrollments.For example, the Student class has a collection named Enrollments. È possibile usare Item.Enrollments per recuperare tale insieme e quindi usare sintassi LINQ per recuperare ogni studente del registrati somma i crediti.You can use Item.Enrollments to retrieve that collection and then use LINQ syntax to retrieve each student's enrolled credits sum.

  3. Salvare Students.aspx.Save Students.aspx.

Aggiungere il codice per recuperare i datiAdd code to retrieve data

Nel file code-behind Students.aspx, aggiungere il metodo specificato per il SelectMethod valore.In the Students.aspx code-behind file, add the method specified for the SelectMethod value.

  1. Aprire Students.aspx.cs.Open Students.aspx.cs.

  2. Aggiungere using istruzioni per il ContosoUniversityModelBinding. Models e System.Data.Entity gli spazi dei nomi.Add using statements for the ContosoUniversityModelBinding. Models and System.Data.Entity namespaces.

    using ContosoUniversityModelBinding.Models;
    using System.Data.Entity;
    
  3. Aggiungere il metodo specificato per SelectMethod:Add the method you specified for SelectMethod:

    public IQueryable<Student> studentsGrid_GetData()
    {
        SchoolContext db = new SchoolContext();
        var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
        return query;
    }
    

    Il Include clausola consente di migliorare le prestazioni delle query ma non è obbligatorio.The Include clause improves query performance but isn't required. Senza il Include clausola, i dati verrà recuperato utilizzando caricamento lazy, che prevede l'invio di una query separata per il database ogni volta che correlati vengono recuperati i dati.Without the Include clause, the data is retrieved using lazy loading, which involves sending a separate query to the database each time related data is retrieved. Con il Include clausola, i dati verrà recuperato utilizzando caricamento eager, ovvero un'unica query al database recupera tutti i dati correlati.With the Include clause, data is retrieved using eager loading, which means a single database query retrieves all related data. Se i dati correlati non viene usati, il caricamento eager è meno efficiente perché vengono recuperati più dati.If related data isn't used, eager loading is less efficient because more data is retrieved. Tuttavia, in questo caso, il caricamento eager offre prestazioni ottimali perché i dati correlati vengono visualizzati per ogni record.However, in this case, eager loading gives you the best performance because the related data is displayed for each record.

    Per altre informazioni sulle considerazioni sulle prestazioni quando si caricano i dati correlati, vedere la esplicito il caricamento di dati correlati Lazy ed Eager sezione il la lettura di dati correlati con Entity Framework in ASP.NET Applicazione MVC articolo.For more information about performance considerations when loading related data, see the Lazy, Eager, and Explicit Loading of Related Data section in the Reading Related Data with the Entity Framework in an ASP.NET MVC Application article.

    Per impostazione predefinita, i dati vengono ordinati i valori della proprietà contrassegnata come chiave.By default, the data is sorted by the values of the property marked as the key. È possibile aggiungere un OrderBy clausola per specificare un valore di ordinamento diversi.You can add an OrderBy clause to specify a different sort value. In questo esempio, il valore predefinito StudentID proprietà viene utilizzata per l'ordinamento.In this example, the default StudentID property is used for sorting. Nel ordinamento, Paging e filtro dei dati articolo, l'utente è abilitato per selezionare una colonna per l'ordinamento.In the Sorting, Paging, and Filtering Data article, the user is enabled to select a column for sorting.

  4. Salvare Students.aspx.cs.Save Students.aspx.cs.

Eseguire l'applicazioneRun your application

Eseguire l'applicazione web (F5) e passare alle studenti pagina, che verrà visualizzato quanto segue:Run your web application (F5) and navigate to the Students page, which displays the following:

visualizzare i dati

Generazione automatica di metodi di associazione di modelliAutomatic generation of model binding methods

Quando questa serie di esercitazioni, è possibile copiare semplicemente il codice dell'esercitazione al progetto.When working through this tutorial series, you can simply copy the code from the tutorial to your project. Tuttavia, uno svantaggio di questo approccio è che si potrebbe non viene a conoscenza della funzionalità fornite da Visual Studio per generare automaticamente codice per metodi di associazione di modelli.However, one disadvantage of this approach is that you may not become aware of the feature provided by Visual Studio to automatically generate code for model binding methods. Quando si lavora su progetti, generazione automatica di codice può risparmiare tempo e la Guida è possibile ottenere un'idea di come implementare un'operazione.When working on your own projects, automatic code generation can save you time and help you gain a sense of how to implement an operation. In questa sezione viene descritta la funzionalità di generazione automatica di codice.This section describes the automatic code generation feature. Questa sezione è solo informativo e non contiene alcun codice che è necessario implementare nel progetto.This section is only informational and does not contain any code you need to implement in your project.

Quando si imposta un valore per il SelectMethod, UpdateMethod, InsertMethod, o DeleteMethod le proprietà nel codice di markup, è possibile selezionare il creare nuovo metodo opzione.When setting a value for the SelectMethod, UpdateMethod, InsertMethod, or DeleteMethod properties in the markup code, you can select the Create New Method option.

creare un metodo

Visual Studio non solo crea un metodo nel code-behind con la firma appropriata, ma genera anche codice di implementazione per eseguire l'operazione.Visual Studio not only creates a method in the code-behind with the proper signature, but also generates implementation code to perform the operation. Se si imposta innanzitutto il ItemType proprietà prima di usare la generazione automatica di codice delle funzionalità, il codice generato viene utilizzato dai tipi per le operazioni.If you first set the ItemType property before using the automatic code generation feature, the generated code uses that type for the operations. Ad esempio, quando si impostano le UpdateMethod proprietà, il codice seguente viene generato automaticamente:For example, when setting the UpdateMethod property, the following code is automatically generated:

// 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.Again, this code doesn't need to be added to your project. Nella prossima esercitazione, verrà implementato metodi per l'aggiornamento, eliminazione e aggiunta di nuovi dati.In the next tutorial, you'll implement methods for updating, deleting, and adding new data.

RiepilogoSummary

In questa esercitazione si create classi di modello di dati e generata un database da tali classi.In this tutorial, you created data model classes and generated a database from those classes. Le tabelle del database è stato compilato con i dati di test.You filled the database tables with test data. È utilizzata l'associazione di modelli per recuperare dati dal database e quindi visualizzati i dati in un controllo GridView.You used model binding to retrieve data from the database, and then displayed the data in a GridView.

Entro i prossimi esercitazione in questa serie, verrà abilitata l'aggiornamento, eliminazione e creazione di dati.In the next tutorial in this series, you'll enable updating, deleting, and creating data.