More than 5 years have passed since last update.

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

Last updated at 2020-02-04Posted at 2020-02-02

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

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

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

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

AdminLTE3ダウンロード
AdminLTE3を配置
ヘッダ書き換え
スクリプト書き換え
body書き換え

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

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

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

1. AdminLTE3のダウンロード

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

2. AdminLTE3の配置

zipを解凍すると、いろんなフォルダが出現する。使うのは、以下2つ。

dist
plugins

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

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

3. ヘッダの書き換え

解答したファイル群の中にある「starter.html」の中身をコピペしていく。

テンプレの

...を、まるまるAdminLTE3の...と置き換える。

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

   <!-- 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」ののとこにある3つのスクリプトのパスをコピー。

テンプレートの　...のところを、まるまる以下に置き換える。

    <!-- 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」の

からまでをコピペして、

テンプレートの

からの直前までを上書き。

6.まとめ

この通りにやれば、bodyの最初は以下のような感じになるはず。

...(中略)
    <!-- 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">
...(中略)

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

...
                <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を変更)

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

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

       <!-- 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が機能した。
めでたしめでたし。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up