LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ArataKinjo(金城 新)

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

Posted at

画面の作成

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

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

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

「MVC コントローラー - 空」を選択し、追加。
image.png

コントローラー名を「WorkController」で、追加。
image.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

初期はこんな感じなのですが、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

ログイン後：
image.png

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

Workへ画面遷移：
image.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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?