如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目
在當(dāng)下這個年代 SPA 已是主流，人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態(tài)頁面，比如追求首屏加載速度的時候。最近在項目中回歸傳統(tǒng)效果還是不錯。
有的時候我們希望將視圖（Views）從主項目中分離出來，以提高項目的模塊化程度。本文將介紹如何將視圖分離到另一個 Razor 類庫項目中。這在以前 .NET Framework 下是很常見的，但是 Core 下面的資料太少了，記錄一下。
步驟 1：創(chuàng)建 Razor 類庫項目
首先，我們需要創(chuàng)建一個新的 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：復(fù)制視圖到新項目
然后，我們需要將所有的視圖文件從主項目復(fù)制到新的 Razor 類庫項目中。
步驟 3：主項目引用新項目
接下來，我們需要在主項目中添加對新 Razor 類庫項目的引用。這可以通過在主項目的項目文件中添加以下代碼來實現(xiàn)：
<ItemGroup>
<ProjectReference Include="path/to/your/razor/project.csproj" />
</ItemGroup>
步驟 4：添加視圖的掃描路徑
在主項目中，我們需要配置 Razor 視圖引擎的視圖位置格式，以便它能找到新項目中的視圖。這可以通過以下代碼來實現(xiàn)：
builder.Services.Configure<RazorViewEngineOptions>(options =>
{
options.ViewLocationFormats.Add("/Widgets/{1}/{0}" + RazorViewEngine.ViewExtension);
options.ViewLocationFormats.Add("/Widgets/Shared/{0}" + RazorViewEngine.ViewExtension);
});
步驟 5：調(diào)整靜態(tài)資源的路徑
最后，如果新項目中包含了靜態(tài)資源（如 CSS、JavaScript、圖片等），并且這些資源放在 wwwroot 文件夾下，那么這些資源會在編譯后出現(xiàn)在主項目的 wwwroot/_content/{library project name} 文件夾下。因此，我們需要在 HTML 中使用以下的路徑格式來引用這些靜態(tài)資源：文章來源：http://www.zghlxwxcb.cn/news/detail-855060.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 項目的視圖分離到另一個項目的步驟。希望這篇文章能對你有所幫助！文章來源地址http://www.zghlxwxcb.cn/news/detail-855060.html
關(guān)注我的公眾號一起玩轉(zhuǎn)技術(shù)
到了這里，關(guān)于如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(四)](https://imgs.yssmx.com/Uploads/2024/02/618813-1.png)
