Pobieranie i wyświetlanie danych przy użyciu powiązania modelu i formularzy sieci Web

Ta seria samouczków pokazuje podstawowe aspekty używania powiązania modelu z projektem formularzy sieci Web ASP.NET. Powiązanie modelu sprawia, że interakcje danych są bardziej proste, niż w przypadku obiektów źródła danych (np. ObjectDataSource lub kontrolki SqlDataSource). Ta seria rozpoczyna się od materiału wstępnego i przenosi do bardziej zaawansowanych koncepcji w kolejnych samouczkach.

Wzorzec powiązania modelu współpracuje z dowolnymi technologiami dostępu do danych. W tym samouczku będziesz używać Entity Framework, ale możesz korzystać z najpopularniejszej technologii dostępu do danych. Z poziomu formantu serwera powiązanego z danymi, takiego jak formant GridView, ListView, DetailsView lub FormView, należy określić nazwy metod, które mają być używane do wybierania, aktualizowania, usuwania i tworzenia danych. W tym samouczku określisz wartość dla operacji SelectMethod.

W ramach tej metody należy podać logikę pobierania danych. W następnym samouczku ustawisz wartości dla UpdateMethod, DeleteMethod i InsertMethod.

Cały projekt można pobrać w języku C# lub Visual Basic. Kod do pobrania współpracuje z programem Visual Studio 2012 lub nowszym. Używa szablonu programu Visual Studio 2012, który jest nieco inny niż szablon programu Visual Studio 2017 przedstawiony w tym samouczku.

Samouczek dotyczący uruchamiania aplikacji w programie Visual Studio. Możesz również wdrożyć aplikację w dostawcy hostingu i udostępnić ją za pośrednictwem Internetu. Firma Microsoft oferuje bezpłatny hosting w sieci Web dla maksymalnie 10 witryn sieci Web w
bezpłatne konto wersji próbnej platformy Azure. Aby uzyskać informacje na temat sposobu wdrażania projektu sieci Web programu Visual Studio w celu Azure App Service Web Apps, zobacz wdrażanie w sieci web ASP.NET za pomocą programu Visual Studio Series. Ten samouczek pokazuje również, jak używać migracje Code First platformy Entity Framework do wdrażania bazy danych SQL Server do Azure SQL Database.

Wersje oprogramowania używane w samouczku

  • Microsoft Visual Studio 2017 lub Microsoft Visual Studio Community 2017

Ten samouczek działa również z programem Visual Studio 2012 i Visual Studio 2013, ale istnieją pewne różnice w interfejsie użytkownika i szablonie projektu.

Co będziesz kompilować

W tym samouczku przedstawiono następujące instrukcje:

  • Kompiluj obiekty danych, które odzwierciedlają Uniwersytet z uczniami zarejestrowanymi w kursach
  • Tworzenie tabel bazy danych z obiektów
  • Wypełnianie bazy danych danymi testowymi
  • Wyświetlanie danych w formularzu sieci Web

Tworzenie projektu

  1. W programie Visual Studio 2017 Utwórz projekt aplikacji sieci Web ASP.NET (.NET Framework) o nazwie ContosoUniversityModelBinding.

    Utwórz projekt

  2. Wybierz przycisk OK. Zostanie wyświetlone okno dialogowe z wybranym szablonem.

    Wybieranie formularzy sieci Web

  3. Wybierz szablon formularzy sieci Web .

  4. W razie potrzeby zmień uwierzytelnianie na konta poszczególnych użytkowników.

  5. Wybierz przycisk OK, aby utworzyć projekt.

Modyfikuj wygląd witryny

Wprowadź kilka zmian, aby dostosować wygląd witryny.

  1. Otwórz plik site. Master.

  2. Zmień tytuł w taki sposób, aby wyświetlał firmę Contoso University , a nie moją aplikację ASP.NET.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. Zmień tekst nagłówka z nazwy aplikacji na Uniwersytet firmy Contoso.

    <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. Zmień linki nagłówka nawigacji odpowiednio do odpowiedniej lokacji.

    Usuń linki do programu i skontaktuj się z nim , a zamiast tego Połącz się ze stroną uczniów , którą utworzysz.

    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/Students">Students</a></li>
    </ul>
    
  5. Zapisz witrynę site. Master.

Dodaj formularz sieci Web, aby wyświetlić dane ucznia

  1. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy projekt, wybierz polecenie Dodaj , a następnie nowy element.

  2. W oknie dialogowym Dodaj nowy element wybierz formularz sieci Web z szablonem strony głównej i nadaj mu nazwę Students. aspx.

    Utwórz stronę

  3. Wybierz pozycję Dodaj.

  4. Na stronie wzorcowej formularza sieci Web wybierz pozycję site. Master.

  5. Wybierz przycisk OK.

Dodawanie modelu danych

W folderze modele Dodaj klasę o nazwie UniversityModels.cs.

  1. Kliknij prawym przyciskiem myszy pozycję modele, wybierz pozycję Dodaj, a następnie pozycję nowy element. Zostanie wyświetlone okno dialogowe Dodawanie nowego elementu.

  2. W menu nawigacji po lewej stronie wybierz pozycję Code, a następnie Class.

    Utwórz klasę modelu

  3. Nadaj klasie nazwę UniversityModels.cs i wybierz pozycję Dodaj.

    W tym pliku Zdefiniuj SchoolContext Student klasy,, Enrollment , i Course w następujący sposób:

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

    SchoolContextKlasa pochodzi od DbContext , która zarządza połączeniem bazy danych i zmianami w danych.

    W Student klasie Zwróć uwagę na atrybuty zastosowane do FirstName LastName właściwości, i Year . Ten samouczek używa tych atrybutów do sprawdzania poprawności danych. Aby uprościć kod, tylko te właściwości są oznaczone atrybutami walidacji danych. W rzeczywistym projekcie należy zastosować atrybuty walidacji do wszystkich właściwości wymagających walidacji.

  4. Zapisz UniversityModels.cs.

Skonfiguruj bazę danych na podstawie klas

Ten samouczek używa migracje Code First do tworzenia obiektów i tabel bazy danych. Te tabele przechowują informacje dotyczące uczniów i ich kursów.

  1. Wybierz kolejno pozycje NarzędziaMenedżer > pakietów NuGet > konsola Menedżera pakietów.

  2. W konsoli Menedżera pakietówUruchom następujące polecenie:
    enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

    Jeśli polecenie zostanie wykonane pomyślnie, zostanie wyświetlony komunikat z informacją o włączeniu migracji.

    Włącz migracje

    Zauważ, że plik o nazwie Configuration.cs został utworzony. ConfigurationKlasa ma Seed metodę, która umożliwia wstępne wypełnianie tabel bazy danych danymi testowymi.

Wstępne wypełnianie bazy danych

  1. Otwórz Configuration.cs.

  2. Dodaj następujący kod do metody Seed: Ponadto Dodaj using instrukcję dla ContosoUniversityModelBinding. Models przestrzeni nazw.

    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. Zapisz Configuration.cs.

  4. W konsoli Menedżera pakietów Uruchom polecenie Dodaj wstępną migracjępolecenia.

  5. Uruchom polecenie Update-Database.

    Jeśli podczas uruchamiania tego polecenia zostanie wyświetlony wyjątek, StudentID CourseID wartości i mogą się różnić od Seed wartości metod. Otwórz te tabele bazy danych i Znajdź istniejące wartości dla StudentID i CourseID . Dodaj te wartości do kodu w celu wypełniania Enrollments tabeli.

Dodaj kontrolkę GridView

Przy użyciu wypełnionych danych bazy danych możesz teraz przystąpić do pobierania tych danych i wyświetlania ich.

  1. Otwórz uczniów. aspx.

  2. Znajdź MainContent symbol zastępczy. W tym symbolu zastępczym Dodaj kontrolkę GridView , która zawiera ten kod.

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

    Kwestie do uwagi:

    • Zwróć uwagę na wartość ustawioną dla SelectMethod właściwości w elemencie GridView. Ta wartość określa metodę używaną do pobierania danych GridView, które tworzysz w następnym kroku.

    • ItemTypeWłaściwość jest ustawiana na Student utworzoną wcześniej klasę. To ustawienie umożliwia odwołanie do właściwości klasy w znaczniku. Na przykład Student Klasa ma kolekcję o nazwie Enrollments . Możesz użyć Item.Enrollments , aby pobrać tę kolekcję, a następnie użyć składni LINQ do pobrania sumy kredytów zarejestrowanej przez studenta.

  3. Zapisz uczniów. aspx.

Dodawanie kodu w celu pobierania danych

W pliku programu Students. aspx z kodem należy dodać metodę określoną dla SelectMethod wartości.

  1. Otwórz Students.aspx.cs.

  2. Dodaj using instrukcje dla ContosoUniversityModelBinding. Models i System.Data.Entity przestrzeni nazw.

    using ContosoUniversityModelBinding.Models;
    using System.Data.Entity;
    
  3. Dodaj metodę określoną dla SelectMethod :

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

    IncludeKlauzula poprawia wydajność zapytań, ale nie jest wymagana. Bez Include klauzuli dane są pobierane przy użyciu ładowania opóźnionego, które polega na wysyłaniu oddzielnego zapytania do bazy danych za każdym razem, gdy są pobierane powiązane dane. Z Include klauzulą dane są pobierane przy użyciu ładowania eager, co oznacza, że pojedyncze zapytanie bazy danych pobiera wszystkie powiązane dane. Jeśli powiązane dane nie są używane, ładowanie eager jest mniej wydajne, ponieważ jest pobieranych więcej danych. Jednak w takim przypadku ładowanie eager zapewnia najlepszą wydajność, ponieważ dla każdego rekordu są wyświetlane powiązane dane.

    Aby uzyskać więcej informacji na temat zagadnień dotyczących wydajności podczas ładowania powiązanych danych, zobacz sekcję opóźnione, Eager i jawne ładowanie powiązanych danych w sekcji odczytywanie powiązanych danych za pomocą Entity Framework w artykule ASP.NET MVC .

    Domyślnie dane są sortowane według wartości właściwości oznaczonej jako klucz. Można dodać OrderBy klauzulę, aby określić inną wartość sortowania. W tym przykładzie StudentID Właściwość domyślna jest używana do sortowania. W artykule sortowanie, stronicowanie i filtrowanie danych użytkownik ma możliwość wybrania kolumny do sortowania.

  4. Zapisz Students.aspx.cs.

Uruchamianie aplikacji

Uruchom aplikację sieci Web (F5) i przejdź do strony uczniów , która wyświetla następujące elementy:

Pokaż dane

Automatyczne generowanie metod powiązania modelu

Podczas pracy z tą serią samouczków możesz po prostu skopiować kod z samouczka do projektu. Jednak jedną wadą tego podejścia jest to, że użytkownik może nie być świadomy funkcji dostarczonej przez program Visual Studio w celu automatycznego generowania kodu dla metod powiązania modelu. Podczas pracy nad własnymi projektami automatyczne generowanie kodu może zaoszczędzić czas i pomóc w uzyskaniu tego, jak zaimplementować operację. W tej sekcji opisano funkcję automatycznego generowania kodu. Ta sekcja jest tylko informacyjna i nie zawiera kodu, który jest wymagany do zaimplementowania w projekcie.

Podczas ustawiania wartości SelectMethod UpdateMethod właściwości,, InsertMethod lub DeleteMethod w kodzie znaczników można wybrać opcję Utwórz nową metodę .

Tworzenie metody

Program Visual Studio nie tylko tworzy metodę w kodzie związanym z prawidłowym podpisem, ale również generuje kod implementacji do wykonania operacji. Jeśli najpierw ustawisz ItemType Właściwość przed użyciem funkcji automatycznego generowania kodu, wygenerowany kod używa tego typu dla operacji. Na przykład podczas ustawiania UpdateMethod Właściwości następujący kod jest generowany automatycznie:

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

    }
}

Ponownie ten kod nie musi być dodany do projektu. W następnym samouczku zostaną zaimplementowane metody aktualizowania, usuwania i dodawania nowych danych.

Podsumowanie

W tym samouczku utworzono klasy modelu danych i Wygenerowano bazę danych z tych klas. Tabele bazy danych zostały wypełnione danymi testowymi. Użyto powiązania modelu do pobierania danych z bazy danych, a następnie wyświetlania danych w widoku GridView.

W następnym samouczku w tej serii będziesz włączać aktualizowanie, usuwanie i tworzenie danych.