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

В этом руководстве показаны основные аспекты использования привязки модели с проектом веб-форм 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 . В этом руководстве также показано, как использовать entity Framework Code First Migrations для развертывания базы данных SQL Server в Базе данных SQL Azure.

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

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

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

Что вы будете создавать

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

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

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

В Visual Studio 2017 создайте проект ASP.NET веб-приложения (.NET Framework)с именем ContosoUniversityModelBinding.
Нажмите ОК. Откроется диалоговое окно для выбора шаблона.
Выберите шаблон веб-форм .
При необходимости измените аутентификацию на учетные записи отдельных пользователей.
Нажмите кнопку "ОК ", чтобы создать проект.

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

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

Откройте файл Site.Master.
Измените заголовок, чтобы отобразить университет Contoso , а не мое приложение ASP.NET.
```
<title><%: Page.Title %> - Contoso University</title>
```

Измените текст заголовка с Application name на 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>

Измените ссылки заголовка навигации на соответствующие сайты.

Удалите ссылки на "О нас" и "Контакты" и вместо этого сделайте ссылку на страницу "Учащиеся", которую вы создадите.
```
<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>
```
Сохраните Site.Master.

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

В обозревателе решений щелкните проект правой кнопкой мыши, выберите "Добавить " и " Создать элемент".
В диалоговом окне "Добавить новый элемент" выберите веб-форму с шаблоном главной страницы и назовите ее Students.aspx.
Нажмите кнопку "Добавить".
На главной странице веб-формы выберите Site.Master.
Нажмите ОК.

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

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

Щелкните правой кнопкой мыши "Модели", выберите " Добавить" и " Создать элемент". Откроется диалоговое окно Добавление нового элемента.
В меню навигации слева выберите "Код", а затем "Класс".

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

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

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

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

Выберите Инструменты>Диспетчер пакетов NuGet>Консоль диспетчера пакетов.
В консоли диспетчера пакетов выполните следующую команду:
enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

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

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

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

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

Добавьте следующий код в метод 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();
        }
    }
}

Сохраните Configuration.cs.
В консоли диспетчера пакетов запустите команду add-migration initial.
Запустите команду update-database.

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

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

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

Откройте Students.aspx.
Найдите заполнитель 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 для вычисления суммы кредитов, на которые записан каждый студент.
Сохраните Students.aspx.

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

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

Откройте Students.aspx.cs.
Добавьте using инструкции для пространств имен ContosoUniversityModelBinding. Models и System.Data.Entity.
```
using ContosoUniversityModelBinding.Models;
using System.Data.Entity;
```
Добавьте указанный метод для 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 используется для сортировки. В статье сортировки, разбиения по страницам и фильтрации данных пользователь может выбрать столбец для сортировки.
Сохраните 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.

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2023-07-13