Поделиться через

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

  • Статья

В этой серии учебников демонстрируются основные аспекты использования привязки модели с проектом 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 Database.

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

  • 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 University, а не My ASP.NET Application.

    <title><%: Page.Title %> - Contoso University</title>

  3. Измените текст заголовка с Имя приложения на 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>

  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. На странице master веб-формы выберите Site.Master.

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

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

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

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

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

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

  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. В консоли диспетчера пакетов выполните команду add-migration initial.

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

    Дополнительные сведения о производительности при загрузке связанных данных см. в разделе Отложенная, неотложная и явная загрузка связанных данных статьи Чтение связанных данных с помощью 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.

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

Вперед