取得して、モデル バインディングと web フォームでデータの表示Retrieving and displaying data with model binding and web forms

このチュートリアル シリーズでは、モデル バインドを使用して ASP.NET Web フォーム プロジェクトでの基本的な側面について説明します。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 2017 のテンプレートと若干異なる Visual Studio 2012 テンプレートを使用します。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. マイクロソフトでは、無料の web ホスティングで最大 10 個の web サイトを提供しています、Microsoft offers free web hosting for up to 10 web sites in a
無料 Azure 試用版アカウントします。free Azure trial account. Visual Studio web プロジェクトを Azure App Service Web Apps にデプロイする方法については、次を参照してください。、 Visual Studio を使用して ASP.NET Web 配置シリーズ。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 を使用して Azure SQL Database に SQL Server データベースをデプロイする方法も示します。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
  • Web フォームでデータを表示Display data in a web form

プロジェクトの作成Create the project

  1. Visual Studio 2017 では、作成、 ASP.NET Web アプリケーション (.NET Framework) という名前のプロジェクトContosoUniversityModelBindingします。In Visual Studio 2017, create a ASP.NET Web Application (.NET Framework) project called ContosoUniversityModelBinding.

    プロジェクトを作成します。

  2. [OK] を選択します。Select OK. テンプレートを選択するダイアログ ボックスが表示されます。The dialog box to select a template appears.

    web フォームを選択します。

  3. 選択、 Web フォームテンプレート。Select the Web Forms template.

  4. 必要に応じて、変更への認証個々 のユーザー アカウントします。If necessary, change the authentication to Individual User Accounts.

  5. [OK] をクリックして、プロジェクトを作成します。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 UniversityなくMy ASP.NET Applicationします。Change the title to display Contoso University and not My ASP.NET Application.

    <title><%: Page.Title %> - Contoso University</title>
    
  3. ヘッダー テキストを変更するアプリケーション名Contoso Universityします。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.

受講者データを表示する web フォームを追加します。Add a web form to display student data

  1. ソリューション エクスプ ローラー、プロジェクトを右クリックし、選択追加新しい項目のします。In Solution Explorer, right-click your project, select Add and then New Item.

  2. 新しい項目の追加ダイアログ ボックスで、マスター ページを使用した Web フォームテンプレートと名前を付けます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. Web フォームのマスター ページで、選択Site.Masterします。For the web form's master page, select Site.Master.

  5. [OK] を選択します。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.

    このファイルで定義、 SchoolContextStudentEnrollmentCourseクラスの次のようにします。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クラス、適用される属性に注意してください、 FirstNameLastName、および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.

    このコマンドを実行するときに例外が発生した場合、StudentIDCourseID値が異なる可能性があります、Seedメソッドの値。If you receive an exception when running this command, the StudentID and CourseID values might be different from the Seed method values. これらのデータベース テーブルを開きの既存の値を検索StudentIDCourseIDします。Open those database tables and find existing values for StudentID and CourseID. これらの値をシード処理のコードを追加、Enrollmentsテーブル。Add those values to the code for seeding the Enrollments table.

GridView コントロールを追加します。Add 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. 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. ModelsSystem.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を使用して句では、データを取得一括読み込み、つまり、1 つのデータベース クエリには、すべての関連データを取得します。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

Web アプリケーションを実行 (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. ただし、このアプローチの欠点の 1 つは、モデル バインド メソッドのコードを自動的に生成する 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.

値を設定するときに、 SelectMethodUpdateMethodInsertMethod、または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.