ASP.NET Core 3.0 にAdminLTE3を実装(2020/02/04修正)

題記の通り、AdminLTE3を.NET Coreのテンプレに上書きして、使えるようにしただけのお話。

似たような話はいろんな所で書かれているんだろうけど、メモ書き程度に残す。

ていうか残さないと忘れそう。まだまだ初心者だし。


て、さっさと結論を書くと、以下の手順に沿って実装。


1. AdminLTE3ダウンロード
2. AdminLTE3を配置
3. ヘッダ書き換え
4. スクリプト書き換え
5. body書き換え

うん、いたって普通ですね････

ぶっちゃけスクリプトのパスさえ間違えなければ誰でもできるんだろうな････

というわけで、順に雑に説明していく。

### 1. AdminLTE3のダウンロード
Googleさんに聞いて、公式サイトからダウンロード。

### 2. AdminLTE3の配置
zipを解凍すると、いろんなフォルダが出現する。使うのは、以下2つ。
- dist
- plugins

この2つを配置する･･･

テンプレートの「wwwroot」の直下に「AdminLTE3」というフォルダを作成し、その下に「dist」と「plugins」をコピーする。

### 3. ヘッダの書き換え
解答したファイル群の中にある「starter.html」の中身をコピペしていく。

テンプレの<head>...</head>を、まるまるAdminLTE3の<head>...</head>と置き換える。

このとき、パスの記載を以下のように変えておく。

``` HTML
   <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="~/AdminLTE3/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/AdminLTE3/css/adminlte.min.css">
```

### 4.スクリプトの書き換え
「starter.html」の <!-- REQUIRED SCRIPTS --> のとこにある3つのスクリプトのパスをコピー。

テンプレートの　<environment include="Development">...</environment>のところを、まるまる以下に置き換える。

``` HTML
    <!-- jQuery -->
    <script src="~/AdminLTE3/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="~/AdminLTE3/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="~/AdminLTE3/js/adminlte.min.js"></script>

```

### 5. bodyの置き換え
「starter.html」の<body class="hold-transition sidebar-mini">から</aside>までをコピペして、

テンプレートの<body>から<partial name="_CookieConsentPartial" />の**直前まで**を上書き。

### 6.まとめ
この通りにやれば、bodyの最初は以下のような感じになるはず。

``` HTML
...(中略)
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="~/AdminLTE-3.0.2/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/AdminLTE-3.0.2/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
...(中略)
```

で、最後のほうがこんな感じ。

``` HTML
...
                <p>Sidebar content</p>
            </div>
        </aside>

        <partial name="_CookieConsentPartial" />

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; 2019 - AzureWebTest</p>
            </footer>
        </div>
    </div>
    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="~/AdminLTE3/plugins/jquery/jquery.min.js"></script>
...
```

テンプレやらAdminLTE3の画像やらが微妙に残ったりしてて、デザインが崩れたりするので、そこらへんはテキトーにいじってなんとかすればOK･･･

とりあえずこうしたらスクリプトとかは無事動いたので、あとは自分の好みで画像変えたりなんだりして遊ぶ感じですねー。

とりあえずこれでいろいろとHTML5やJavaScriptのお勉強を進められそうだ･･･

※ 2020/02/04
見た目だけそれっぽくなってるだけで、新しいコントローラーとかを実装したらViewが表示されなくて詰んだ。

ASP.NET CoreのViewで実装した部分は、RendorBodyのところで使われる。

そのRendorBodyの上に、AdminLTEのテンプレを脳死でコピペしたから、新しいControllerとViewを実装したのに一見して表示されないように見えていた･･･

ということで、RenderBodyのあたりを、以下のように修正。(classを変更)

``` HTML
        <div class="content-wrapper">
            @RenderBody()
            <hr />
```

ベタ張りしたbodyの一部を削除。削除するのは以下。

``` HTML
       <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
･･･(中略)･･･
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
            <div class="p-3">
                <h5>Title</h5>
                <p>Sidebar content</p>
            </div>
        </aside>

```

この修正をしたあとにデバッグしたら、ちゃんとControllerとViewが機能した。
めでたしめでたし。