Извлечение и отображение данных с помощью привязки модели и веб-форм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 и InsertMethod и DeleteMethod установит значения.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 рядов.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) проект с именем ContosoUniversityModelBinding.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.

    Удаление ссылок для о и контакт и вместо этого ссылка на учащихся страницы, который будет создан.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

В моделей папки, добавьте класс с именем 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.

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

  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. Выполните команду обновления базы данных.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. Open 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 для получения каждого учащегося зарегистрированы кредиты sum.You can use Item.Enrollments to retrieve that collection and then use LINQ syntax to retrieve each student's enrolled credits sum.

  3. Сохраните Students.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 Eager и явная загрузка связанных данных статьи чтение связанных данных с помощью 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.