ASP.NET Core UI 元件開發利器 - Razor Class Library

2020-08-24 08:07 PM

依據 Roadmap，完成 ASP.NET Core 版網站 CPU 與記憶體即時監看雛型後的下一步，自然也是將功能從網站抽取成為獨立物件。之前研究 ASP.NET MVC 功能元件化時看到一個好東西 - Razor Class Library，可以將 Razor 元件 (.razor Razor Component，類似 WebForm 時代的 .ascx，用於 Blazor App)、View Component、Page、Controller、View 等 UI 元素封裝進獨立類別程式庫，跟上週我將 MVC 功能打包成可攜式元件做的事一模一樣，都在追求程式碼重複利用。差別在於我的 MVC 版靠自己土砲，在 ASP.NET Core 時代已內建專屬專案，爽度破錶。

要建立可重複使用的 ASP.NET Core UI，可開啟 Visual Studio 2019 從專案範本找到 Razor Class Library (RCL)：

預設 RCL 只支援 Razor Component，我想把 Razor Page 包成物件，故要勾選「Support pages and views」：(一度考慮把監看網頁包成 Razor Component，但我想在 HTML 也能透過 IFrame 內嵌，故維持走 Razor Page 架構，Razor Component 留到下次再玩)

RCL 專案預設會以 Area 結構擺放 Razor Page，新建專案時會產生一個 Page1.cshtml 放在 Areas/MyFeature/Pages/Page1.cshtml。在這裡出現的 Razor Page，跟 MVC Controller 一樣，專案只需參照這個 DLL 便能自動將 /MyFeature/Page1 URL 路由導向 Page1.cshtml。依我的案例，上次雛型中的 WebStatsMonitor/Index.cshtml 要搬進 RCL 專案，可對映成 Areas/WebStatsMonitor/Index.cshtml。至於網頁需要的 .js、.ttf、.css 等靜態檔，有個天大好消息，RCL 直接支援靜態檔案的封裝與部置，不需要自己用 Embedded Resource 苦哈哈搞資源內嵌，也不必扯到 VirtualPathProvider。只要在類別專案建個 wwwroot 資料夾把檔案放進去，未來便可透過 ~/_content/ClasLibraryName/xxx.xxx 存取，超級方便。

也因為如此，Index.cshtml.cs 完全不需要修改，我只調了 Index.cshtml 中 jquery.min.js 及 webstats.css 的 URL，改成 ~/_content/WebStatsMonitorCore/... 其餘直接沿用：

@page
@model WebStatsMonitorCore.Areas.WebStatsMonitor.Pages.IndexModel
@{
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Web CPU & Memory</title>
    <link href="~/_content/WebStatsMonitorCore/webstats.css" rel="stylesheet" />
</head>
<body>
    <div class="frame">
        <div class="row">
            <span class="hdr">CPU</span> <span class="field" id="cpuLoad"></span>
        </div>
        <div class="row">
            <span class="hdr">RAM</span> <span class="field" id="memUsage"></span>
        </div>
    </div>
    <script src="~/_content/WebStatsMonitorCore/jquery.min.js"></script>
    <script>
        $(function () {
            //TODO 實際運用時改走 SignalR/WebSocket 較有效率
            function refresh() {
                $.getJSON("@Url.Content("?handler=Stats")").done(function (res) {
                    var cpuCss = "";
                    var cpuValue = parseInt(res.CPU.replace("%"));
                    if (cpuValue > 85) cpuCss = "alert";
                    else if (cpuValue > 50) cpuCss = "warn";
                    $("#cpuLoad").text(res.CPU).attr("data-tag", cpuCss);
                    $("#memUsage").text(res.RAM);
                });
            }
            refresh();
            setInterval(refresh, 2000);
        });

    </script>
</body>
</html>

就這樣，開一個新 ASP.NET Core 專案，參照 WebStatsMonitorCore.dll，建一個 demo.html 用 Iframe 內嵌 _{/WebStatsMonior，薑薑薑薑}~