Abrufen und Anzeigen von Daten mit Modell Bindung und Web Forms

In dieser tutorialreihe werden grundlegende Aspekte der Verwendung der Modell Bindung mit einem ASP.net Web Forms-Projekt veranschaulicht. Die Modell Bindung sorgt für eine genauere Daten Interaktion als bei der Verarbeitung von Datenquellen Objekten (z. b. ObjectDataSource oder SqlDataSource). Diese Serie beginnt mit Einführungs Material und wechselt in spätere Tutorials zu erweiterten Konzepten.

Das Modell bindungsmuster funktioniert mit jeder Datenzugriffs Technologie. In diesem Tutorial verwenden Sie Entity Framework, aber Sie können die Datenzugriffs Technologie verwenden, die Ihnen am meisten vertraut ist. Über ein Daten gebundenes Server Steuerelement, z. b. ein 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 Tutorial geben Sie einen Wert für die SelectMethod-Methode an.

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

Sie können das gesamte Projekt in c# oder Visual Basic herunterladen . Der herunterladbare Code funktioniert mit Visual Studio 2012 und höher. Dabei wird die Vorlage Visual Studio 2012 verwendet, die sich geringfügig von der in diesem Tutorial gezeigten Vorlage in Visual Studio 2017 unterscheidet.

In diesem Tutorial führen Sie die Anwendung in Visual Studio aus. Sie können die Anwendung auch für einen 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 die Azure App Service von Web-Apps finden Sie unter ASP.net Web Deployment using Visual Studio Series. In diesem Tutorial erfahren Sie außerdem, wie Sie Entity Framework Code First-Migrationen zum Bereitstellen Ihrer SQL Server-Datenbank in Azure SQL-Datenbank verwenden.

Im Tutorial verwendete Software Versionen

  • Microsoft Visual Studio 2017 oder Microsoft Visual Studio Community 2017

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

Was Sie erstellen

In diesem Tutorial gehen Sie wie folgt vor:

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

Erstellen des Projekts

  1. Erstellen Sie in Visual Studio 2017 ein Projekt mit dem Namen " contosouniversitymodelbinding" der ASP.NET-Webanwendung (.NET Framework) .

    Erstellen des Projekts

  2. Klicken Sie auf OK. Das Dialogfeld zum Auswählen einer Vorlage wird angezeigt.

    Auswählen von Web Forms

  3. Wählen Sie die Web Forms Vorlage aus.

  4. Ändern Sie ggf. die Authentifizierung in einzelne Benutzerkonten.

  5. Klicken Sie auf OK, um das Projekt zu erstellen.

Website Darstellung ändern

Nehmen Sie einige Änderungen vor, um das Erscheinungsbild der Website anzupassen.

  1. Öffnen Sie die Datei Site. Master.

  2. Ändern Sie den Titel, um die "The University " und nicht die ASP.NET-Anwendunganzuzeigen.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. Ändern Sie den Header Text vom Anwendungsnamen in die Datei"Configuration Manager".

    <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. Ändern Sie die Navigations Header Links zu den entsprechenden Websites.

    Entfernen Sie die Links für " about " und " Contact ", und verknüpfen Sie die Seite mit der Seite " Studenten ", die Sie erstellen möchten.

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

Hinzufügen eines Webformulars zum Anzeigen von Studenten Daten

  1. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen und dann Neues Elementaus.

  2. Wählen Sie im Dialogfeld Neues Element hinzufügen das Webformular mit der Vorlage Master Seite aus, und nennen Sie es students. aspx.

    Seite erstellen

  3. Wählen Sie Hinzufügen aus.

  4. Wählen Sie für die Master Seite des Webformulars die Option Site. Masteraus.

  5. Klicken Sie auf OK.

Datenmodell hinzufügen

Fügen Sie im Ordner Models eine Klasse mit dem Namen UniversityModels.cshinzu.

  1. Klicken Sie mit der rechten Maustaste auf Modelle, und wählen Sie Hinzufügenund Neues Elementaus. Das Dialogfeld Neues Element hinzufügen wird angezeigt.

  2. Klicken Sie im linken Navigationsmenü auf Codeund dann auf Klasse.

    Modell Klasse erstellen

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

    Definieren Sie in dieser Datei die SchoolContext Student Klassen,, 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 SchoolContext -Klasse wird von abgeleitet DbContext , die die Datenbankverbindung und Änderungen an den Daten verwaltet.

    StudentBeachten Sie in der-Klasse die Attribute, die auf die FirstName Eigenschaften, und angewendet werden LastName Year . In diesem Tutorial werden diese Attribute für die Datenüberprüfung verwendet. Um den Code zu vereinfachen, werden nur diese Eigenschaften mit Daten Validierungs Attributen gekennzeichnet. In einem echten Projekt würden Sie Validierungs Attribute auf alle Eigenschaften anwenden, die überprüft werden müssen.

  4. Speichern Sie UniversityModels.cs.

Einrichten der Datenbank auf der Grundlage von Klassen

In diesem Tutorial werden Code First-Migrationen zum Erstellen von Objekten und Datenbanktabellen verwendet. In diesen Tabellen werden Informationen zu den Studenten und deren Kursen gespeichert.

  1. Klicken Sie auf Extras > NuGet-Paket-Manager > Paket-Manager-Konsole.

  2. Führen Sie in der Paket-Manager-Konsoleden 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.

    Migrationen aktivieren

    Beachten Sie, dass eine Datei mit dem Namen Configuration.cs erstellt wurde. Die- Configuration Klasse verfügt über eine- Seed Methode, mit der die Datenbanktabellen mit Testdaten vorab aufgefüllt werden können.

Vorab Auffüllen der Datenbank

  1. Öffnen Sie Configuration.cs.

  2. Fügen Sie der Seed -Methode 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();
            }
        }
    }
    
  3. Speichern Sie Configuration.cs.

  4. Führen Sie in der Paket-Manager-Konsole den Befehl Add-Migration Initialaus.

  5. Führen Sie den Befehl Update-Databaseaus.

    Wenn Sie beim Ausführen dieses Befehls eine Ausnahme erhalten, können sich die StudentID CourseID Werte und von den Seed Methoden Werten unterscheiden. Öffnen Sie diese Datenbanktabellen, und suchen Sie nach vorhandenen Werten für StudentID und CourseID . Fügen Sie diese Werte dem Code für das Seeding der Enrollments Tabelle hinzu.

Hinzufügen eines GridView-Steuer Elements

Mit aufgefüllten Datenbankdaten sind Sie nun bereit, diese Daten abzurufen und anzuzeigen.

  1. Öffnen Sie students. aspx.

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

    Hinweise:

    • Beachten Sie den Wert, der für die- SelectMethod Eigenschaft im GridView-Element festgelegt wurde. 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. Diese Einstellung ermöglicht es Ihnen, auf Klasseneigenschaften im Markup zu verweisen. Beispielsweise verfügt die- Student Klasse über eine Auflistung mit dem Namen Enrollments . Sie können verwenden Item.Enrollments , um diese Auflistung abzurufen, und dann die LINQ-Syntax verwenden, um die registrierte Gutschriften Summe jedes Studenten abzurufen.

  3. Speichern Sie students. aspx.

Hinzufügen von Code zum Abrufen von Daten

Fügen Sie in der Code Behind-Datei students. aspx die für den Wert angegebene Methode hinzu SelectMethod .

  1. Öffnen Sie students.aspx.cs.

  2. Fügen Sie using -Anweisungen für die ContosoUniversityModelBinding. Models System.Data.Entity Namespaces und hinzu.

    using ContosoUniversityModelBinding.Models;
    using System.Data.Entity;
    
  3. Fügen Sie die Methode hinzu, die Sie für angegeben haben SelectMethod :

    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 mit Lazy Loadingabgerufen. Dies umfasst das Senden einer separaten Abfrage an die Datenbank, wenn verknüpfte Daten abgerufen werden. Mit der- Include Klausel werden Daten mithilfe von Eager Loadingabgerufen. Dies bedeutet, dass eine einzelne Datenbankabfrage alle zugehörigen Daten abruft. Wenn verwandte Daten nicht verwendet werden, ist Eager Loading weniger effizient, da mehr Daten abgerufen werden. In diesem Fall bietet Eager Loading jedoch die beste Leistung, da die zugehörigen Daten für jeden Datensatz angezeigt werden.

    Weitere Informationen zu Leistungs Überlegungen beim Laden von verknüpften Daten finden Sie im Artikel Lazy, eifrig und Explizites Laden verwandter Daten im Artikel Lesen verwandter Daten mit dem Entity Framework in einer ASP.NET MVC-Anwendung .

    Standardmäßig werden die Daten nach den Werten der als Schlüssel markierten Eigenschaft sortiert. Sie können eine- OrderBy Klausel hinzufügen, um einen anderen Sortier Wert anzugeben. In diesem Beispiel wird die Standard StudentID Eigenschaft zum Sortieren verwendet. Im Artikel Sortieren, Paging und Filtern von Daten ist der Benutzer in der Lage, eine Spalte für die Sortierung auszuwählen.

  4. Speichern Sie students.aspx.cs.

Ausführen der Anwendung

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

Daten anzeigen

Automatische Generierung von Modell Bindungsmethoden

Wenn Sie diese tutorialreihe durcharbeiten, können Sie einfach den Code aus dem Tutorial in Ihr Projekt kopieren. Ein Nachteil dieses Ansatzes ist jedoch, dass Sie die von Visual Studio bereitgestellte Funktion möglicherweise nicht kennen, um automatisch Code für Modell Bindungsmethoden zu generieren. Wenn Sie an Ihren eigenen Projekten arbeiten, können Sie mithilfe der automatischen Codegenerierung Zeit sparen und einen Eindruck davon gewinnen, wie ein Vorgang implementiert wird. In diesem Abschnitt wird das Feature zur automatischen Codegenerierung beschrieben. Dieser Abschnitt dient nur zu Informationszwecken und enthält keinen Code, den Sie in Ihrem Projekt implementieren müssen.

Wenn Sie einen Wert für die SelectMethod UpdateMethod Eigenschaften,, InsertMethod oder DeleteMethod im Markup Code festlegen, können Sie die Option neue Methode erstellen auswählen.

Erstellen einer Methode

Visual Studio erstellt nicht nur eine Methode im Code-Behind mit der richtigen Signatur, sondern generiert auch Implementierungs Code, um den Vorgang auszuführen. Wenn Sie zuerst die- ItemType Eigenschaft festlegen, bevor Sie die Funktion zur automatischen Codegenerierung verwenden, verwendet der generierte Code diesen Typ für die Vorgänge. Wenn Sie z. b. 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();

    }
}

Dieser Code muss dem Projekt nicht hinzugefügt werden. Im nächsten Tutorial implementieren Sie Methoden zum Aktualisieren, löschen und Hinzufügen neuer Daten.

Zusammenfassung

In diesem Tutorial haben Sie Datenmodell Klassen erstellt und eine Datenbank aus diesen Klassen generiert. Sie haben die Datenbanktabellen mit Testdaten ausgefüllt. Sie haben die Modell Bindung verwendet, um Daten aus der Datenbank abzurufen, und dann die Daten in einer GridView angezeigt.

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