Извлечение и отображение данных с помощью привязки модели и веб-формRetrieving and displaying data with model binding and web forms

В этой серии руководств демонстрируются основные аспекты использования привязки модели с проектом веб-форм ASP.NET.This tutorial series demonstrates basic aspects of using model binding with an ASP.NET Web Forms project. Привязка модели делает взаимодействие данных более прямым, чем работа с объектами источника данных (например, ObjectDataSource или SqlDataSource).Model binding makes data interaction more straight-forward than dealing with data source objects (such as ObjectDataSource or SqlDataSource). Эта серия начинается с вводного материала и переходит к более сложным концепциям в последующих руководствах.This series starts with introductory material and moves to more advanced concepts in later tutorials.

Шаблон привязки модели работает с любыми технологиями доступа к данным.The model binding pattern works with any data access technology. В этом учебнике вы будете использовать Entity Framework, но вы можете использовать технологию доступа к данным, наиболее привычную для вас.In this tutorial, you will use Entity Framework, but you could use the data access technology that is most familiar to you. Из элемента управления сервера с привязкой к данным, такого как GridView, ListView, DetailsView или FormView, указываются имена методов, используемых для выбора, обновления, удаления и создания данных.From a data-bound server control, such as a GridView, ListView, DetailsView, or FormView control, you specify the names of the methods to use for selecting, updating, deleting, and creating data. В этом руководстве вы укажете значение для SelectMethod.In this tutorial, you will specify a value for the SelectMethod.

В этом методе вы предоставляете логику для извлечения данных.Within that method, you provide the logic for retrieving the data. В следующем руководстве будут заданы значения для UpdateMethod, DeleteMethod и InsertMethod.In the next tutorial, you will set values for UpdateMethod, DeleteMethod and InsertMethod.

Вы можете скачать полный проект на C# или Visual Basic.You can download the complete project in C# or Visual Basic. Загружаемый код работает с Visual Studio 2012 и более поздними версиями.The downloadable code works with Visual Studio 2012 and later. В нем используется шаблон Visual Studio 2012, который немного отличается от шаблона Visual Studio 2017, показанного в этом руководстве.It uses the Visual Studio 2012 template, which is slightly different than the Visual Studio 2017 template shown in this tutorial.

В этом руководстве вы запускаете приложение в Visual Studio.In the tutorial you run the application in Visual Studio. Вы также можете развернуть приложение на поставщике услуг размещения и сделать его доступным через Интернет.You can also deploy the application to a hosting provider and make it available over the internet. Корпорация Майкрософт предлагает бесплатное веб-размещение для 10 веб-сайтов вMicrosoft offers free web hosting for up to 10 web sites in a
Бесплатная пробная учетная запись Azure.free Azure trial account. Сведения о том, как развернуть веб-проект Visual Studio в веб-приложениях службы приложений Azure, см. в разделе веб-развертывание ASP.NET с использованием Visual Studio Series.For information about how to deploy a Visual Studio web project to Azure App Service Web Apps, see the ASP.NET Web Deployment using Visual Studio series. В этом учебнике также показано, как использовать Entity Framework Code First Migrations для развертывания базы данных SQL Server в базе данных SQL Azure.That tutorial also shows how to use Entity Framework Code First Migrations to deploy your SQL Server database to Azure SQL Database.

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

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

Этот учебник также работает с Visual Studio 2012 и Visual Studio 2013, но существуют некоторые различия в пользовательском интерфейсе и шаблоне проекта.This tutorial also works with Visual Studio 2012 and Visual Studio 2013, but there are some differences in the user interface and project template.

Что будет построеноWhat you'll build

В этом руководстве вы выполните следующие действия.In this tutorial, you'll:

  • Создание объектов данных, отражающих университет с участием учащихся в курсахBuild data objects that reflect a university with students enrolled in courses
  • Построение таблиц базы данных из объектовBuild database tables from the objects
  • Заполнение базы данных тестовыми даннымиPopulate the database with test data
  • Отображение данных в веб-формеDisplay data in a web form

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

  1. В Visual Studio 2017 создайте проект веб-приложения ASP.NET (.NET Framework) с именем контосауниверситимоделбиндинг.In Visual Studio 2017, create a ASP.NET Web Application (.NET Framework) project called ContosoUniversityModelBinding.

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

  2. Щелкните ОК.Select OK. Откроется диалоговое окно для выбора шаблона.The dialog box to select a template appears.

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

  3. Выберите шаблон веб-формы .Select the Web Forms template.

  4. При необходимости измените проверку подлинности для отдельных учетных записей пользователей.If necessary, change the authentication to Individual User Accounts.

  5. Чтобы создать проект, щелкните ОК.Select OK to create the project.

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

Внесите несколько изменений, чтобы настроить внешний вид сайта.Make a few changes to customize site appearance.

  1. Откройте файл Site. master.Open the Site.Master file.

  2. Измените заголовок, чтобы отобразить университет Contoso , а не мое приложение ASP.NET.Change the title to display Contoso University and not My ASP.NET Application.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. Измените текст заголовка с имени приложения на contoso университет.Change the header text from Application name to 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. Измените ссылки заголовка навигации на соответствующие сайту.Change the navigation header links to site appropriate ones.

    Удалите ссылки для About и Contact и, вместо этого, создайте ссылку на страницу учащихся , которую вы создадите.Remove the links for About and Contact and, instead, link to a Students page, which you will create.

    <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.Save Site.Master.

Добавление веб-формы для показа данных учащихсяAdd a web form to display student data

  1. В Обозреватель решенийщелкните правой кнопкой мыши проект, выберите Добавить , а затем новый элемент.In Solution Explorer, right-click your project, select Add and then New Item.

  2. В диалоговом окне Добавление нового элемента выберите шаблон веб-форма с главной страницей и назовите его students. aspx.In the Add New Item dialog box, select the Web Form with Master Page template and name it Students.aspx.

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

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

  4. Для главной страницы веб-формы выберите site. master.For the web form's master page, select Site.Master.

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

Добавление модели данныхAdd the data model

В папке Models добавьте класс с именем UniversityModels.CS.In the Models folder, add a class named UniversityModels.cs.

  1. Щелкните правой кнопкой мыши элемент модели, выберите Добавить, а затем новый элемент.Right-click Models, select Add, and then New Item. Откроется диалоговое окно Добавление нового элемента.The Add New Item dialog box appears.

  2. В меню навигации слева выберите код, а затем — класс.From the left navigation menu, select Code, then Class.

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

  3. Назовите класс UniversityModels.CS и выберите Добавить.Name the class UniversityModels.cs and select Add.

    В этом файле определите SchoolContext Student классы,, Enrollment и следующим образом Course :In this file, define the SchoolContext, Student, Enrollment, and Course classes as follows:

    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 , который управляет подключением к базе данных и изменениями в данных.The SchoolContext class derives from DbContext, which manages the database connection and changes in the data.

    В Student классе Обратите внимание на атрибуты, применяемые FirstName к LastName Year свойствам, и.In the Student class, notice the attributes applied to the FirstName, LastName, and Year properties. В этом руководстве используются эти атрибуты для проверки данных.This tutorial uses these attributes for data validation. Чтобы упростить код, только эти свойства помечаются атрибутами проверки данных.To simplify the code, only these properties are marked with data-validation attributes. В реальном проекте атрибуты проверки применяются ко всем свойствам, которым требуется проверка.In a real project, you would apply validation attributes to all properties needing validation.

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

Настройка базы данных на основе классовSet up the database based on classes

В этом руководстве для создания объектов и таблиц базы данных используется Code First migrations .This tutorial uses Code First Migrations to create objects and database tables. В этих таблицах хранятся сведения о учащихся и их курсах.These tables store information about the students and their courses.

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

  2. В консоли диспетчера пакетоввыполните следующую команду:In Package Manager Console, run this command:
    enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

    Если команда выполнена успешно, отображается сообщение о том, что миграция включена.If the command completes successfully, a message stating migrations have been enabled appears.

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

    Обратите внимание, что был создан файл с именем Configuration.CS .Notice that a file named Configuration.cs has been created. ConfigurationКласс содержит Seed метод, который может заранее заполнить таблицы базы данных тестовыми данными.The Configuration class has a Seed method, which can pre-populate the database tables with test data.

Предварительное заполнение базы данныхPre-populate the database

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

  2. Добавьте следующий код в метод Seed .Add the following code to the Seed method. Кроме того, добавьте using оператор для ContosoUniversityModelBinding. Models пространства имен.Also, add a using statement for the ContosoUniversityModelBinding. Models namespace.

    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.Save Configuration.cs.

  4. В консоли диспетчера пакетов выполните команду Добавить-миграцию начальный.In the Package Manager Console, run the command add-migration initial.

  5. Выполните команду Update-Database.Run the command update-database.

    Если при выполнении этой команды появляется исключение, StudentID CourseID значения и могут отличаться от значений Seed методов.If you receive an exception when running this command, the StudentID and CourseID values might be different from the Seed method values. Откройте эти таблицы базы данных и найдите существующие значения для StudentID и CourseID .Open those database tables and find existing values for StudentID and CourseID. Добавьте эти значения в код для заполнения Enrollments таблицы.Add those values to the code for seeding the Enrollments table.

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

Заполненные данные базы данных теперь готовы к извлечению и отображению данных.With populated database data, you're now ready to retrieve that data and display it.

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

  2. Нахождение MainContent заполнителя.Locate the MainContent placeholder. В пределах этого заполнителя добавьте элемент управления GridView , включающий этот код.Within that placeholder, add a GridView control that includes this code.

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

    Примечания.Things to note:

    • Обратите внимание на значение, заданное для SelectMethod свойства в элементе GridView.Notice the value set for the SelectMethod property in the GridView element. Это значение указывает метод, используемый для получения данных GridView, которые создаются на следующем шаге.This value specifies the method used to retrieve GridView data, which you create in the next step.

    • ItemTypeДля свойства задан Student класс, созданный ранее.The ItemType property is set to the Student class created earlier. Этот параметр позволяет ссылаться на свойства класса в разметке.This setting allows you to reference class properties in the markup. Например, Student класс содержит коллекцию с именем Enrollments .For example, the Student class has a collection named Enrollments. Можно использовать Item.Enrollments для получения этой коллекции, а затем использовать синтаксис LINQ для получения суммы зарегистрированных кредитов каждого учащегося.You can use Item.Enrollments to retrieve that collection and then use LINQ syntax to retrieve each student's enrolled credits sum.

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

Добавление кода для получения данныхAdd code to retrieve data

В файле кода программной части students. aspx добавьте метод, указанный для SelectMethod значения.In the Students.aspx code-behind file, add the method specified for the SelectMethod value.

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

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

    using ContosoUniversityModelBinding.Models;
    using System.Data.Entity;
    
  3. Добавьте указанный метод для SelectMethod :Add the method you specified for 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Предложение улучшает производительность запросов, но не является обязательным.The Include clause improves query performance but isn't required. Без Include предложения данные извлекаются с помощью отложенной загрузки, что включает отправку отдельного запроса к базе данных при каждом извлечении связанных данных.Without the Include clause, the data is retrieved using lazy loading, which involves sending a separate query to the database each time related data is retrieved. При использовании Include предложения данные извлекаются с помощью безотлагательной загрузки, что означает, что один запрос к базе данных получает все связанные данные.With the Include clause, data is retrieved using eager loading, which means a single database query retrieves all related data. Если связанные данные не используются, безотлагательная загрузка менее эффективна, так как извлекаются дополнительные данные.If related data isn't used, eager loading is less efficient because more data is retrieved. Однако в этом случае упреждающая загрузка обеспечивает наилучшую производительность, так как для каждой записи отображаются связанные данные.However, in this case, eager loading gives you the best performance because the related data is displayed for each record.

    Дополнительные сведения о вопросах производительности при загрузке связанных данных см. в разделе Lazy, безотлагательная и явная загрузка связанных данных статьи чтение связанных данных с помощью Entity Framework в приложении ASP.NET MVC .For more information about performance considerations when loading related data, see the Lazy, Eager, and Explicit Loading of Related Data section in the Reading Related Data with the Entity Framework in an ASP.NET MVC Application article.

    По умолчанию данные сортируются по значениям свойства, отмеченного как ключ.By default, the data is sorted by the values of the property marked as the key. Можно добавить OrderBy предложение, чтобы указать другое значение сортировки.You can add an OrderBy clause to specify a different sort value. В этом примере StudentID для сортировки используется свойство по умолчанию.In this example, the default StudentID property is used for sorting. В статье Сортировка, разбиение по страницам и фильтрация данных пользователю разрешено выбирать столбец для сортировки.In the Sorting, Paging, and Filtering Data article, the user is enabled to select a column for sorting.

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

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

Запустите веб-приложение (F5) и перейдите на страницу учащихся , на которой отображается следующее:Run your web application (F5) and navigate to the Students page, which displays the following:

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

Автоматическое создание методов привязки моделиAutomatic generation of model binding methods

При работе с этой серией руководств можно просто скопировать код из учебника в проект.When working through this tutorial series, you can simply copy the code from the tutorial to your project. Однако одним из недостатков этого подхода является то, что вы не сможете быть осведомлены о функции, предоставляемой Visual Studio, для автоматического создания кода для методов привязки модели.However, one disadvantage of this approach is that you may not become aware of the feature provided by Visual Studio to automatically generate code for model binding methods. При работе с собственными проектами автоматическое создание кода может сэкономить время и помочь вам понять, как реализовать операцию.When working on your own projects, automatic code generation can save you time and help you gain a sense of how to implement an operation. В этом разделе описывается функция автоматического создания кода.This section describes the automatic code generation feature. Этот раздел является только информационным и не содержит кода, необходимого для реализации в проекте.This section is only informational and does not contain any code you need to implement in your project.

При задании значения для SelectMethod свойств, UpdateMethod , InsertMethod или DeleteMethod в коде разметки можно выбрать параметр создать новый метод .When setting a value for the SelectMethod, UpdateMethod, InsertMethod, or DeleteMethod properties in the markup code, you can select the Create New Method option.

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

Visual Studio не только создает метод в коде программной части с правильной сигнатурой, но также создает код реализации для выполнения операции.Visual Studio not only creates a method in the code-behind with the proper signature, but also generates implementation code to perform the operation. Если сначала задать ItemType свойство перед использованием функции автоматического создания кода, созданный код использует этот тип для операций.If you first set the ItemType property before using the automatic code generation feature, the generated code uses that type for the operations. Например, при задании UpdateMethod свойства автоматически создается следующий код:For example, when setting the UpdateMethod property, the following code is automatically generated:

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

    }
}

Опять же, этот код не нужно добавлять в проект.Again, this code doesn't need to be added to your project. В следующем учебнике будут реализованы методы обновления, удаления и добавления новых данных.In the next tutorial, you'll implement methods for updating, deleting, and adding new data.

СводкаSummary

В этом руководстве были созданы классы модели данных и создана база данных из этих классов.In this tutorial, you created data model classes and generated a database from those classes. Вы заполнили таблицы базы данных тестовыми данными.You filled the database tables with test data. Вы использовали привязку модели для получения данных из базы данных, а затем отображает их в элементе управления GridView.You used model binding to retrieve data from the database, and then displayed the data in a GridView.

В следующем руководстве этой серии вы включите обновление, удаление и создание данных.In the next tutorial in this series, you'll enable updating, deleting, and creating data.