如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目

如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目

在當下這個年代 SPA 已是主流，人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面，比如追求首屏加載速度的時候。最近在項目中迴歸傳統效果還是不錯。
有的時候我們希望將視圖（Views）從主項目中分離出來，以提高項目的模塊化程度。本文將介紹如何將視圖分離到另一個 Razor 類庫項目中。這在以前 .NET Framework 下是很常見的，但是 Core 下面的資料太少了，記錄一下。

步驟 1：創建 Razor 類庫項目

首先，我們需要創建一個新的 Razor 類庫項目。在項目文件（.csproj）中，我們需要添加以下配置：

<Project Sdk="Microsoft.NET.Sdk.Razor">

	<PropertyGroup>
	 ...
		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
		<PreserveCompilationContext>false</PreserveCompilationContext>
		<SuppressDependenciesWhenPacking>false</SuppressDependenciesWhenPacking>
		<PackageId>XXX</PackageId>
	</PropertyGroup>

	<ItemGroup>
		<FrameworkReference Include="Microsoft.AspNetCore.App" />
	</ItemGroup>

</Project>

步驟 2：複製視圖到新項目

然後，我們需要將所有的視圖文件從主項目複製到新的 Razor 類庫項目中。

步驟 3：主項目引用新項目

接下來，我們需要在主項目中添加對新 Razor 類庫項目的引用。這可以通過在主項目的項目文件中添加以下代碼來實現：

<ItemGroup>
	<ProjectReference Include="path/to/your/razor/project.csproj" />
</ItemGroup>

步驟 4：添加視圖的掃描路徑

在主項目中，我們需要配置 Razor 視圖引擎的視圖位置格式，以便它能找到新項目中的視圖。這可以通過以下代碼來實現：

builder.Services.Configure<RazorViewEngineOptions>(options =>
{
    options.ViewLocationFormats.Add("/Widgets/{1}/{0}" + RazorViewEngine.ViewExtension);
    options.ViewLocationFormats.Add("/Widgets/Shared/{0}" + RazorViewEngine.ViewExtension);
});

步驟 5：調整靜態資源的路徑

最後，如果新項目中包含了靜態資源（如 CSS、JavaScript、圖片等），並且這些資源放在 wwwroot 文件夾下，那麼這些資源會在編譯後出現在主項目的 wwwroot/_content/{library project name} 文件夾下。因此，我們需要在 HTML 中使用以下的路徑格式來引用這些靜態資源：

<link href="~/_content/{library project name}/css/site.css" rel="stylesheet" />
<script src="~/_content/{library project name}/js/site.js"></script>

以上就是將 ASP.NET Core MVC 項目的視圖分離到另一個項目的步驟。希望這篇文章能對你有所幫助！

關注我的公衆號一起玩轉技術