SPA ではなく ASP.NET Core MVC でサイトを構築しながら、 Vue.js を使い部分的にリッチなコンポーネントを実装したいと言った場合に、「.vue」拡張子の単一ファイルコンポーネントをそのまま読み込めたら便利ですよね。
jsDelivr (CDN) から vue@2.6.12 と http-vue-loader@1.4.2 を読み込み、自作した「Hello.vue」をコンパイル無しでレンダリングしたいと思います。
ただ、「.vue」の拡張子は ASP.NET Core では未定義の為、ファイル読み込み時に 404 Not Found としてエラーになってしまうので、Startup.cs の app.UseStaticFiles() のオプションで、ファイル拡張子とMIMEタイプを関連付ける必要があります。
モダンなブラウザーではJPEG形式やPNG形式のファイルより軽量なWebP形式の画像を表示する事が可能です。
ただ、 Safari 14.0 より古いバージョンのブラウザー等を使っている場合などは、WebPだけを指定してしまうと画像が表示できなくなる為、<picture> タグなどで併記したり、スクリプトで制御したりが必要となります。
WebP 形式に対応したブラウザーで同名の WebP ファイルがサーバー上に存在する場合に、拡張子を置き換えて HTML を出力させ、 WebP ファイルが表示できない場合は src で指定されたファイルをそのまま表示させるタグヘルパーを作成します。
サーバー上にファイルが存在するかどうかで処理や表示を切り替えたりする際には、仮想パスで指定されるとサーバー上の物理パスに変換する必要があったりします。
しかし、 ASP.NET Core では Server.MapPath() が無いため、簡単に変換する事ができません。
wwwroot までの物理パスを取得するには、コントローラーのコンストラクターで HostEnvironment を受け取っておき、 WebRootPath を参照します。
ファイルが存在するかどうかをチェックする場合は、この WebRootPath にディレクトリー名やファイル名を連結したパスを評価しなければなりません。
そこで、 HostEnvironment にアプリケーションルートからの仮想パスを物理パスに変換する拡張メソッドを用意したいと思います。
ASP.NET Core で wwwroot 配下にある静的ファイル へのアクセスに対して HTTP ヘッダーに "Cache-Control" を設定する事ができます。
ブラウザー側でのキャッシュ期間を設定するとリクエストを軽減させる事ができますが、同名のファイルをアップロードしなおしても パスが一緒のためキャッシュが優先 されてしまいます。
ASP.NET Core で wwwroot 配下にある静的ファイル(画像やスタイルシート、スクリプトなど)へのアクセスに対して HTTP ヘッダーに "Cache-Control" を設定する事ができます。
ブラウザー側でのキャッシュ期間を設定する事でリクエストを軽減させたい場合は、Startup.cs の Configure() 内で UseStaticFiles() を書き換えて、レスポンスのヘッダーに "Cache-Control" を追加します。
ASP.NET Core MVC では、 Razor 構文を用いて Model/ViewBag/ViewData などの値( Unicode 文字)をビューに埋め込むとマルチバイト文字を HTML エンコードしてくれますが、「ページのソースを表示」で人間が読むには可読性が悪くてデバッグしにくいです。
今回は Home/Index ビューの ViewData["Title"] を「ホーム：ABCあいうえおdef漢字123ＧＨＩ」に変えて、全角文字をテストします。
@{
ViewData["Title"] = "ホーム：ABCあいうえおdef漢字123ＧＨＩ";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
<hr />
<p>@(ViewData["Title"])</p>
</div>ASP.NET Core MVC では、タグヘルパーを使用する事で href を自動で生成する事ができます。
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>実行時にルーティングによって生成されるURLは href="/Home/Privacy" となります。この URL を href="/home/privacy" と小文字にしたい場合は、 Startup.cs の ConfigureServices() 内で AddRouting() のオプションで LowercaseUrls を true に設定します。
ASP.NET Core MVC では、タグヘルパーを使用する事で href を自動で生成する事ができます。
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>実行時にルーティングによって生成されるURLは href="/Home/Privacy" となります。この URL を href="/Home/Privacy/" と末尾にスラッシュを追加したい場合は、 Startup.cs の ConfigureServices() 内で AddRouting() のオプションで AppendTrailingSlash を true に設定します。