Načítání a zobrazení dat pomocí vazby modelu a webových formulářů

Tato série kurzů ukazuje základní aspekty použití vazby modelu s projektem ASP.NET Web Forms. Vazba modelu usnadňuje interakci s daty přímějším způsobem než práce s objekty zdroje dat (například ObjectDataSource nebo SqlDataSource). Tato série začíná úvodním materiálem a v dalších kurzech se přesune na pokročilejší koncepty.

Model vazby modelu funguje s libovolnou technologií přístupu k datům. V tomto kurzu použijete Entity Framework, ale můžete použít technologii přístupu k datům, která je pro vás nejvědomější. Z ovládacího prvku serveru vázaného na data, například Ovládací prvek GridView, ListView, DetailsView nebo FormView, zadáte názvy metod, které se mají použít pro výběr, aktualizaci, odstranění a vytváření dat. V tomto kurzu zadáte hodnotu pro SelectMethod.

V rámci této metody zadáte logiku pro načtení dat. V dalším kurzu nastavíte hodnoty pro UpdateMethod, DeleteMethod a InsertMethod.

Kompletní projekt si můžete stáhnout v jazyce C# nebo Visual Basic. Kód ke stažení funguje se sadou Visual Studio 2012 a novějšími verzemi. Používá šablonu sady Visual Studio 2012, která se mírně liší od šablony sady Visual Studio 2017 zobrazené v tomto kurzu.

V tutoriálu spustíte aplikaci v sadě Visual Studio. Aplikaci můžete také nasadit na poskytovatele hostingu a zpřístupnit ji přes internet. Microsoft nabízí bezplatné hostování webů až pro 10 webů v
bezplatný zkušební účet Azure. Informace o tom, jak nasadit webový projekt sady Visual Studio do Azure App Service Web Apps, najdete v tématu nasazení webu ASP.NET pomocí řady Visual Studio . V tomto kurzu se také dozvíte, jak pomocí migrací Entity Framework Code First nasadit databázi SQL Serveru do služby Azure SQL Database.

Verze softwaru používané v tomto kurzu

Microsoft Visual Studio 2017 nebo Microsoft Visual Studio Community 2017

Tento kurz také funguje se sadou Visual Studio 2012 a sadou Visual Studio 2013, ale existuje několik rozdílů v uživatelském rozhraní a šabloně projektu.

Co budete vytvářet

V tomto kurzu:

Vytváření datových objektů, které odrážejí univerzitu se studenty zaregistrovanými v kurzech
Sestavení databázových tabulek z objektů
Naplnění databáze testovacími daty
Zobrazení dat ve webovém formuláři

Vytvoření projektu

V sadě Visual Studio 2017 vytvořte projekt webové aplikace ASP.NET (.NET Framework) s názvem ContosoUniversityModelBinding.
Vyberte OK. Zobrazí se dialogové okno pro výběr šablony.
Vyberte šablonu webových formulářů .
V případě potřeby změňte ověřování na jednotlivé uživatelské účty.
Vyberte OK a vytvořte projekt.

Úprava vzhledu webu

Upravte vzhled webu několika změnami.

Otevřete soubor Site.Master.
Změňte název tak, aby se zobrazoval Contoso University , a ne Moje ASP.NET Aplikace.
```
<title><%: Page.Title %> - Contoso University</title>
```

Změňte text záhlaví z názvu aplikace na 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>

Změňte odkazy navigačního záhlaví na odpovídající web.

Odeberte odkazy na O nás a Kontakt a místo toho vytvořte odkaz na stránku Studenti, kterou vytvoříte.
```
<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>
```
Uložit soubor Site.Master.

Přidání webového formuláře pro zobrazení dat studentů

V Průzkumníku řešení klikněte pravým tlačítkem na projekt, vyberte Přidat a potom Novou položku.
V dialogovém okně Přidat novou položku vyberte webový formulář se šablonou stránky předlohy a pojmenujte ji Students.aspx.
Vyberte Přidat.
Pro stránku předlohy webového formuláře vyberte Site.Master.
Vyberte OK.

Přidání datového modelu

Do složky Models přidejte třídu s názvem UniversityModels.cs.

Klikněte pravým tlačítkem myši na Modely, vyberte Přidat a potom Nová položka. Zobrazí se dialogové okno Přidat novou položku .
V levé navigační nabídce vyberte Kód a poté Třída.

Pojmenujte UniversityModels.cs třídy a vyberte Přidat.

V tomto souboru definujte SchoolContext, StudentEnrollmenta Course třídy následujícím způsobem:

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

Třída SchoolContext je odvozena od DbContext, který spravuje připojení databáze a změny v datech.

Ve třídě Student si všimněte atributů použitých na vlastnostech FirstName, LastName a Year. Tento kurz používá tyto atributy k ověření dat. Pro zjednodušení kódu jsou pouze tyto vlastnosti označené atributy ověření dat. V reálném projektu byste použili ověřovací atributy pro všechny vlastnosti, které potřebují ověření.

Uložte UniversityModels.cs.

Nastavení databáze na základě tříd

V tomto tutoriálu se k vytváření objektů a databázových tabulek používají migrace Code First. Tyto tabulky ukládají informace o studentech a jejich kurzech.

Vyberte Nástroje>NuGet Správce balíčků>Konzola správce balíčků.
V konzole Správce balíčků spusťte tento příkaz:
enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

Pokud se příkaz úspěšně dokončí, zobrazí se zpráva s oznámením, že migrace byly povoleny.

Všimněte si, že byl vytvořen soubor s názvem Configuration.cs . Třída Configuration má metodu Seed , která může předem naplnit databázové tabulky testovacími daty.

Předplnit databázi

Otevřete Configuration.cs.

Do metody Seed přidejte následující kód. using Přidejte také příkaz pro ContosoUniversityModelBinding. Models obor názvů.

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

Uložte Configuration.cs.
V konzole Správce balíčků spusťte příkaz add-migration initial.
Spusťte příkaz update-database.

Pokud při spuštění tohoto příkazu dojde k výjimce, hodnoty StudentID a CourseID se mohou lišit od hodnot metody Seed. Otevřete tyto databázové tabulky a vyhledejte existující hodnoty pro StudentID a CourseID. Přidejte tyto hodnoty do kódu pro inicializaci tabulky Enrollments.

Přidání ovládacího prvku GridView

S vyplněnými databázovými daty teď můžete tato data načíst a zobrazit.

Otevřete Students.aspx.

Vyhledejte zástupný symbol MainContent. V tomto zástupného symbolu přidejte ovládací prvek GridView , který obsahuje tento kód.

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

Poznámky:

Všimněte si nastavené hodnoty pro vlastnost SelectMethod v prvku GridView. Tato hodnota určuje metodu použitou k načtení dat GridView, kterou vytvoříte v dalším kroku.
Vlastnost ItemType je nastavena na třídu Student, která byla vytvořena dříve. Toto nastavení umožňuje odkazovat na vlastnosti třídy ve značení. Například třída Student má kolekci s názvem Enrollments. Tuto kolekci můžete Item.Enrollments načíst a pak pomocí syntaxe LINQ načíst součet zaregistrovaných kreditů každého studenta.

Uložte Students.aspx.

Přidání kódu pro načtení dat

V souboru code-behind Students.aspx přidejte metodu zadanou pro SelectMethod.

Otevřete Students.aspx.cs.
Přidat using příkazy pro jmenné prostory ContosoUniversityModelBinding. Models a System.Data.Entity.
```
using ContosoUniversityModelBinding.Models;
using System.Data.Entity;
```
Přidejte metodu, kterou jste zadali pro SelectMethod.
```
public IQueryable<Student> studentsGrid_GetData()
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
}
```
Klauzule Include zlepšuje výkon dotazů, ale nevyžaduje se. Include Bez klauzule se data načítají pomocí opožděného načítání, což zahrnuje odeslání samostatného dotazu do databáze při každém načtení souvisejících dat. Include Pomocí klauzule se data načítají pomocí dychtivého načítání, což znamená, že jeden databázový dotaz načte všechna související data. Pokud se související data nepoužívají, předběžné načítání je méně efektivní, protože se načte více dat. V tomto případě ale předběžné načítání poskytuje nejlepší výkon, protože související data se zobrazují pro každý záznam.

Další informace o aspektech výkonu při načítání souvisejících dat najdete v části Opožděné, Dychtivé a Explicitní načítání souvisejících dat v části Čtení souvisejících dat pomocí Entity Frameworku v článku o aplikaci ASP.NET MVC .

Ve výchozím nastavení jsou data seřazena podle hodnot vlastnosti označené jako klíč. Můžete přidat OrderBy klauzuli, která určuje jinou hodnotu řazení. V tomto příkladu se k řazení používá výchozí StudentID vlastnost. V článku Řazení, stránkování a filtrování dat je uživatel povolený k výběru sloupce pro řazení.
Uložte Students.aspx.cs.

Spuštění aplikace

Spusťte webovou aplikaci (F5) a přejděte na stránku Studenti , která zobrazuje následující položky:

zobrazit data

Automatické generování metod vazby modelu

Při práci v této sérii kurzů můžete jednoduše zkopírovat kód z kurzu do projektu. Nevýhodou tohoto přístupu je ale to, že se nemusíte seznámit s funkcí poskytovanou sadou Visual Studio, abyste mohli automaticky generovat kód pro metody vazby modelu. Při práci na vlastních projektech vám automatické generování kódu ušetří čas a pomůže vám získat představu o tom, jak implementovat operaci. Tato část popisuje funkci automatického generování kódu. Tato část je pouze informativní a neobsahuje žádný kód, který potřebujete implementovat ve svém projektu.

Při nastavení hodnoty pro vlastnosti SelectMethod, UpdateMethod, InsertMethod nebo DeleteMethod v kódu značky můžete vybrat možnost Vytvořit novou metodu.

vytvoření metody

Visual Studio nejen vytvoří metodu v kódu se správným podpisem, ale také vygeneruje kód implementace pro provedení operace. Pokud vlastnost nejprve nastavíte ItemType před použitím funkce automatického generování kódu, vygenerovaný kód použije tento typ pro operace. Například při nastavování UpdateMethod vlastnosti se automaticky vygeneruje následující kód:

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

    }
}

Tento kód navíc není potřeba do projektu přidávat. V dalším kurzu implementujete metody pro aktualizaci, odstranění a přidání nových dat.

Shrnutí

V tomto kurzu jste vytvořili třídy datového modelu a vygenerovali databázi z těchto tříd. V databázových tabulkách jste vyplnili testovací data. Použili jste vazbu modelu k načtení dat z databáze a následnému zobrazení dat v objektu GridView.

V dalším kurzu této série povolíte aktualizaci, odstranění a vytváření dat.

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-02-21