MacでASP.NET5 MVC6（ちょっといじってみる編）


とりあえずyoでプロジェクトを作ってからの話。
セットアップが未だの人は[セットアップ編](http://qiita.com/zaburo/items/86c21a1b86f526813802)を見て下さい。

ひとまず、ASP.NET 5 MVC 6のファイル構造を理解して、少しいじってみましょう。

##最初に結論

まともな何かを作るには、当然DB連携が必要になるが、2016年7月12日現在、DBを司るEntity Framework 7(beta5)が事実上SQL Serverにしか対応しておらず、まともな何かを開発することはできない。もちろんSQL Serverを利用すればいいのですが、その場合は、迷わずWindows上でVS使ったほうがいいので、ここでは敢えてやりません。

ドキュメント上はSQLiteには対応しているみたいなのですが、接続のための情報が無く（beta4まではあるが、それ以降、仕様が変わったらしい）、ソースまで読んでる暇がないので、ひとまず、正式リリースを待つ。なお、MySQLにもそのうち対応するらしいが、現状未対応のようです。

##ひと通り見てみる
###yoでテンプレートを選ぶ
とりあえず、yo aspnetでテンプレートを選ぶ。
dnvmおよびyeomenのセットアップが完了していれば、

```bash
yo aspnet
```
とすると、下記のような画面がでる。
![asp001](http://www.bluecode.jp/qiita/asp001.png)

という画面になるので、Web Applicationか、Web Application Simpleを選ぶ。ここではSimpleの方を選んでみます。
密かにNancyに対応している。正直MVCは肥大しすぎと思うので、Nancyをちゃんと使えるようになりたい。

そうすると、アプリケーション名（フォルダ名）を聞いてくるので、入力します。ここでは、WebAppとします。
Simpleを選んだ場合は、認証用のControllerやEntityFrameworkあたりが読み込まれないようです。

![asp001](http://www.bluecode.jp/qiita/asp002.png)

で、Enterを押すとテンプレート（WebAppというフォルダ）が、実行した階層に生成されます。
できあがったフォルダに移動して、VSCを開いてみます。

```bash
cd WebApp
code .
```
とします。初期状態だと、下記のような構造をしています。

![asp001](http://www.bluecode.jp/qiita/asp003.png)

ま、いわゆるMVCを見慣れたひとにはお馴染みの構造です。設定ファイル類はXMLからJSONにシフト！！！
要点といえば、

* Controllers : コントローラーが入っている。HomeControllerというNameControllerという命名規則。
* Views : ビューが入っている。Viewに対応したフォルダ（Home）があり、メソッドに対応したファイルがある。
* project.json : プロジェクトの設定が書かれている
* Startup.cs : 実行時プロジェクトの初期処理が行われている
* hosting.ini : kestrelでWebを起動した際のホスト名やポート設定が書かれている
* config.json : 旧Web.configのかわり？。接続文字列などを定義する。

くらいでしょうか。その他は、bowerやらgulpやらの設定ファイルなど。

###一旦起動してみる

一見、必要なファイルは揃ってそうですが、実は、必要なコンポーネントは読み込まれていません。
project.jsonの中で定義されているdependenciesなどは、

```bash
cd WebApp
dnu restore
```
を実行することで初めて取得されます。実行してみましょう。

![asp001](http://www.bluecode.jp/qiita/asp004.png)

こんな感じで必要なファイルが取得されます。


では、ちゃんと動くかWebサイトを見てみましょう。VSCでshift + command + pでVSCコンソールを開いて、>kestrelと打ち、Enterを押します。または、

```bash
cd WebApp
dnx . kestrel
```
とします。そうすると、

```bash
Started
```
と表示されるはずです。ここで、http://localhost:5000 をみてみましょう。

![asp001](http://www.bluecode.jp/qiita/asp005.png)

こんな感じで表示されたOKです。
なお、ここでの5000というポートは、hosting.iniファイルの中で指定されたものです。必要に応じて変更することもできます。

###構造を見てみる

####ルーティング

http://localhost:5000 と指定された際の動きを見てみましょう。MVCで何かリクエストが合った再、

Controller → View

と処理が流れるのが、だいたいの流れです。ルートが指定された場合、標準のControllerとそのメソッドが呼び出されているはずですが、それは、Startup.csの中で、

```csharp
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    // Uncomment the following line to add a route for porting Web API 2 controllers.
    // routes.MapWebApiRoute("DefaultApi", "api/{controller}/{id?}");
});
```
と指定されているからです。

####コントローラ

つまり、Controllersの中の、HomeControllerの中の、Index()メソッドが呼ばれているということです。
Index()メソッドは、何もせず、

```csharp
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
```
とViewを呼び出しています。

####ビュー

Viewは、

![asp001](http://www.bluecode.jp/qiita/asp006.png)

上記のような構造をしており、HomeControllerのIndex()により、Views->Homeフォルダの中のIndex.cshtmlが表示されています。

Index.cshtmlは、\<body>以下の内容しか持っていない。。。つまりテンプレートが適用されているのですが、そのテンプレートは、

> _Layout.cshtml

です。この_Layout.cshtmlの中の、

>@RenderBody()

部分に、Index.cshtmlの内容が出力されます。
そもそも、なぜデフォルトで_Layout.cshtmlが適用されているかというと、

>_ViewStart.cshtml

の中で、

```csharp
@{
    Layout = "_Layout";
}
```
と指定されているからです。Layout行をコメントアウトすると、何も読み込まれません。

各ページでテンプレートを使わない、あるいは選ぶ場合は、各ページの頭に、

```csharp
@{
    Layout = "";
}
```
などとしてやる。

##ちょっといじってみる

やっと本題。簡単なコントローラとビューを作って動くか試してみましょう。

###やること

ほんとうに基本的なことだけ。

* HogeControllerを作り、単にビューを呼び出すIndex()を実装。
* Hogeフォルダを作成し、Index.cshtmlを用意。
* Hello Hoge!と出力

以上。

###コントローラーを作る

手書きでもいいが、yoがやってくれる。Controllersフォルダにおいて、

```bash
yo aspnet:MvcController HogeController
```
を実行。すると、ひな形ができる（が、内容が微妙）。

```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace MyNamespace
{
    public class HogeController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {
            return View();
        }
    }
}
```
Namespaceの設定はやってくれないようなので、Homeとかを見て適切に書き換えます。今回は、Index()でreturn View();をしたかったのでそのままにします。

###ビューを作る

まず、Viewsフォルダに、Hogeフォルダを作ります。その中に、Index.cshtmlを作ります。一応、yoにもコマンドが有るようですが、簡単なので使いません。

```Index.cshtml
<h3>Hello Hoge!</h3>
```
とだけします。

###アクセスしてみる

####注意！
すでに、kestrelを起動している場合は、一度、コンソールを閉じ、再起動します。そうしないと、Controller等の変更は反映されません。

####アクセス
>http://localhost:5000/Hoge/Index

としてみます。いかがでしょう？

![asp001](http://www.bluecode.jp/qiita/asp007.png)

こんな感じで表示されたでしょうか？ 標準でBootstrap3.xが読み込まれているようです。

####値の受渡し

コントローラーで、ViewBagに代入。

```csharp
ViewBag.foo = "foo";
return View();
```

ビューで、表示

```cshtml
@ViewBag.foo
```

とする。DBのSelect結果などは、下記のようにオブジェクトでそのまま受け渡したりできるが、それはまた別の機会に。

```csharp
//linq
var query = from t in obj.talble
            select t;

return View(query)
```

```cshtml
@model IEnumerable<obj.table>
@foreach(var item in Model)
{
	@item.name<br>
}
```

###その他
他にもいろいろ試したいことはありますが、とりあえずここまで。
特にDBアクセス（特にMySQL）は是非とも試して見たいところですが、冒頭の理由で未だ使えません。
使えるようになれば再度編集したいと思います。