Sol_Ajax_Spa_MVC_Core

?重要なお知らせ: このリポジトリはアーカイブされています

このプロジェクトにご興味をお持ちいただきありがとうございます。 2024 年 8 月 10 日の時点で、このリポジトリをアーカイブすることを決定しました。これはどういう意味ですか？

• 新規開発の禁止:新しい機能の開発や問題の修正は積極的に行いません。
• 読み取り専用:リポジトリは読み取り専用になりました。クローンを作成することはできますが、それ以上の変更は受け付けられません。
• 代替ソリューション:代替ソリューションまたは同様のプロジェクトを探している場合は、次のリンクを検討することを検討してください: 中規模の記事: AppRun を使用して ASP.NET Core MVC アプリをシングルページ アプリにする

Asp.net コアのシングル ページ アプリケーション (Spa MVC コア)

Ajax 手法を使用して ASP.NET Core アプリケーションをシングル ページ アプリケーションに変えるためのより良いアプローチ。主なモットーは、SPA の作成に取り組みながら開発者の労力を軽減し、サーバー側とクライアント側の両方で Web アプリのパフォーマンスを向上させることです。

キーポイント

• シングルページアプリケーションを作成するために Jquery コードを記述する必要はありません。
• Ajax Spa ライブラリには、自動的に呼び出される ajax 関数が組み込まれています。
• デフォルトのサーバー側ルーティングを使用します。
• 開発者は他の JavaScript フレームワークを並行して使用することもできます。

注記

このライブラリは、Asp.net core 3.1 ～ 6.0 ソリューションに適用されます。

設定

ステップ 1:

次の nuget パッケージをソリューションにインストールします。

Nuget パッケージ マネージャーの使用:

 PM> Install-Package AjaxSpaMvcCore -Version 1.0.1

.Net CLI の使用:

 > dotnet add package AjaxSpaMvcCore --version 1.0.1

ステップ 2:

Startup.csファイルに移動し、 Configure Method に次のミドルウェアを追加します。

 app . UseAjaxSpa ( ) ;

ステップ 3:

View フォルダー内の_ViewImports.cshtmlファイルに Ajax spa タグ ヘルパー参照を追加します。

 @addTagHelper * , AjaxSpaMvcCore

注:ソリューションを構築します。

ステップ 4:

_Layout.cshtmlファイルに移動し、次の処理を実行します。

1. 次のクライアント側参照を body 終了タグの前に追加します。

 < script src =" ~/AjaxSpaResource/js/core.js " > </ script >
< script src =" ~/AjaxSpaResource/js/spa.js " > </ script >

2. RenderBody()メソッドを次の ajax spa タグ ヘルパーに置き換えます。

< main role = " main " class = " pb-3 " >
    @* @RenderBody() *@
    < ajax-spa render-body = " @RenderBody() " ></ ajax-spa >
 </ main >

ステップ5:

_ViewStart.cshtmlファイルのapplyLayoutAsync()拡張メソッドを使用して、レイアウト ページを適用します。

 @ using AjaxSpaMvcCore
@{
    // Layout = "_Layout";
    Layout = await Context . Request . ApplyLayoutAsync ( " ~/Views/Shared/_Layout.cshtml " );
}

ソリューションを構築し、ブラウザ上で Web アプリを起動します。お子様のビューがブラウザで更新されないことが通知されます。

このライブラリを使用して、Asp.net コア MVC ソリューション全体をシングル ページ アプリケーションに変換します。