.NET Core 在程序集中集成Razor視圖 - savorboard－IT工程師數位筆記本

文章出處

前言

有時候，我們在開發一個程序集供其他項目引用的時候，可能需要對外輸出一些HTML的結構數據。

還有一些情況我們可能開發的是一個中間件，這個中間件需要提供一些界面來對外展示數據或者是內部的一些程序的運行信息，這個時候我們也需要一個界面來做這件事情。

那么，做這些界面最適合的結構非html莫屬，在 ASP.NET 中那就是Razor視圖了。

怎么樣才能在程序集中集成 Razor 視圖，并且能夠以 NuGet 包的形式提供出去呢？也就是說別人只需要引用包，然后在瀏覽器敲指定的地址就可以看到你提供的界面了呢？最典型的就是給你的用戶提供Dashboard界面。

其實，做到這些并不難，現在，我來教你一步一步做。

Getting Started

這里我就以一個中間件程序為例，給用戶提供一個Dashboard頁面。

1、創建 Middleware Library

首先，我們參照我的這篇文章，使用一秒鐘的時間新建一個中間件的模板項目。

這個模板項目還是 xproj 的產物，我也一直沒有時間更新，所以vs打開的時候升級一下吧。

創建一個文件件，使用 yo aspnetcore-middleware生成一個模板項目。

然后使用VS打開并升級到 2.0 版本，測試項目被我卸載掉了。

我們還需要打開 Dashboard.csproj ，添加一些我們需要引用的包。

<PackageReference Include="Microsoft.AspNetCore.Http.Extensions" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.0.0" />
<PackageReference Include="Microsoft.Extensions.RazorViews.Sources" Version="2.0.0" PrivateAssets="All" />

<DotNetCliToolReference Include="RazorPageGenerator" Version="2.0.0" />

其中RazorPageGenerator是一個工具包，他主要是用來編譯 Razor 視圖生成我們需要的Razor視圖的對象。

另外 Microsoft.Extensions.RazorViews.Sources 這個包是一個源碼包，通過 dotnet resore 還原過后你會發現項目中多個幾個class類，他們的圖標類似一個快捷方式的樣式。

這幾個第三方 class 類你可以不用，自己來寫，這樣會更加的靈活。 BaseView.cs 是編譯 Razor 的時候默認集成的基類，你可以通過修改這個類來更加另外操控編譯后的Razor對象具有的行為。

2、添加視圖文件

接下來，我們就需要添加我們用到的視圖文件了。在 Dashboard 項目下新建一個 Views 文件夾，注意文件夾名稱要用 Views。

在 Views 中添加需要的 cshtml 文件，這里要注意和 ASP.NET Core MVC 中的用法有一點不太一樣，具體關于Razor的模板引擎支持的語法可以查看這里。

在 Views 文件夾中添加如下兩個文件：

Home.cshtml

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Dashboard</title>
    
    <style>
      
    </style>
</head>
<body>
    <h1>This is Dashboard home page.</h1>
 
    <%$ include: body.html %>
</body>
</html>

body.html

<div>
    <h2>
        This is body content.
    </h2>
</div>

3、生成視圖對象class

使用 dotnet razorpagegenertor Dashboard 命令來變成生成Razor對象文件。

其中最后一個參數Dashboard為生成的文件 Home.Design.cs 的命名空間。

這個時候，其實 body.html 和 Home.cshtml 已經沒有用了，因為程序在執行的時候會執行Home.Design.cs里面的代碼。

4、調用對象class

接下來只需要在 DashboardMiddleware.cs 里面調用 Home.Design.cs 中的 Home 類就可以了

修改一下DashboardMiddleware.cs的構造函數，把不需要的Options配置類刪掉，然后修改Invoke代碼：

DashboardMiddleware.cs

public async Task Invoke(HttpContext context)
{
    await new Home().ExecuteAsync(context);
}

這里不需要再await _next(context) 來接著執行下一個中間件了，因為我們提供的頁面不應該受到MVC管道的控制，在啟動中間件的時候放到末尾即可。

現在，我們已經做好了一個中間件。我們需要建一個示例項目測試一下。

測試

新建一個 ASP.NET Core Web MVC 項目，然后引用我們剛才創建的這個項目。在 startup.cs文件中添加中間件。

public void Configure(IApplicationBuilder app)
{
    ......
    
    app.UseMVC();

    //這里可以在Library內部做成一個配置，我為了方便就直接這么寫了
    app.Map(new Microsoft.AspNetCore.Http.PathString("/dashboard"), x =>
    {
        x.UseDashboard();
    });
}

啟動項目，訪問 http://localhost:5000/dashboard 查看頁面。