ASP.NET MVC5 Scaffolding ことはじめ

# :dizzy: 環境

* Windows 8.1 pro
* SQL Server 2014 Express

# :dizzy: 前提

## :octocat: SQL Server で sa でのログインを有効化しておく
　→ [参考：Microsoft SQLServer 2014 で sa でのログインを有効化](http://qiita.com/Chrowa3/items/04326acdd599cb3c3064)


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

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

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

![スクリーンショット 2015-05-20 22.39.50.png](https://qiita-image-store.s3.amazonaws.com/0/9988/f717d2c3-5770-40cb-2921-b22f6d230db3.png)


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

![スクリーンショット 2015-05-20 23.59.10.png](https://qiita-image-store.s3.amazonaws.com/0/9988/3b98bbe0-42f6-a175-ab79-9772c14e2d76.png)

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

IIS の設定をこんな感じで

![スクリーンショット 2015-05-21 1.32.44.png](https://qiita-image-store.s3.amazonaws.com/0/9988/ace016af-8012-a031-ba09-b2da338183a2.png)

hosts はこんな感じ

```text
127.0.0.1	scaffoldsample
```

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

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

```xml: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>
```



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

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

![スクリーンショット 2015-05-20 23.01.32.png](https://qiita-image-store.s3.amazonaws.com/0/9988/bc5157cb-15e1-d6cc-3347-87580e468ed7.png)

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

![スクリーンショット 2015-05-20 23.02.16.png](https://qiita-image-store.s3.amazonaws.com/0/9988/2b58546a-fd17-3813-d55f-7bbeaf4b1bcf.png)

Nuget で EntityFramework も追加

![スクリーンショット 2015-05-20 23.07.42.png](https://qiita-image-store.s3.amazonaws.com/0/9988/b049bba4-5133-a5dd-236c-0593fcbe198f.png)

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

* EntityFramework
* EntityFramework.SqlServer

を参照追加すればおｋ



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

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

![スクリーンショット 2015-05-20 22.51.24.png](https://qiita-image-store.s3.amazonaws.com/0/9988/0b960a6b-5f02-f72e-f8cd-1cd714b8fe7d.png)

今回は Book とした

![スクリーンショット 2015-05-21 0.04.15.png](https://qiita-image-store.s3.amazonaws.com/0/9988/c22c2b33-bd08-f08e-7463-ecc065956a43.png)

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

```csharp: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 のコンテキストも作っておく。

```csharp:BookContext.cs
using System.Data.Entity;

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




# :dizzy: Scaffolding

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

![スクリーンショット 2015-05-20 23.35.13.png](https://qiita-image-store.s3.amazonaws.com/0/9988/1713882c-9c74-4940-0cdc-dbd18a7d4bf7.png)

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

![スクリーンショット 2015-05-20 23.35.25.png](https://qiita-image-store.s3.amazonaws.com/0/9988/5fa868ea-e7fa-8aa6-57cb-fcb4edd5342c.png)


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

![スクリーンショット 2015-05-20 23.36.56.png](https://qiita-image-store.s3.amazonaws.com/0/9988/3e6215c1-f345-3b83-f1a6-5105de55d471.png)

これで Scaffold の作成は完了


# :dizzy: 確認

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

![スクリーンショット 2015-05-20 23.39.35.png](https://qiita-image-store.s3.amazonaws.com/0/9988/75ca4e84-100e-fd95-0d20-8d327569bfe1.png)

Create New を押す。

![スクリーンショット 2015-05-20 23.40.00.png](https://qiita-image-store.s3.amazonaws.com/0/9988/163b99ab-e063-b8b4-c4d9-cd5ea077ce8c.png)

こんな感じで入力して

![スクリーンショット 2015-05-20 23.41.29.png](https://qiita-image-store.s3.amazonaws.com/0/9988/11e3e707-2c1c-3142-fb02-b9c1a9b44caf.png)

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

![スクリーンショット 2015-05-20 23.41.49.png](https://qiita-image-store.s3.amazonaws.com/0/9988/d7615e0b-4a3f-56ce-b423-e4cf721a6aa5.png)

## :octocat: Detail (詳細)

![スクリーンショット 2015-05-20 23.42.02.png](https://qiita-image-store.s3.amazonaws.com/0/9988/53ea15d8-3a96-1449-ee8c-1795cf42fcc3.png)


## :octocat: Delete (削除)

![スクリーンショット 2015-05-20 23.42.16.png](https://qiita-image-store.s3.amazonaws.com/0/9988/b0ebd306-a573-d62e-7e5f-5e2e75fee3f3.png)


## :octocat: Edit (編集)

![スクリーンショット 2015-05-21 1.00.00.png](https://qiita-image-store.s3.amazonaws.com/0/9988/2b19a7fe-cc90-4cea-fbb9-916ad60550f0.png)


## :octocat: おまけ (つくられたTable)

![スクリーンショット 2015-05-21 1.25.12.png](https://qiita-image-store.s3.amazonaws.com/0/9988/0af1afcd-1171-faaa-cde3-a69e82e91e9d.png)


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