Abrufen und Anzeigen von Daten mit Modellbindung und Webformularen

In dieser Lernprogrammreihe werden grundlegende Aspekte der Verwendung der Modellbindung mit einem ASP.NET Web Forms-Projekt veranschaulicht. Die Modellbindung macht die Dateninteraktion einfacher als das Behandeln von Datenquellenobjekten (z. B. ObjectDataSource oder SqlDataSource). Diese Reihe beginnt mit Einführungsmaterial und wechselt zu komplexeren Konzepten in späteren Lernprogrammen.

Das Modellbindungsmuster funktioniert mit jeder Datenzugriffstechnologie. In diesem Lernprogramm verwenden Sie Entity Framework, aber Sie können die Datenzugriffstechnologie verwenden, die Ihnen am vertrautsten ist. Aus einem datengebundenen Serversteuerelement, z. B. einem GridView-, ListView-, DetailsView- oder FormView-Steuerelement, geben Sie die Namen der Methoden an, die zum Auswählen, Aktualisieren, Löschen und Erstellen von Daten verwendet werden sollen. In diesem Lernprogramm geben Sie einen Wert für selectMethod an.

Innerhalb dieser Methode stellen Sie die Logik zum Abrufen der Daten bereit. Im nächsten Tutorial legen Sie Werte für die Methoden UpdateMethod, DeleteMethod und InsertMethod fest.

Sie können das vollständige Projekt in C# oder Visual Basic herunterladen . Der herunterladbare Code funktioniert mit Visual Studio 2012 und höher. Sie verwendet die Visual Studio 2012-Vorlage, die sich geringfügig von der visual Studio 2017-Vorlage unterscheidet, die in diesem Lernprogramm gezeigt wird.

Im Lernprogramm führen Sie die Anwendung in Visual Studio aus. Sie können die Anwendung auch auf einem Hostinganbieter bereitstellen und über das Internet verfügbar machen. Microsoft bietet kostenloses Webhosting für bis zu 10 Websites in einer
kostenloses Azure-Testkonto. Informationen zum Bereitstellen eines Visual Studio-Webprojekts für Azure App Service Web Apps finden Sie in der Reihe ASP.NET Webbereitstellung mit Visual Studio . Dieses Lernprogramm zeigt auch, wie Sie Entity Framework Code First-Migrationen verwenden, um Ihre SQL Server Datenbank in die Azure SQL-Datenbank zu deployen.

Im Lernprogramm verwendete Softwareversionen

Microsoft Visual Studio 2017 oder Microsoft Visual Studio Community 2017

Dieses Lernprogramm funktioniert auch mit Visual Studio 2012 und Visual Studio 2013, aber es gibt einige Unterschiede in der Benutzeroberfläche und der Projektvorlage.

Was Sie erstellen werden

In diesem Tutorial gehen Sie wie folgt vor:

Erstellen von Datenobjekten, die eine Universität mit in Kursen registrierten Kursteilnehmern widerspiegeln
Erstellen von Datenbanktabellen aus den Objekten
Auffüllen der Datenbank mit Testdaten
Anzeigen von Daten in einem Webformular

Erstelle das Projekt

Erstellen Sie in Visual Studio 2017 ein ASP.NET Webanwendungsprojekt (.NET Framework) namens ContosoUniversityModelBinding.
Wählen Sie OK aus. Das Dialogfeld zum Auswählen einer Vorlage wird angezeigt.
Wählen Sie die Webformularvorlage aus.
Ändern Sie bei Bedarf die Authentifizierung in einzelne Benutzerkonten.
Wählen Sie "OK" aus, um das Projekt zu erstellen.

Ändern der Websitedarstellung

Nehmen Sie einige Änderungen vor, um die Websitedarstellung anzupassen.

Öffnen Sie die Datei "Site.Master".
Ändern Sie den Titel so, dass "Contoso University " und nicht "Meine ASP.NET Anwendung" angezeigt wird.
```
<title><%: Page.Title %> - Contoso University</title>
```

Ändern Sie den Kopfzeilentext von "Anwendungsname " 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>

Ändern Sie die Navigationsheaderlinks zu den entsprechenden Websitelinks.

Entfernen Sie die Links für Info und Kontakt, und verlinken Sie stattdessen auf eine Seite für Kursteilnehmer, die Sie erstellen werden.
```
<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>
```
Speichern Sie "Site.Master".

Hinzufügen eines Webformulars zum Anzeigen von Schülerdaten

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Ihr Projekt, wählen Sie "Hinzufügen" und dann " Neues Element" aus.
Wählen Sie im Dialogfeld " Neues Element hinzufügen " das Webformular mit der Gestaltungsvorlage aus, und nennen Sie es Students.aspx.
Wählen Sie Hinzufügen aus.
Wählen Sie für die Masterseite des Webformulars "Site.Master" aus.
Wählen Sie OK aus.

Hinzufügen des Datenmodells

Fügen Sie im Ordner "Modelle " eine Klasse mit dem Namen UniversityModels.cs hinzu.

Klicken Sie mit der rechten Maustaste auf "Modelle", wählen Sie "Hinzufügen" und dann " Neues Element" aus. Das Dialogfeld " Neues Element hinzufügen " wird angezeigt.
Wählen Sie im linken Navigationsmenü " Code" und dann "Klasse" aus.

Benennen Sie die Klasse UniversityModels.cs, und wählen Sie "Hinzufügen" aus.

Definieren Sie in dieser Datei die Klassen SchoolContext, Student, Enrollment und Course wie folgt:

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

Die Klasse SchoolContext leitet sich von DbContext ab, die die Datenbankverbindung und Änderungen in den Daten verwaltet.

Beachten Sie in der Student-Klasse die Attribute, die auf die FirstName, LastName und Year-Eigenschaften angewendet werden. In diesem Lernprogramm werden diese Attribute für die Datenüberprüfung verwendet. Um den Code zu vereinfachen, werden nur diese Eigenschaften mit Datenüberprüfungsattributen gekennzeichnet. In einem echten Projekt würden Sie Validierungsattribute auf alle Eigenschaften anwenden, die eine Überprüfung benötigen.

Speichern Sie UniversityModels.cs.

Einrichten der Datenbank basierend auf Klassen

In diesem Lernprogramm werden Code First-Migrationen zum Erstellen von Objekten und Datenbanktabellen verwendet. Diese Tabellen speichern Informationen zu den Kursteilnehmern und deren Kursen.

Klicken Sie auf Extras>NuGet-Paket-Manager>Paket-Manager-Konsole.
Führen Sie in der Paket-Manager-Konsole den folgenden Befehl aus:
enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

Wenn der Befehl erfolgreich abgeschlossen wurde, wird eine Meldung angezeigt, die besagt, dass Migrationen aktiviert wurden.

Beachten Sie, dass eine Datei mit dem Namen Configuration.cs erstellt wurde. Die Configuration Klasse verfügt über eine Seed Methode, die die Datenbanktabellen mit Testdaten vorab auffüllen kann.

Vorbefüllen der Datenbank

Öffnen Sie Configuration.cs.

Fügen Sie der Seed -Methode den folgenden Code hinzu. Fügen Sie außerdem eine using Anweisung für den ContosoUniversityModelBinding. Models Namespace hinzu.

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

Speichern Sie Configuration.cs.
Führen Sie in der Paket-Manager-Konsole den Befehl add-migration initial aus.
Führen Sie den Befehl update-database aus.

Wenn beim Ausführen dieses Befehls eine Ausnahme auftritt, könnten sich die Werte von StudentID und CourseID möglicherweise von den Methodenwerten von Seed unterscheiden. Öffnen Sie diese Datenbanktabellen, und suchen Sie vorhandene Werte für StudentID und CourseID. Fügen Sie diese Werte dem Code zum Seeding der Enrollments Tabelle hinzu.

Hinzufügen eines GridView-Steuerelements

Mit aufgefüllten Datenbankdaten können Sie diese Daten jetzt abrufen und anzeigen.

Öffnen Sie Students.aspx.

Suchen Sie den MainContent Platzhalter. Fügen Sie innerhalb dieses Platzhalters ein GridView-Steuerelement hinzu, das diesen Code enthält.

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

Zu berücksichtigende Punkte:

Beachten Sie den Wert, der für die SelectMethod Eigenschaft im GridView-Element festgelegt ist. Dieser Wert gibt die Methode an, die zum Abrufen von GridView-Daten verwendet wird, die Sie im nächsten Schritt erstellen.
Die ItemType Eigenschaft wird auf die Student zuvor erstellte Klasse festgelegt. Mit dieser Einstellung können Sie im Markup auf Klasseneigenschaften verweisen. Die Klasse Student hat z. B. eine Auflistung mit dem Namen Enrollments. Sie können diese Sammlung abrufen und dann Item.Enrollments verwenden, um die registrierten Guthabensummen jedes Kursteilnehmers abzurufen.

Speichern Sie Students.aspx.

Hinzufügen von Code zum Abrufen von Daten

Fügen Sie in der Students.aspx CodeBehind-Datei die für den SelectMethod Wert angegebene Methode hinzu.

Öffnen Sie Students.aspx.cs.
Fügen Sie Anweisungen für die using- und ContosoUniversityModelBinding. Models-Namespaces hinzuSystem.Data.Entity.
```
using ContosoUniversityModelBinding.Models;
using System.Data.Entity;
```
Fügen Sie die Methode hinzu, die Sie für SelectMethod angegeben haben:
```
public IQueryable<Student> studentsGrid_GetData()
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
}
```
Die Include Klausel verbessert die Abfrageleistung, ist aber nicht erforderlich. Ohne die Include Klausel werden die Daten mithilfe des faulen Ladens abgerufen, wobei bei jedem Abrufen verwandter Daten eine separate Abfrage an die Datenbank gesendet wird. Mit der Include Klausel werden Daten durch Eager Loading abgerufen, was bedeutet, dass eine einzelne Datenbankabfrage alle zugehörigen Daten abruft. Wenn verwandte Daten nicht verwendet werden, ist das Vorladen weniger effizient, da mehr Daten abgerufen werden. In diesem Fall bietet Ihnen jedoch die Strategie des "Eager Loadings" die beste Leistung, da die zugehörigen Daten für jeden Datensatz vorab geladen werden.

Weitere Informationen zu Leistungsaspekten beim Laden verwandter Daten finden Sie im Abschnitt „Lazy“, „Eager“ und „Explicit Loading of Related Data“ des Artikels „Lesen verwandter Daten mit dem Entity Framework in einer ASP.NET MVC-Anwendung“.

Standardmäßig werden die Daten nach den Werten der Eigenschaft sortiert, die als Schlüssel markiert sind. Sie können eine OrderBy Klausel hinzufügen, um einen anderen Sortierwert anzugeben. In diesem Beispiel wird die Standardeigenschaft StudentID zum Sortieren verwendet. Im Artikel "Sortieren", "Paging" und "Daten filtern " kann der Benutzer eine Spalte für die Sortierung auswählen.
Speichern Sie Students.aspx.cs.

Ausführen der Anwendung

Führen Sie Ihre Webanwendung (F5) aus, und navigieren Sie zur Seite " Kursteilnehmer ", auf der Folgendes angezeigt wird:

Daten anzeigen

Automatische Generierung von Modellbindungsmethoden

Wenn Sie diese Lernprogrammreihe durcharbeiten, können Sie einfach den Code aus dem Lernprogramm in Ihr Projekt kopieren. Ein Nachteil dieses Ansatzes besteht jedoch darin, dass Sie das von Visual Studio bereitgestellte Feature möglicherweise nicht kennen, um Code für Modellbindungsmethoden automatisch zu generieren. Wenn Sie an Ihren eigenen Projekten arbeiten, können Sie die automatische Codegenerierung Zeit sparen und Ihnen helfen, ein Gefühl für die Implementierung eines Vorgangs zu erhalten. In diesem Abschnitt wird das Feature für die automatische Codegenerierung beschrieben. Dieser Abschnitt ist nur informational und enthält keinen Code, den Sie in Ihrem Projekt implementieren müssen.

Beim Festlegen eines Werts für die SelectMethod, UpdateMethod, InsertMethod, oder DeleteMethod Eigenschaften im Markupcode können Sie die Option "Neue Methode erstellen " auswählen.

Erstellen einer Methode

Visual Studio erstellt nicht nur eine Methode im CodeBehind mit der richtigen Signatur, sondern generiert auch Implementierungscode zum Ausführen des Vorgangs. Wenn Sie die ItemType Eigenschaft zuerst vor der Verwendung des Features für die automatische Codegenerierung festlegen, verwendet der generierte Code diesen Typ für die Vorgänge. Wenn Sie beispielsweise die UpdateMethod Eigenschaft festlegen, wird der folgende Code automatisch generiert:

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

    }
}

Auch hier muss dieser Code nicht zu Ihrem Projekt hinzugefügt werden. Im nächsten Lernprogramm implementieren Sie Methoden zum Aktualisieren, Löschen und Hinzufügen neuer Daten.

Zusammenfassung

In diesem Lernprogramm haben Sie Datenmodellklassen erstellt und eine Datenbank aus diesen Klassen generiert. Sie haben die Datenbanktabellen mit Testdaten ausgefüllt. Sie haben die Modellbindung zum Abrufen von Daten aus der Datenbank verwendet und dann die Daten in einer GridView angezeigt.

Im nächsten Lernprogramm dieser Reihe aktivieren Sie das Aktualisieren, Löschen und Erstellen von Daten.

Feedback

War diese Seite hilfreich?

Last updated on 2026-02-21