Gegevens ophalen en weergeven met modelbinding en webformulieren

Deze reeks zelfstudies laat basisaspecten zien van het gebruik van modelbinding met een ASP.NET Web Forms-project. Modelbinding maakt gegevensinteractie eenvoudiger dan het omgaan met gegevensbronobjecten (zoals ObjectDataSource of SqlDataSource). Deze reeks begint met inleidend materiaal en gaat over naar meer geavanceerde concepten in latere handleidingen.

Het modelbindingspatroon werkt met elke technologie voor gegevenstoegang. In deze zelfstudie gebruikt u Entity Framework, maar u kunt de technologie voor gegevenstoegang gebruiken die u het meest kent. Vanuit een gegevensgebonden serverbesturingselement, zoals een GridView-, ListView-, DetailsView- of FormView-besturingselement, geeft u de namen op van de methoden die moeten worden gebruikt voor het selecteren, bijwerken, verwijderen en maken van gegevens. In deze zelfstudie geeft u een waarde op voor selectMethod.

Binnen deze methode geeft u de logica op voor het ophalen van de gegevens. In de volgende zelfstudie stelt u waarden in voor UpdateMethod, DeleteMethod en InsertMethod.

U kunt het volledige project downloaden in C# of Visual Basic. De downloadbare code werkt met Visual Studio 2012 en hoger. Hierbij wordt de Visual Studio 2012-sjabloon gebruikt. Dit is iets anders dan de Visual Studio 2017-sjabloon die in deze zelfstudie wordt weergegeven.

In de zelfstudie voert u de toepassing uit in Visual Studio. U kunt de toepassing ook implementeren in een hostingprovider en deze beschikbaar maken via internet. Microsoft biedt gratis webhosting voor maximaal 10 websites in een
gratis Azure-proefaccount. Zie de ASP.NET-webimplementatie met behulp van de Visual Studio-serie voor meer informatie over het implementeren van een Visual Studio-webproject in Azure App Service Web Apps. Deze zelfstudie laat ook zien hoe u Entity Framework Code First Migrations gebruikt om uw SQL Server-database te implementeren in Azure SQL Database.

Softwareversies die in de zelfstudie worden gebruikt

Microsoft Visual Studio 2017 of Microsoft Visual Studio Community 2017

Deze zelfstudie werkt ook met Visual Studio 2012 en Visual Studio 2013, maar er zijn enkele verschillen in de gebruikersinterface en projectsjabloon.

Wat u gaat bouwen

In deze handleiding leer je:

Gegevensobjecten bouwen die een universiteit weerspiegelen met studenten die zijn ingeschreven in cursussen
Databasetabellen maken op basis van de objecten
De database vullen met testgegevens
Gegevens weergeven in een webformulier

Het project maken

Maak in Visual Studio 2017 een ASP.NET Web Application-project (.NET Framework) met de naam ContosoUniversityModelBinding.
Kies OK. Het dialoogvenster voor het selecteren van een sjabloon wordt weergegeven.
Selecteer de Webformulieren-sjabloon.
Wijzig indien nodig de verificatie in afzonderlijke gebruikersaccounts.
Selecteer OK om het project te maken.

Uiterlijk van site wijzigen

Breng enkele wijzigingen aan om het uiterlijk van de site aan te passen.

Open het bestand Site.Master.
Wijzig de titel om Contoso University weer te geven en niet Mijn ASP.NET-toepassing.
```
<title><%: Page.Title %> - Contoso University</title>
```

Wijzig de koptekst van de toepassingsnaam in 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>

Wijzig de navigatieheader koppelingen om ze aan te passen aan de site.

Verwijder de koppelingen voor Info en Contactpersoon en maak in plaats daarvan een koppeling naar een pagina Leerlingen/studenten die u gaat maken.
```
<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>
```
Sla Site.Master op.

Een webformulier toevoegen om studentgegevens weer te geven

Klik in Solution Explorer met de rechtermuisknop op uw project, selecteer Toevoegen en vervolgens Nieuw item.
Selecteer in het dialoogvenster Nieuw item toevoegen het webformulier met de sjabloon Basispagina en geef het Students.aspx.
Selecteer Toevoegen.
Selecteer Site.Master voor de basispagina van het webformulier.
Kies OK.

Het gegevensmodel toevoegen

Voeg in de map Modellen een klasse toe met de naam UniversityModels.cs.

Klik met de rechtermuisknop op Modellen, selecteer Toevoegen en vervolgens Nieuw item. Het dialoogvenster Nieuw item toevoegen wordt weergegeven.
Selecteer Code in het linkernavigatiemenu en vervolgens Klasse.

Geef de klasse een naam UniversityModels.cs en selecteer Toevoegen.

In dit bestand definieert u de SchoolContextklassen , Studenten EnrollmentCourseklassen als volgt:

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

De SchoolContext klasse is afgeleid van DbContext, waarmee de databaseverbinding en wijzigingen in de gegevens worden beheerd.

In de Student klasse ziet u de kenmerken die zijn toegepast op de FirstName, LastNameen Year eigenschappen. In deze handleiding worden deze attributen gebruikt voor gegevensvalidatie. Om de code te vereenvoudigen, worden alleen deze eigenschappen gemarkeerd met kenmerken voor gegevensvalidatie. In een echt project past u validatiekenmerken toe op alle eigenschappen die validatie nodig hebben.

Sla UniversityModels.cs op.

De database instellen op basis van klassen

In deze zelfstudie wordt Code First Migrations gebruikt om objecten en databasetabellen te maken. Deze tabellen bevatten informatie over de leerlingen/studenten en hun cursussen.

Selecteer Hulpmiddelen>NuGet Package Manager>Package Manager Console.
Voer in Package Manager Console de volgende opdracht uit:
enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

Als de opdracht is voltooid, wordt er een bericht weergegeven waarin staat dat migraties zijn ingeschakeld.

U ziet dat er een bestand met de naam Configuration.cs is gemaakt. De Configuration klasse heeft een Seed methode die de databasetabellen vooraf kan vullen met testgegevens.

De database vooraf vullen

Open Configuration.cs.

Voeg de volgende code toe aan de methode Seed. Voeg ook een using instructie toe voor de ContosoUniversityModelBinding. Models naamruimte.

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

Sla Configuration.cs op.
Voer in de Package Manager Console de opdracht add-migration initial uit.
Voer de opdracht update-database uit.

Als u een uitzondering ontvangt bij het uitvoeren van deze opdracht, kunnen de StudentID waarden CourseID afwijken van de Seed methodewaarden. Open deze databasetabellen en zoek bestaande waarden voor StudentID en CourseID. Voeg deze waarden toe aan de code voor het seeden van de Enrollments tabel.

Een GridView-besturingselement toevoegen

Met gevulde databasegegevens bent u nu klaar om die gegevens op te halen en weer te geven.

Open Students.aspx.

Zoek de MainContent tijdelijke aanduiding. Voeg binnen die tijdelijke aanduiding een GridView-besturingselement toe dat deze code bevat.

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

Punten die u moet in acht nemen:

Let op de waarde die is ingesteld voor de SelectMethod eigenschap in het GridView-element. Deze waarde geeft de methode op die wordt gebruikt voor het ophalen van GridView-gegevens, die u in de volgende stap maakt.
De ItemType eigenschap is ingesteld op de Student klasse die u eerder hebt gemaakt. Met deze instelling kunt u verwijzen naar klasse-eigenschappen in de markeringen. Bijvoorbeeld, de Student klasse heeft een verzameling genaamd Enrollments. U kunt deze verzameling ophalen en vervolgens Item.Enrollments gebruiken om de geregistreerde tegoedsom van elke leerling/student op te halen.

Sla Students.aspx op.

Code toevoegen om gegevens op te halen

Voeg in het bestand Students.aspx code-behind de methode toe die is opgegeven voor de SelectMethod waarde.

Open Students.aspx.cs.
Voeg using instructies toe voor de ContosoUniversityModelBinding. Models en System.Data.Entity naamruimten.
```
using ContosoUniversityModelBinding.Models;
using System.Data.Entity;
```
Voeg de methode toe die u hebt opgegeven voor SelectMethod:
```
public IQueryable<Student> studentsGrid_GetData()
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
}
```
De Include component verbetert de queryprestaties, maar is niet vereist. Zonder de Include component worden de gegevens opgehaald met behulp van luie belasting, waarbij een afzonderlijke query naar de database wordt verzonden telkens wanneer gerelateerde gegevens worden opgehaald. Met de Include component worden gegevens opgehaald met behulp van gretig laden, wat betekent dat met één databasequery alle gerelateerde gegevens worden opgehaald. Als gerelateerde gegevens niet worden gebruikt, is eager loading minder efficiënt omdat er meer gegevens worden opgehaald. In dit geval biedt eager loading u echter de optimale prestaties omdat de gerelateerde gegevens voor elke record worden weergegeven.

Raadpleeg de sectie Lazy, Eager en Expliciet Laden van Gerelateerde Gegevens in het artikel Reading Related Data with the Entity Framework in an ASP.NET MVC Application voor meer informatie over prestatieoverwegingen bij het laden van gerelateerde gegevens.

De gegevens worden standaard gesorteerd op de waarden van de eigenschap die als sleutel zijn gemarkeerd. U kunt een OrderBy component toevoegen om een andere sorteerwaarde op te geven. In dit voorbeeld wordt de standaardeigenschap StudentID gebruikt voor sorteren. In het artikel Sorteer-, paginerings- en filtergegevens is de gebruiker ingeschakeld om een kolom te selecteren voor sorteren.
Sla Students.aspx.cs op.

Uw toepassing uitvoeren

Voer uw webtoepassing (F5) uit en navigeer naar de pagina Leerlingen/studenten , waarin het volgende wordt weergegeven:

gegevens weergeven

Automatische generatie van methoden voor modelbinding

Wanneer u aan deze reeks zelfstudies werkt, kunt u de code van de zelfstudie naar uw project kopiëren. Een nadeel van deze benadering is echter dat u zich mogelijk niet bewust wordt van de functie van Visual Studio om automatisch code te genereren voor modelbindingsmethoden. Wanneer u aan uw eigen projecten werkt, kunt u met automatische codegeneratie tijd besparen en krijgt u inzicht in het implementeren van een bewerking. In deze sectie wordt de functie voor het automatisch genereren van code beschreven. Deze sectie is alleen informatief en bevat geen code die u in uw project moet implementeren.

Wanneer u een waarde instelt voor de SelectMethod, UpdateMethodof InsertMethodDeleteMethod eigenschappen in de markeringscode, kunt u de optie Nieuwe methode maken selecteren.

een methode maken

Visual Studio maakt niet alleen een methode in de code-achter met de juiste handtekening, maar genereert ook implementatiecode om de bewerking uit te voeren. Als u de ItemType eigenschap eerst instelt voordat u de functie voor het automatisch genereren van code gebruikt, gebruikt de gegenereerde code dat type voor de bewerkingen. Wanneer u bijvoorbeeld de UpdateMethod eigenschap instelt, wordt de volgende code automatisch gegenereerd:

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

    }
}

Deze code hoeft nogmaals niet aan uw project te worden toegevoegd. In de volgende zelfstudie implementeert u methoden voor het bijwerken, verwijderen en toevoegen van nieuwe gegevens.

Samenvatting

In deze zelfstudie hebt u gegevensmodelklassen gemaakt en een database gegenereerd op basis van deze klassen. U hebt de databasetabellen gevuld met testgegevens. U hebt modelbinding gebruikt om gegevens op te halen uit de database en vervolgens de gegevens in een GridView weer te geven.

In de volgende zelfstudie in deze reeks schakelt u het bijwerken, verwijderen en maken van gegevens in.

Feedback

Is deze pagina nuttig?

Last updated on 2026-02-21