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

В этой серии учебников демонстрируются основные аспекты использования привязки модели с проектом ASP.NET Web Forms. Привязка модели делает взаимодействие данных более прямым, чем работа с объектами источника данных (например, 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. В этом руководстве также показано, как использовать Entity Framework Code First Migrations для развертывания базы данных SQL Server в базе данных Azure SQL.

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

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

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

Содержание задачи

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

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

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

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

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

  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. Измените ссылки заголовка навигации на соответствующие сайты.

    Удалите ссылки на страницу "Сведения " и " Контакт" , а затем со ссылкой на страницу "Учащиеся ", которую вы создадите.

    <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. В меню навигации слева выберите "Код", а затем "Класс".

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

  3. Назовите класс UniversityModels.cs и нажмите кнопку "Добавить".

    В этом файле определите SchoolContext, StudentEnrollmentи 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 Обратите внимание, что атрибуты, примененные к FirstNameLastNameсвойствам, и Year в классе. В этом руководстве используются эти атрибуты для проверки данных. Чтобы упростить код, только эти свойства помечаются атрибутами проверки данных. В реальном проекте атрибуты проверки будут применяться ко всем свойствам, нуждающимся в проверке.

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

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

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

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

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

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

    включение миграций

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

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

  1. Откройте конфигурацию.cs.

  2. Добавьте в метод Seed следующий код. Кроме того, добавьте инструкцию usingContosoUniversityModelBinding. 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. Сохранить конфигурацию.cs.

  4. В консоли диспетчера пакетов запустите начальную команду для миграции надстроек.

  5. Запустите команду update-database.

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

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

С заполненными данными базы данных теперь можно получить эти данные и отобразить их.

  1. Откройте учащихся.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.

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

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

  1. Откройте учащихся.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 предложения данные извлекаются с помощью неотложной загрузки, что означает, что запрос отдельной базы данных извлекает все связанные данные. Если связанные данные не используются, безотложная загрузка менее эффективна, так как извлекается больше данных. Однако в этом случае безотложная загрузка обеспечивает лучшую производительность, так как связанные данные отображаются для каждой записи.

    Дополнительные сведения о рекомендациях по повышению производительности при загрузке связанных данных см. в разделе " Отложенный", "Нетерпеливый" и "Явная загрузка связанных данных " в разделе "Чтение связанных данных с entity Framework" в статье ASP.NET приложении MVC .

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

  4. Сохранение учащихся.aspx.cs.

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

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

показать данные

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

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

При задании значения для SelectMethod, UpdateMethodInsertMethodили 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.

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