3月 2018

Home › Archives for 3月 2018

2018/03/31

ASP.NET Core のプロジェクトから Bower を削除する

ASP.NET Core で npm を使用する

## 環境  - Visual Studio 2017 - Node.js v8.9.4  ## package.json の作成  ### Visual Studio で作成  ソリューションエクスプローラーからプロジェクトを右クリックし、[追加] > [新しい項目] を選択します。  [npm 構成ファイル] を追加します。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40DvG-yQtGM1VwWr399_5Obb63tnhzx-TC1KBkokE3LoRgS_Qr_RAsPm36obnTmEHOLdJNu16qZkbPTuFVQtREUWQJuCWybfRHeTrsq1T_L-q38A55Cc1MvfM-tg7qn53hqwaHCMECtw/s1600/npm01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40DvG-yQtGM1VwWr399_5Obb63tnhzx-TC1KBkokE3LoRgS_Qr_RAsPm36obnTmEHOLdJNu16qZkbPTuFVQtREUWQJuCWybfRHeTrsq1T_L-q38A55Cc1MvfM-tg7qn53hqwaHCMECtw/s320/npm01.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> すると、以下の内容で `package.json` が作成されます。  ```json {   "version": "1.0.0",   "name": "asp.net",   "private": true,   "devDependencies": {   } } ```  ### npm で作成  以下のコマンドで作成することもできます。  ```sh > npm init ```  ## パッケージのインストール  ### Visual Studio からインストール  `package.json` を変更します。   `package.json` 自体の書き方については省略します。  ```json {   "version": "1.0.0",   "name": "asp.net",   "private": true,   "devDependencies": {     "bootstrap": "^3.3.7",     "jquery": "^2.2.0",     "jquery-validation": "^1.14.0",     "jquery-validation-unobtrusive": "^3.2.6"   } } ```  ソリューションエクスプローラーから `package.json` を右クリックし、[パッケージの復元] を選択するとインストールされます。  プロジェクトルートに `node_modules` というフォルダが作成され、そこにパッケージがダウンロードされています。  ### Package Installer  Visual Studio の拡張機能に `Package Installer` というのがあり、これを使えばもっと簡単にインストールすることもできます。  Visual Studio のメニューから、[ツール] > [拡張機能と更新プログラム] を選択します。  [オンライン] から [Package Installer] をダウンロードします。   （`npm` で検索するとすぐに見つかります。）  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUylb_fdhM3mLA7u5dTcDjbePyqCs2QcU8_vaSzrS0iC1PvZlXtHi5-HHqqmig8yvEhrp8hUcJEeZap8390kqtnuL_fr_n10EM4eHOExa0rw5M8D9hIWIbkQBriLkTVMN89_HD6Qp0wI/s1600/npm02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUylb_fdhM3mLA7u5dTcDjbePyqCs2QcU8_vaSzrS0iC1PvZlXtHi5-HHqqmig8yvEhrp8hUcJEeZap8390kqtnuL_fr_n10EM4eHOExa0rw5M8D9hIWIbkQBriLkTVMN89_HD6Qp0wI/s320/npm02.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> ダウンロード後は、一度 Visual Studio を再起動するとインストールされます。  パッケージをインストールするには、プロジェクトを右クリックし、[Quick Install Package] を選択します。  コンボボックスで `npm` を選択し、インストールしたいパッケージ名を入力して `install` をクリックするとインストールされます。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOK9W8ubG3ieRlKNIOLpc90R0hthL7_rivwL0mLnDc5SokaQryFOfF4hwNUxMwSS7xa65EVsT04DI2ksFJEbTPwY3_NXziIlY7tigF4CsMSZjCItWE9veK3rQSD9yE8cYyxd1-gu-G3I/s1600/npm03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOK9W8ubG3ieRlKNIOLpc90R0hthL7_rivwL0mLnDc5SokaQryFOfF4hwNUxMwSS7xa65EVsT04DI2ksFJEbTPwY3_NXziIlY7tigF4CsMSZjCItWE9veK3rQSD9yE8cYyxd1-gu-G3I/s320/npm03.png" width="320" height="104" data-original-width="457" data-original-height="149" /></a> ### npm からコマンドでインストール  npm で直接インストールすることもできます。   例えば以下のような感じです。  ```sh >npm install jquery --save-dev ```  インストールしたパッケージを自動的に `packages.json` に追加 `--save-dev` を指定します。 デフォルトではパッケージのバージョンは最新となります。  ## このあとは  前述したとおり、npm でインストールしたパッケージは `node_modules` に配置されます。   実際に ASP.NET Core で Web アプリケーションを動作させる場合は、`wwwroot` に配置する必要があります。   これを自動化するためには gulp を使用するそうですが、それはまた今度書きます。  ## 参考 URL  - https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower - https://www.linkedin.com/pulse/use-npm-instead-bower-gulp-grunt-visual-studio-aspnet-naghizadeh

Visual Studio のプロジェクト間でファイルを共有する

Visual Studio

2018/03/28

NO IMAGE

ASP.NET Core におけるフロントエンドのパッケージ管理

ASP.NET Core Visual Studio

2018/03/27

NO IMAGE

MVC における ViewModel とは？

ASP.NET Core MVC

いろいろ調べた結果を私なりにまとめてみたいと思います。  一応環境としては ASP.NET Core (現時点のバージョンは 2.0) を前提としています。  ## MVC における ViewModel とは  ViewModel は、特定の View で使用されるデータモデルを表すクラスです。  Model にあるクラスはドメインモデルであり、View に表示するデータモデルとは必ずしも一致しません。   また、それらには View に表示されないデータなども含まれていたりしますし、View には複数の Model から取得したデータを表示したいことがあります。  ちなみに、ASP.NET Core では View に複数の Model を含めることが出来ません。   例えば、以下のような Model がある場合。  **Model**  ```cs public class Student {     public int Id {get; set;}     public string Name {get; set;} }  public class Subject {     public int SubjectID {get; set;}     public string SubjectName {get; set;} } ```  View に以下のように書くとエラーとなります。  **View (Razor)**  ```html @model ProjectName.Model.Student @model ProjectName.Model.Subject ```  従って、複数の Model のプロパティを View に表示したい場合には、ViewModel を作成する必要があります。  また、ViewModel を作成することで、以下のようなメリットもあります。  - Model から取得したデータを View 用に整形したり書式設定したりできる - Model と View の間のやりとりがシンプルになる - View をドメインモデルと切り離して検証できる  ## ViewModel の作成  ### 命名規則はどうするか？  例えば以下のような命名規則があるようです。  - `{Controller}{Action}ViewModel.cs` - `{Controller}{Action}VM.cs`  個人的には省略したくないので、長くなりますが前者のほうが好みです。  尚、ASP.NET Core 2.0 のテンプレートでは、`ErrorViewModel.cs` というファイルがデフォルトで存在しています。  ### フォルダ構成はどうするか？  例えば、以下のような配置があるようです。  - Models フォルダの配下に ViewModel のファイルを配置 - プロジェクトのルートに ViewModels フォルダを作成し、その配下に ViewModel ファイルを配置  ViewModel は Model に従属しているわけではないと思うので、個人的には後者のほうが好みです。  尚、ASP.NET Core 2.0 のテンプレートでは、`Models` フォルダの配下に `ErrorViewModel.cs` がありました。  ### 具体的なコード例  一般的に、ViewModel には View に表示されるデータ（プロパティ）のみが含まれ、それ以外のデータが含まれていてはいけないようです。  前述したコードを ViewModel を使って実装すると以下のようになります。  **ViewModel**  ```cs public class StudentViewModel {     public int Id {get; set;}     public string Name {get; set;}     public int SubjectID {get; set;}     public string SubjectName {get; set;} } ``` **View (Razor)**  ```html @model ProjectName.StudentViewModel ```   また、ViewModel は継承を使って以下のように書くこともできます。  ```cs public class StudentViewModel:Subject {     public int Id {get; set;}     public string Name {get; set;} } ```  ## 参考 URL  - http://code.i-harness.com/ja/q/a8d3fc - http://code.i-harness.com/ja/q/a228d - http://www.atmarkit.co.jp/fdotnet/scottgublog/nerddinner/part06.html - http://sampathloku.blogspot.jp/2012/10/how-to-use-viewmodel-with-aspnet-mvc.html

ASP.NET Core で AdminLTE を使用する

AdminLTE ASP.NET Core

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` で検索し、インストールします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Js2g0_TdR75fVIpXjandaZ_5rgSN5G2XaKpOlC46ul5G8yNTaB-bQxICWkMf-tTAW8rtjNzZH-1yrapNmRnsHuEJmz7kskEXjdOoShLml9Q3jXLHwchNYN3MMjcC_s0H7CAwdYXUZG0/s1600/adminlte01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Js2g0_TdR75fVIpXjandaZ_5rgSN5G2XaKpOlC46ul5G8yNTaB-bQxICWkMf-tTAW8rtjNzZH-1yrapNmRnsHuEJmz7kskEXjdOoShLml9Q3jXLHwchNYN3MMjcC_s0H7CAwdYXUZG0/s320/adminlte01.png" width="320" height="175" data-original-width="777" data-original-height="424" /></a> インストールには結構時間がかかりました。  ## _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 の適用は完了です。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CM-KSuwwrmJ90jtypUb9v3_0uNF2t991ZLzvlQYKZncMWzl2GfIQ_R7dSY8C2WeQxgfdbFqsUHrd0ah1MwIYtHMQzZvzeKqqnnD-1BsCHYjeXmOehJyVcHxlXGVnEY0y7AWJM-vgb-o/s1600/adminlte02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CM-KSuwwrmJ90jtypUb9v3_0uNF2t991ZLzvlQYKZncMWzl2GfIQ_R7dSY8C2WeQxgfdbFqsUHrd0ah1MwIYtHMQzZvzeKqqnnD-1BsCHYjeXmOehJyVcHxlXGVnEY0y7AWJM-vgb-o/s320/adminlte02.png" width="320" height="187" data-original-width="1430" data-original-height="837" /></a> 今回はとりあえず 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/23

NO IMAGE

NuGet Package を作成する

.NET Core .NET Framework Visual Studio

2018/03/20

NO IMAGE

[C言語] 指示付きの初期化子／指示初期化子（designated initializer）

C/C++

2018/03/19

NO IMAGE

GitHub で fork する意味

GitHub

2018/03/15

NO IMAGE

Visual Studio Code で Markdown 内に記述した PlantUML のライブプレビューを行う

PlantUML Visual Studio Code

2018/03/11

NO IMAGE

C# で Gmail を使ってメールを送信する

TortoiseGit でマージ済みのローカルブランチを削除する

TortoiseGit

リモートのブランチの場合、GitHub の Pull Request や GitLab の Merge Request ではマージ時にブランチを削除できますし、GitHub や GitLab 上で削除もできるので、私の場合は特に悩んだことがありません。  じゃあローカルのブランチはどうやって削除するのかとググってみたら、いろいろコマンドが見つかります。  TortoiseGit で GUI に頼りきっている身としてはこれも GUI で出来ないかなと思い、いろいろ触ってみると以下のやり方が一番簡単かなと思いました。  ただし、マージ済みのブランチを自動で一括削除するのではなく、目視で確認して消す方法です。  ## ローカルのブランチを削除  右クリック > [TortoiseGit] > [リビジョングラフ]  グラフが表示されるので、消したいブランチが他のブランチにマージされているかどうかを確認します。  問題なければ、消したいブランチを右クリックして [削除] を選択します。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv7HeeHnF-MrUUxu7Z2dbS7lJp5SlKZIsF4ryjB3DCLZKouafMiZqHVJqsnUv1UJMqs5B2ucRx3jLYa3PuJwHNUtIofRQcuagwiyIDitARmU3rjTo9r5Z8EhXbjxcLuN8QTHbeLRRJBw/s1600/%25E7%2584%25A1%25E9%25A1%258C.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv7HeeHnF-MrUUxu7Z2dbS7lJp5SlKZIsF4ryjB3DCLZKouafMiZqHVJqsnUv1UJMqs5B2ucRx3jLYa3PuJwHNUtIofRQcuagwiyIDitARmU3rjTo9r5Z8EhXbjxcLuN8QTHbeLRRJBw/s320/%25E7%2584%25A1%25E9%25A1%258C.png" width="320" height="240" data-original-width="470" data-original-height="353" /></a>

2018/03/06

NO IMAGE

Material Design In XAML Toolkit でカスタムカラーを使用する

MaterialDesignInXamlToolkit WPF

自分で色を設定したい場合は、`App.xaml` で以下のように定義します。  ```xml <Application x:Class="MyApp.App"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              xmlns:local="clr-namespace:MyApp">    <Application.Resources>        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />            </ResourceDictionary.MergedDictionaries>                        <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#744CE0"/>            <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FFFFFF"/>            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#6134D9"/>            <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>            <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#4D1DCF"/>            <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>                        <SolidColorBrush x:Key="SecondaryAccentBrush" Color="#5C5B5E"/>            <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>        </ResourceDictionary>    </Application.Resources></Application>```  ## 参考 URL  - https://github.com/ButchersBoy/MaterialDesignInXamlToolkit/wiki/Custom-Palette-Hues

2018/03/04

NO IMAGE

コンソールから WPF アプリケーションを起動した場合にコンソールに何も出力されない

.NET Framework

テンプレートテスト

2018/03/31

ASP.NET Core のプロジェクトから Bower を削除する

2018/03/30

ASP.NET Core で npm を使用する

2018/03/29

Visual Studio のプロジェクト間でファイルを共有する

2018/03/28

ASP.NET Core におけるフロントエンドのパッケージ管理

2018/03/27

MVC における ViewModel とは？

2018/03/26

ASP.NET Core で AdminLTE を使用する

2018/03/23

NuGet Package を作成する

2018/03/20

[C言語] 指示付きの初期化子／指示初期化子（designated initializer）

2018/03/19

GitHub で fork する意味

2018/03/15

Visual Studio Code で Markdown 内に記述した PlantUML のライブプレビューを行う

2018/03/11

C# で Gmail を使ってメールを送信する

2018/03/07

TortoiseGit でマージ済みのローカルブランチを削除する

2018/03/06

Material Design In XAML Toolkit でカスタムカラーを使用する

2018/03/04

コンソールから WPF アプリケーションを起動した場合にコンソールに何も出力されない

Translate

Popular Posts

Labels

Blog Archive