Sol_Ajax_Spa_MVC_Core

？重要通知：該儲存庫已存檔

感謝您對這個項目的興趣！自 2024 年 8 月 10 日起，我們決定對該儲存庫進行存檔。這意味著什麼？

• 沒有新的開發：我們不會積極開發新功能或解決問題。
• 只讀：儲存庫現在是唯讀的。您仍然可以克隆它，但不會接受進一步的更改。
• 替代解決方案：如果您正在尋找替代解決方案或類似項目，請考慮探索以下連結：中型文章：使用 AppRun 將 ASP.NET Core MVC 應用程式製作成單頁應用程式

Asp.net core中的單頁應用程式（Spa MVC Core）

使用 Ajax 方法將 ASP.NET Core 應用程式轉變為單頁應用程式的更好方法。主要座右銘是減少開發人員在創建 SPA 和增強伺服器和客戶端 Web 應用程式效能時的工作量。

重點

• 無需編寫Jquery程式碼即可製作單頁應用程式。
• Ajax Spa 函式庫內建了 ajax 函數，該函數會自動呼叫。
• 使用預設伺服器端路由。
• 開發人員還可以並行使用其他 javascript 框架。

筆記

該程式庫將應用於Asp.net core 3.1到6.0解決方案。

設定

步驟一：

在您的解決方案中安裝以下 nuget 套件。

使用 Nuget 套件管理器：

 PM> Install-Package AjaxSpaMvcCore -Version 1.0.1

使用.Net CLI：

 > dotnet add package AjaxSpaMvcCore --version 1.0.1

步驟2：

前往Startup.cs文件，在Configure方法上新增以下中間件。

 app . UseAjaxSpa ( ) ;

步驟3：

在 View 資料夾內的_ViewImports.cshtml檔案中新增 Ajax spa 標記幫助器引用。

 @addTagHelper * , AjaxSpaMvcCore

注意：建置解決方案。

第4步：

前往_Layout.cshtml文件，執行下列程序。

1. 在結束正文標記之前添加以下客戶端引用

 < 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 core MVC 解決方案轉換為單頁應用程式。