asp.net coreでサービス作ったから宣伝兼ねて技術公開する -2_4.画面の作成-

##画面の作成
asp.net coreでは、MVCモデルでの構築を行っております。

> MVC（Model View Controller モデル・ビュー・コントローラ）は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。 アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。

ということで、今回の画面、WORKを作ってみます。
プロジェクトの Controllers フォルダを右クリックして、「追加」→「コントローラー」を選択。

「MVC コントローラー - 空」を選択し、追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/953e6ece-7380-e2c7-a17d-39707bebec06.png)

コントローラー名を「WorkController」で、追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/2ed2927b-fc2c-6e8e-c8fe-b33d9b1a6a5e.png)


すると、ソースファイルが自動で生成してくれます。

```WorkController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace sample2_1.Controllers
{
    public class WorkController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
```

次に、Viewの作成を行います。
プロジェクト直下の Views を右クリックして、「追加」→「新しいフォルダ」をクリックし、「Work」フォルダを作成します。
[Work]フォルダを右クリックし、「Razorビュー」を選択して、「Index.cshtml」でそのまま追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/477cff61-1116-8488-b850-d62dbebc1514.png)

初期はこんな感じなのですが、HOMEのIndex.cshtmlと合わせて修正します。

```Work\Index.cshtml
@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
```

↓

```Work\Index.cshtml
@{
    ViewData["Title"] = "Work Page";
}

<div class="text-center">
    <h1 class="display-4">Working Page</h1>
</div>
```

##メニューへ追加
上部のメニューに追加します。

修正ファイルは、「Views\Shared\_Layout.cshtml」
ここにWorkへのリンクを追加すれば、メニュー上に表示されます。
ただ追加するのも面白みがないので、ログインしていればWorkメニューが表示されるようにしましょう！


```Views\Shared\_Layout.cshtml
@using Microsoft.AspNetCore.Identity
@inject SignInManager<IdentityUser> SignInManager
@inject UserManager<IdentityUser> UserManager

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - sample2_1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">sample2_1</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <partial name="_LoginPartial" />
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        @*Workメニューの追加 ここから*@
                        @if (SignInManager.IsSignedIn(User))
                        {
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-controller="Work" asp-action="Index">Work</a>
                            </li>
                        }
                        @*Workメニューの追加 ここまで*@
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - sample2_1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>
```

これで、ログイン後のメニューに表示されるようになります。


##デバッグ実行

それでは試してみましょう！

ログイン前：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/2b0bb272-ddd5-0010-5c07-ae8c9818f739.png)

ログイン後：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/992a6d47-4d78-66a8-0af2-fb4c2c251a56.png)


正しくメニューは表示できました！

Workへ画面遷移：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/720b93b7-215e-6d6b-71f6-a85b2f42c9cb.png)

おしい！
ユーザ名の表示が欠けてしまいました！

Controller側に、ユーザ名の取得処理を記載し、再実行！

```Controllers\WorkController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using sample2_1.Models;

namespace sample2_1.Controllers
{
    public class WorkController : Controller
    {
        public IActionResult Index()
        {
            /* ログインされている場合、共通受け渡しデータにユーザ名を入れておく */
            if (User.Identity.IsAuthenticated)
            {
                var user_id = "";
                var user_nm = "";
                // ユーザIDの特定
                foreach (var i in this.User.Identities)
                {
                    foreach (var n in i.Claims)
                    {
                        if (n.Type == "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier")
                        {
                            user_id = n.Value;
                        }
                        if (user_id != "") break;
                    }
                    if (user_id != "") break;
                }

                // ユーザマスタから情報取得
                using (var db = new AppDbContext())
                {
                    // [出力]
                    foreach (var mUser in db.MUsers.Where(m => m.UserId == user_id))
                    {
                        user_nm = mUser.UserNm;
                        break;
                    }
                }

                ViewData["user_nm"] = user_nm;
            }



            return View();
        }
    }
}
```

本来はこのユーザ名取得処理は関数化しているのですが、割愛。
再実行！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/a4285629-da6a-580e-ded3-97da382ff6f4.png)

正しく表示させることが出来ました。
これからこのWorkページに色々コンテンツを詰め込んで行こうと思います。

---

【是非お試しください】※完全無料です
TanaToru -本棚管理サービス-
　https://app.zero-one-system.co.jp/TanaToru/