Извлечение и отображение данных с помощью привязки модели и веб-форм

В этой серии руководств демонстрируются основные аспекты использования привязки модели с проектом веб-форм ASP.NET. Привязка модели делает взаимодействие данных более прямым, чем работа с объектами источника данных (например, ObjectDataSource или SqlDataSource). Эта серия начинается с вводного материала и переходит к более сложным концепциям в последующих руководствах.

Шаблон привязки модели работает с любыми технологиями доступа к данным. В этом учебнике вы будете использовать Entity Framework, но вы можете использовать технологию доступа к данным, наиболее привычную для вас. Из элемента управления сервера с привязкой к данным, такого как GridView, ListView, DetailsView или FormView, указываются имена методов, используемых для выбора, обновления, удаления и создания данных. В этом руководстве вы укажете значение для SelectMethod.

В этом методе вы предоставляете логику для извлечения данных. В следующем руководстве будут заданы значения для UpdateMethod, DeleteMethod и InsertMethod.

Вы можете скачать полный проект на C# или Visual Basic. Загружаемый код работает с Visual Studio 2012 и более поздними версиями. В нем используется шаблон Visual Studio 2012, который немного отличается от шаблона Visual Studio 2017, показанного в этом руководстве.

В этом руководстве вы запускаете приложение в Visual Studio. Вы также можете развернуть приложение на поставщике услуг размещения и сделать его доступным через Интернет. Корпорация Майкрософт предлагает бесплатное веб-размещение для 10 веб-сайтов в
Бесплатная пробная учетная запись Azure. Сведения о том, как развернуть веб-проект Visual Studio в веб-приложениях службы приложений Azure, см. в разделе веб-развертывание ASP.NET с использованием Visual Studio Series. В этом учебнике также показано, как использовать Entity Framework Code First Migrations для развертывания базы данных SQL Server в базе данных SQL Azure.

Версии программного обеспечения, используемые в этом руководстве

  • Microsoft Visual Studio 2017 или Microsoft Visual Studio Community 2017

Этот учебник также работает с Visual Studio 2012 и Visual Studio 2013, но существуют некоторые различия в пользовательском интерфейсе и шаблоне проекта.

Что будет построено

В этом руководстве вы выполните следующие действия.

  • Создание объектов данных, отражающих университет с участием учащихся в курсах
  • Построение таблиц базы данных из объектов
  • Заполнение базы данных тестовыми данными
  • Отображение данных в веб-форме

Создание проекта

  1. В Visual Studio 2017 создайте проект веб-приложения ASP.NET (.NET Framework) с именем контосауниверситимоделбиндинг.

    создание проекта

  2. Щелкните ОК. Откроется диалоговое окно для выбора шаблона.

    Выбор веб-форм

  3. Выберите шаблон веб-формы .

  4. При необходимости измените проверку подлинности для отдельных учетных записей пользователей.

  5. Чтобы создать проект, щелкните ОК.

Изменение внешнего вида сайта

Внесите несколько изменений, чтобы настроить внешний вид сайта.

  1. Откройте файл Site. master.

  2. Измените заголовок, чтобы отобразить университет Contoso , а не мое приложение ASP.NET.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. Измените текст заголовка с имени приложения на 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. Измените ссылки заголовка навигации на соответствующие сайту.

    Удалите ссылки для About и Contact и, вместо этого, создайте ссылку на страницу учащихся , которую вы создадите.

    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/Students">Students</a></li>
    </ul>
    
  5. Сохраните site. master.

Добавление веб-формы для показа данных учащихся

  1. В Обозреватель решенийщелкните правой кнопкой мыши проект, выберите Добавить , а затем новый элемент.

  2. В диалоговом окне Добавление нового элемента выберите шаблон веб-форма с главной страницей и назовите его students. aspx.

    создать страницу

  3. Нажмите Добавить.

  4. Для главной страницы веб-формы выберите site. master.

  5. Щелкните ОК.

Добавление модели данных

В папке Models добавьте класс с именем UniversityModels.CS.

  1. Щелкните правой кнопкой мыши элемент модели, выберите Добавить, а затем новый элемент. Откроется диалоговое окно Добавление нового элемента.

  2. В меню навигации слева выберите код, а затем — класс.

    Создание класса Model

  3. Назовите класс UniversityModels.CS и выберите Добавить.

    В этом файле определите SchoolContext Student классы,, Enrollment и следующим образом Course :

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

    SchoolContextКласс является производным от DbContext , который управляет подключением к базе данных и изменениями в данных.

    В Student классе Обратите внимание на атрибуты, применяемые FirstName к LastName Year свойствам, и. В этом руководстве используются эти атрибуты для проверки данных. Чтобы упростить код, только эти свойства помечаются атрибутами проверки данных. В реальном проекте атрибуты проверки применяются ко всем свойствам, которым требуется проверка.

  4. Сохраните UniversityModels.cs.

Настройка базы данных на основе классов

В этом руководстве для создания объектов и таблиц базы данных используется Code First migrations . В этих таблицах хранятся сведения о учащихся и их курсах.

  1. Выберите Инструменты > Диспетчер пакетов NuGet > Консоль диспетчера пакетов.

  2. В консоли диспетчера пакетоввыполните следующую команду:
    enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

    Если команда выполнена успешно, отображается сообщение о том, что миграция включена.

    включить миграции

    Обратите внимание, что был создан файл с именем Configuration.CS . ConfigurationКласс содержит Seed метод, который может заранее заполнить таблицы базы данных тестовыми данными.

Предварительное заполнение базы данных

  1. Откройте Configuration.cs.

  2. Добавьте следующий код в метод Seed . Кроме того, добавьте using оператор для ContosoUniversityModelBinding. Models пространства имен.

    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. Сохраните Configuration.cs.

  4. В консоли диспетчера пакетов выполните команду Добавить-миграцию начальный.

  5. Выполните команду Update-Database.

    Если при выполнении этой команды появляется исключение, StudentID CourseID значения и могут отличаться от значений Seed методов. Откройте эти таблицы базы данных и найдите существующие значения для StudentID и CourseID . Добавьте эти значения в код для заполнения Enrollments таблицы.

Добавление элемента управления GridView

Заполненные данные базы данных теперь готовы к извлечению и отображению данных.

  1. Откройте students. aspx.

  2. Нахождение MainContent заполнителя. В пределах этого заполнителя добавьте элемент управления GridView , включающий этот код.

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

    Примечания.

    • Обратите внимание на значение, заданное для SelectMethod свойства в элементе GridView. Это значение указывает метод, используемый для получения данных GridView, которые создаются на следующем шаге.

    • ItemTypeДля свойства задан Student класс, созданный ранее. Этот параметр позволяет ссылаться на свойства класса в разметке. Например, Student класс содержит коллекцию с именем Enrollments . Можно использовать Item.Enrollments для получения этой коллекции, а затем использовать синтаксис LINQ для получения суммы зарегистрированных кредитов каждого учащегося.

  3. Сохраните учащихся. aspx.

Добавление кода для получения данных

В файле кода программной части students. aspx добавьте метод, указанный для SelectMethod значения.

  1. Откройте Students.aspx.cs.

  2. Добавьте using инструкции для ContosoUniversityModelBinding. Models System.Data.Entity пространств имен и.

    using ContosoUniversityModelBinding.Models;
    using System.Data.Entity;
    
  3. Добавьте указанный метод для SelectMethod :

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

    IncludeПредложение улучшает производительность запросов, но не является обязательным. Без Include предложения данные извлекаются с помощью отложенной загрузки, что включает отправку отдельного запроса к базе данных при каждом извлечении связанных данных. При использовании Include предложения данные извлекаются с помощью безотлагательной загрузки, что означает, что один запрос к базе данных получает все связанные данные. Если связанные данные не используются, безотлагательная загрузка менее эффективна, так как извлекаются дополнительные данные. Однако в этом случае упреждающая загрузка обеспечивает наилучшую производительность, так как для каждой записи отображаются связанные данные.

    Дополнительные сведения о вопросах производительности при загрузке связанных данных см. в разделе Lazy, безотлагательная и явная загрузка связанных данных статьи чтение связанных данных с помощью Entity Framework в приложении ASP.NET MVC .

    По умолчанию данные сортируются по значениям свойства, отмеченного как ключ. Можно добавить OrderBy предложение, чтобы указать другое значение сортировки. В этом примере StudentID для сортировки используется свойство по умолчанию. В статье Сортировка, разбиение по страницам и фильтрация данных пользователю разрешено выбирать столбец для сортировки.

  4. Сохраните Students.aspx.cs.

Запуск приложения

Запустите веб-приложение (F5) и перейдите на страницу учащихся , на которой отображается следующее:

Отображение данных

Автоматическое создание методов привязки модели

При работе с этой серией руководств можно просто скопировать код из учебника в проект. Однако одним из недостатков этого подхода является то, что вы не сможете быть осведомлены о функции, предоставляемой Visual Studio, для автоматического создания кода для методов привязки модели. При работе с собственными проектами автоматическое создание кода может сэкономить время и помочь вам понять, как реализовать операцию. В этом разделе описывается функция автоматического создания кода. Этот раздел является только информационным и не содержит кода, необходимого для реализации в проекте.

При задании значения для SelectMethod свойств, UpdateMethod , InsertMethod или DeleteMethod в коде разметки можно выбрать параметр создать новый метод .

Создание метода

Visual Studio не только создает метод в коде программной части с правильной сигнатурой, но также создает код реализации для выполнения операции. Если сначала задать ItemType свойство перед использованием функции автоматического создания кода, созданный код использует этот тип для операций. Например, при задании UpdateMethod свойства автоматически создается следующий код:

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

    }
}

Опять же, этот код не нужно добавлять в проект. В следующем учебнике будут реализованы методы обновления, удаления и добавления новых данных.

Сводка

В этом руководстве были созданы классы модели данных и создана база данных из этих классов. Вы заполнили таблицы базы данных тестовыми данными. Вы использовали привязку модели для получения данных из базы данных, а затем отображает их в элементе управления GridView.

В следующем руководстве этой серии вы включите обновление, удаление и создание данных.