ASP.NET Core で AdminLTE を使用する

AdminLTE がどんなものかについては[こちらのサンプル](https://adminlte.io/themes/AdminLTE/index2.html)をご覧ください。

## 環境

- Visual Studio 2017
- ASP.NET Core 2.0
- [AdminLTE](https://github.com/almasaeed2010/AdminLTE) 2.4.3

## 前提

ASP.NET Core MVC のテンプレートプロジェクトをベースに作成します。

## AdminLTE のインストール

ソリューションエクスプローラーでプロジェクトを右クリックし、[Bower パッケージの管理] を選択します。  
`admin-lte` で検索し、インストールします。

インストールには結構時間がかかりました。

## _Layout.cshtml の変更

`wwwroot/lib/admin-lte/starter.html` を参考にして、まずは AdminLTE の画面を適用していきます。  
変更するファイルは、ASP.NET Core の View のベースとなる `_Layout.cshtml` です。

### CSS の読み込み

`<head>` 内を修正して、CSS を読み込みます。  
ASP.NET Core では Debug/Release に応じて読み込むファイルを変更するようになっているので、それに合わせて記述します。

具体的には

- Release では `.min` のファイルを読み込む
- Release では `asp-append-version="true"` を付与する（ファイル変更時のキャッシュ対策らしい）
- パスは `wwwroot` を見ながら ASP.NET Core 用に変更する

**変更前**

```html
<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
```

**変更後**

```html
<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="~/lib/Ionicons/css/ionicons.css">
    <link rel="stylesheet" href="~/lib/admin-lte/dist/css/AdminLTE.css">
    <link rel="stylesheet" href="~/lib/admin-lte/dist/css/skins/skin-blue.css">
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/lib/Ionicons/css/ionicons.min.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/lib/admin-lte/dist/css/AdminLTE.min.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/lib/admin-lte/dist/css/skins/skin-blue.min.css" asp-append-version="true" />
</environment>
```

### JS の読み込み

`<body>` の最後のほうを修正して、JavaScript を読み込みます。  
CSS 同様に、ASP.NET Core では Debug/Release に応じて読み込むファイルを変更するようになっているので、それに合わせて記述します。

**変更前**

```html
<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
```

**変更後**

```html
<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/lib/admin-lte/dist/js/adminlte.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/lib/admin-lte/dist/js/adminlte.min.js" asp-append-version="true"></script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
```

### 表示部分の変更

#### body の変更

- `<body>` タグを `<body class="hold-transition skin-blue sidebar-mini">` へ変更します。
- 全体を `<div class="wrapper">` で囲みます（ヘッダー、サイドバー、フッター全てを囲みます）。
- メインコンテンツ部分の `<div class="container body-content">` を `<div class="content-wrapper">` へ変更します。

**変更前**

```html
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">AdminLTE</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© 2018 - AdminLTE</p>
        </footer>
    </div>
```

**変更後**

```html
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">AdminLTE</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                        <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="content-wrapper">
            @RenderBody()
            <hr />
            <footer>
                <p>© 2018 - AdminLTE</p>
            </footer>
        </div>
    </div>
```

### ヘッダーの変更

ASP.NET Core のテンプレートプロジェクトのヘッダーを全て削除し、AdminLTE 用のヘッダーに置換します。

**変更前**

```html
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">AdminLTE</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
```

**変更後**

```html
<header class="main-header">
    
    <a href="index2.html" class="logo">
        
        <span class="logo-mini"><b>A</b>LT</span>
        
        <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    
    <nav class="navbar navbar-static-top" role="navigation">
        
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>
        
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                
                <li class="dropdown messages-menu">
                    
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-envelope-o"></i>
                        <span class="label label-success">4</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 4 messages</li>
                        <li>
                            
                            <ul class="menu">
                                <li>
                                    
                                    <a href="#">
                                        <div class="pull-left">
                                            
                                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                                        </div>
                                        
                                        <h4>
                                            Support Team
                                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                                        </h4>
                                        
                                        <p>Why not buy a new awesome theme?</p>
                                    </a>
                                </li>
                                
                            </ul>
                            
                        </li>
                        <li class="footer"><a href="#">See All Messages</a></li>
                    </ul>
                </li>
                
                
                <li class="dropdown notifications-menu">
                    
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-bell-o"></i>
                        <span class="label label-warning">10</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 10 notifications</li>
                        <li>
                            
                            <ul class="menu">
                                <li>
                                    
                                    <a href="#">
                                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
                                    </a>
                                </li>
                                
                            </ul>
                        </li>
                        <li class="footer"><a href="#">View all</a></li>
                    </ul>
                </li>
                
                <li class="dropdown tasks-menu">
                    
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-flag-o"></i>
                        <span class="label label-danger">9</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 9 tasks</li>
                        <li>
                            
                            <ul class="menu">
                                <li>
                                    
                                    <a href="#">
                                        
                                        <h3>
                                            Design some buttons
                                            <small class="pull-right">20%</small>
                                        </h3>
                                        
                                        <div class="progress xs">
                                            
                                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                <span class="sr-only">20% Complete</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                
                            </ul>
                        </li>
                        <li class="footer">
                            <a href="#">View all tasks</a>
                        </li>
                    </ul>
                </li>
                
                <li class="dropdown user user-menu">
                    
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        
                        <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                        
                        <span class="hidden-xs">Alexander Pierce</span>
                    </a>
                    <ul class="dropdown-menu">
                        
                        <li class="user-header">
                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                            <p>
                                Alexander Pierce - Web Developer
                                <small>Member since Nov. 2012</small>
                            </p>
                        </li>
                        
                        <li class="user-body">
                            <div class="row">
                                <div class="col-xs-4 text-center">
                                    <a href="#">Followers</a>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <a href="#">Sales</a>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <a href="#">Friends</a>
                                </div>
                            </div>
                            
                        </li>
                        
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="#" class="btn btn-default btn-flat">Profile</a>
                            </div>
                            <div class="pull-right">
                                <a href="#" class="btn btn-default btn-flat">Sign out</a>
                            </div>
                        </li>
                    </ul>
                </li>
                
                <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</header>
```

### サイドバーの追加

`</head>` の下に AdminLTE のサイドバーを追加します。

**変更前**

ASP.NET Core のテンプレートプロジェクトにはサイドバーがないので、削除するコードはありません。

**変更後**

```html

<aside class="main-sidebar">
    
    <section class="sidebar">
        
        <div class="user-panel">
            <div class="pull-left image">
                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
            </div>
            <div class="pull-left info">
                <p>Alexander Pierce</p>
                
                <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
        </div>
        
        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search...">
                <span class="input-group-btn">
                    <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
        
        
        <ul class="sidebar-menu" data-widget="tree">
            <li class="header">HEADER</li>
            
            <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
            <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-link"></i> <span>Multilevel</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#">Link in level 2</a></li>
                    <li><a href="#">Link in level 2</a></li>
                </ul>
            </li>
        </ul>
        
    </section>
    
</aside>
```

### フッターを変更

**変更前**

```html
<div class="content-wrapper">
    @RenderBody()
    <hr />
    <footer>
        <p>© 2018 - AdminLTE</p>
    </footer>
</div>
```

**変更後**

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

<footer class="main-footer">
    
    <div class="pull-right hidden-xs">
        Anything you want
    </div>
    
    <strong>Copyright © 2016 <a href="#">Company</a>.</strong> All rights reserved.
</footer>
```

### その他

`starter.html` ではフッターの下に `Control Sidebar` の項目がありますが、これは画面右上のアイコンをクリックしたときに右側に表示されるサイドバーの部分のようです。

今回私には必要のないものだったので、この部分はコピーしませんでした。

どんなものかは[こちらのサンプル](https://adminlte.io/themes/AdminLTE/index2.html)をご覧ください。

## site.css の修正

ここまで実装したものを実際に動かしてみると分かりますが、画面の上部と下部に余分な余白が表示されています。  
これを修正するために、`wwwroot/css/site.css` を以下のように修正します。

**変更前**

```css
body {
    padding-top: 50px;
    padding-bottom: 20px;
}
```

**変更後**

```css
body {
}
```

## 完成

以上で AdminLTE の適用は完了です。

今回はとりあえず AdminLTE を適用するために、`starter.html` のコードを一切変更せずにコピーしてきました。  
なので、画像へのパスが切れていたりしていますが、ここからは各サイトに応じて修正していってください。

## 参考 URL

- [ASP.NET Core MVCにAdminLTE-2.4.2を組み込んでみる](http://heinlein.hatenablog.com/entry/2017/12/13/193400)
- [かっこいい画面が作れます。そう、「AdminLTE」ならね](http://www.casleyconsulting.co.jp/blog-engineer/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84%E7%94%BB%E9%9D%A2%E3%81%8C%E4%BD%9C%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82%E3%81%9D%E3%81%86%E3%80%81%E3%80%8Cadminlte%E3%80%8D%E3%81%AA%E3%82%89%E3%81%AD/)
- [【adminLTE】管理画面として使うときのテンプレートひな形としてまとめておく](http://kimagureneet.hatenablog.com/entry/2016/04/17/181441)
- [管理画面用のBootstrapテンプレート「AdminLTE」を利用する際に知っておきたい基礎項目](https://qiita.com/AquaMeria/items/eaf56d012242fa00f5da)
- [ASP.NET CoreのScriptTagHelperについて調べてみる](https://qiita.com/takasan/items/13fdd17a9254b74046d3)

へっぽこプログラマーの備忘録

2018/03/26

ASP.NET Core で AdminLTE を使用する

Translate

Popular Posts

Labels

Blog Archive