・暗黙的なルール（自動で処理してくれる部分）があるため、コードだけ追って理解しようとしても分からない。そこを解説する。
ASP.Net Core(C#)で、任意のURLでリクエストを受け、期待したHTMLを返すようにする
はじめに
・Visual Studioで、ASP.Net Coreプロジェクトを作成する。
・この中に必要なファイルを作成して実装していく。
リクエストを受ける口を作成する
・リクエストを受けるControllerを作成する。
例：プロジェクト/Controllers/SampleController.cs
※Controllerファイルはviewファイルを呼び出す。
※Viewファイル＝cshtmlファイル。
※暗黙的に以下の動きをする。
・SampleControllerの場合、「プロジェクト/Views/Sample」フォルダ内を参照する。
・SampleControllerのメソッド名がIndex()だったら、上記フォルダ内の「Index.cshtml」を探して実行する。
・結果として、そこに書かれているhtmlを返すという動きになる。
返却するhtmlを作成する
・controllerからcshtmlファイルが実行されるが、ここでも暗黙的な動きがある。
・「プロジェクト/Views/Sample」フォルダ内のcshtmlファイルが実行されるが、何も指定しない場合は、「プロジェクト/Shared/_Layout.cshtml」ファイルが先に実行される。
・Layout.cshtmlファイルには、htmlタグから記載されており、ページの大枠はこちらで定義するようになっている。
・個別のcshtmlファイルは、そのページ独自の内容のみを記載する。
・例えば、読み込むjsやcssは全ページ共通にすることも多い。そういったものはLayout.cshtmlファイルに記載しておく。
・Layout.cshtmlファイルを複数定義し、好きなものを呼ぶようにすることも可能。
・個別のcshtmlファイルの方に以下のように記載をすればOK。これで「_SamplePageLayout.cshtml」を利用するようになる。
@{
Layout = "_SamplePageLayout";
}
動作確認①
・ここまでで作成したコードを実行し、以下を確認する。
・期待したURLでリクエストできること
・表示したいhtmlが返却され、表示できること
Vueを組み込み処理を実装していく
cshtmlファイルを編集し、vueを使えるようにする
・共通で読む場合はshared/～layout.cshtmlファイルでvueを使えるようにするjsを読み込む。
<script src="https://unpkg.com/vue@next"></script>
vueで処理を実装する
・vueの使い方については以下を参照して基本をおさえる。
https://v3.ja.vuejs.org/guide/introduction.html
・vueファイルを利用するために、SFC（シングルファイルコンポーネント）について理解する。
https://v3.ja.vuejs.org/guide/single-file-component.html
・シングルファイルコンポーネントを利用するために以下を追加する。
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.min.js"></script>
・個別のcshtmlファイルとvueファイルに以下を実装する。
①vueファイルをwwwroot/js/といったフォルダは以下に作成する。
この中にhtml,css,jsを記述する。
共通化できるものはvueファイルで切り出し、importして利用するようにする。
②cshtmlファイルからvueファイルをロードして利用する。
③vueファイルからリクエストするWEB-APIは、「Areas/Api/Controllers」といったフォルダは以下にcsファイルで作成する。
※作成方法参考
https://www.ipentec.com/document/csharp-asp-net-core-web-api-create-simple-api-application-using-controller
動作確認②
・②→①→③の一連の動作を確認し、問題なく動作すれば完了。
参考
・ASP.Net Core 入門（公式）
https://docs.microsoft.com/ja-jp/aspnet/mvc/overview/getting-started/
・Vue.jsガイド（公式）
https://v3.ja.vuejs.org/guide/introduction.html
・vue3-sfc-loaderについて
https://basukin.blog/2021/08/23/vue3-cdn%E3%81%A7%E3%82%82sfc%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84/
・vue3-sfc-loader（公式）
https://github.com/FranckFreiburger/vue3-sfc-loader