　クライアント側にVue.jsをSPA（シングルページアプリケーション）ではない方法で利用することについて記述していきます。

全体

　・Vue.jsとblumaの設定（前回）
　・cssをblumaに変更（本稿）
　・バリデーションの変更
　・Vue.jsでのコンポーネントの利用

-cssをblumaに変更-

環境

「ASp.Net Core でPostgreSQLを利用してIdentityで認証を使えるようにする」で作成した環境にVue.jsを組み込み、cssフレームワークをblumaに変更します。
- VisualStudio2019 Ver.16.2.3
- ASP.NET Core 2.2
- PostgreSQL 9.6 インストール済み、接続用のアカウント作成済み
- EntityFramework
- Vue.js 2.6.10
- bluma 0.7.5

ログイン画面をスリムにしてblumaに対応させる。

　テンプレートで作成された画面はコンシューマ向けで個人が登録出来たり、SNS認証を利用したりするリンクがあるようなので、すべて削除して単純なログイン画面に変更します。

　「Pages/Shares/_Layout.cshtml」を以下のように変更します。
　メニューはblumaの「navbar」をりようして「Home」と「Privacy」のリンクのみのこしています。
　コンテンツとフッターの記述をblumaに対応させています。

_Layout.cshtml


@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"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/css/bulma.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js" integrity="sha256-ufGElb3TnOtzl5E4c/qQnZFGP+FYEZj5kbSEdJNrw0A=" crossorigin="anonymous"></script>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar has-background-info">

            <div class="navbar-brand">
                <div class="navbar-item title">
                    WebApplication1
                </div>

            </div>

            <div class="navbar-menu is-active is-tab">
                <div class="navbar-start">
                    <a class="navbar-item has-text-light" asp-area="" asp-page="/Index">Home</a>
                    <a class="navbar-item has-text-light" asp-area="" asp-page="/Privacy">Privacy</a>
                </div>
                <div class="navbar-end">
                    @if (SignInManager.IsSignedIn(User))
                    {
                        <div class="navbar-item">
                            Hello @User.Identity.Name!
                        </div>
                        <div class="navbar-item">
                            <form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/", new { area = "" })" method="post">
                                <button type="submit" class="button is-primary is-outlined">Logout</button>
                            </form>
                        </div>
                    }
                </div>
            </div>
        </nav>
    </header>

    <content class="container is-centered">
        @RenderBody()
    </content>

    <footer class="footer">
        <div class="container">
            <div class="content has-text-centered">
                &copy; 2019 - WebApplication1 -
            </div>
        </div>
    </footer>

    <script src="~/js/site.js" asp-append-version="true"></script>

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

次に「Areas/Identity/Pages/Account/Login.cshtml」を以下のように変更します。
bkumaはcssのclassのみを利用しているようなので、基本タグとclassをうまく操れば使えると思います。blumaについては、本家のページを参照するとかその他にいろいろと転がっているのでそちらを参考にしてください。ただし、blumaも発展途上のため、参考にしたページの内容が現在の仕様と異なっていることもあったので、この記述も古くなっていくので注意してください。


@page
@model LoginModel

@{
    ViewData["Title"] = "Log in";
}

<div class="section">

    <form id="account" method="post">

        <div style="width:300px;margin: 0 auto;">
            <header class="label ">
                ログイン
            </header>

            <div class="box" >

                <div class="field">
                    <label>ユーザーID</label>
                    <div class="control">
                        <input asp-for="Input.UserID" class="input" type="text" placeholder="userID"/>
                    </div>
            </div>

                <div class="field">
                    <label>パスワード</label>
                    <div class="control">
                        <input asp-for="Input.Password" class="input" type="password" placeholder="password" />
                    </div>

                    <div class="help">
                        <a id="forgot-password" asp-page="./ForgotPassword" class="text-right mt-md-3">パスワードを忘れた場合</a>
                    </div>

                    <br />

                    <div class="field">
                        <label class="checkbox help">
                            <input type="checkbox" asp-for="Input.RememberMe"/>
                            ユーザーIDとパスワードを記憶する
                        </label>
                    </div>

                </div>

                <div class="field has-text-centered">
                    <button type="submit" class="button is-primary is-outlined">ログイン</button>
                </div>
            </div>
        </div>
    </form>
</div>

さらに個人的な変更を「/wwwroot/css/site.css」に以下の内容を設定して、「.section」と「.footer」の余白を少なくしています。（blumaのページでは変数を変えるように書いていますが、cssを使っているので上書きしています）

site.css



.section {
    padding: 1rem 1rem;
}

.footer {
    padding: 1rem 1.5rem 1rem;
}

これでデバッグすると、こんな画面になります。

次回はJQueryを追放したせいで無くなってしまったデータ検証のアトリビュートによるバリデーションをどうするかを記載したいと思います。

ASP.NET Core でSPAではなくVue.jsを利用してみる（２）

全体

-cssをblumaに変更-

環境

ログイン画面をスリムにしてblumaに対応させる。