ASP.NET MVC5 Scaffolding ことはじめ


環境

  • Windows 8.1 pro
  • SQL Server 2014 Express

前提

SQL Server で sa でのログインを有効化しておく

 → 参考:Microsoft SQLServer 2014 で sa でのログインを有効化

準備 1:プロジェクトの作成

プロジェクトを作成するよ

左のサイドバーから「Web」を選択し、適当な名前をつけて「OK」

下部画像の様に、「テンプレートの種類」は「Empty」を選択。「以下にフォルダーおよびコア参照を追加」へは「MVC」を選択

準備 2:IISにサイトを追加し、hosts を書き換える

IIS の設定をこんな感じで

hosts はこんな感じ

127.0.0.1   scaffoldsample

準備 3:Web.config に connectionStrings を追加

それぞれの環境に合わせて書いてね。name は(後でそういうった名前のクラスを定義するので)「BookContext」にしておいてね!

Web.config
<configuration>
  <connectionStrings>
    <add name="BookContext" connectionString="Data Source=(local)\SQLEXPRESS;Initial Catalog=XXXXXX;User ID=sa;Password=XXXXXXXX;"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
</configuration>

準備 4:参照の追加、Nugetでパッケージの追加

必要な dll への参照を追加するよ

参照マネージャで、左部サイドバーで「アセンブリ」が選択されているのを確認して、右上の検索窓で「Entiry」とでも入れれば「System.Data.Entity」が出てくるのでチェックを入れて「OK」

Nuget で EntityFramework も追加

もしインストール済みならば

  • EntityFramework
  • EntityFramework.SqlServer

を参照追加すればおk

準備 5:モデルとコンテキストの作成

自動生成された「Models」ディレクトリに対しクラスを追加していくよ

今回は Book とした

データモデルを定義するよ。System.ComponentModel.DataAnnotations をusingしておいて、属性をつける。

Book.cs

using System.ComponentModel.DataAnnotations;

namespace ScaffoldSample.Models
{
    public class Book
    {
        [Required]
        [ScaffoldColumn(false)]
        public int id { get; set; }

        [Required]
        public string Title { get; set; }

        [Required]
        public int Price { get; set; }

        [Required]
        public string Isbn { get; set; }

    }
}

Required は必須かどうか。id列はフォームを作成する必要がないのでScaffoldColumn(false)としておく。

Model ディレクトリに Book のコンテキストも作っておく。

BookContext.cs
using System.Data.Entity;

namespace ScaffoldSample.Models
{
    public class BookContext : DbContext 
    {
        public DbSet<Book> Books { get; set; }
    }
}

Scaffolding

実際に Scaffolding を使ってみよう。自動生成された Controllers ディレクトリ上で、右クリックをし「追加」、「コントローラー」を選ぶ

「Entity Framework を使用した、ビューがある MVC コントローラー」を選択

先ほど作った(モデルとコンテキスト)それぞれを設定していく

これで Scaffold の作成は完了

確認

http://*****/Books にアクセス

Create New を押す。

こんな感じで入力して

http://*****/Books に再びアクセスすると、「Edit」「Details」「Delete」の UI がついたレコードが追加されている

Detail (詳細)

Delete (削除)

Edit (編集)

おまけ (つくられたTable)

こんな感じで CRUD ができている。
 
実際に自動で生成されたファイル群は別エントリに譲る。