在本快速入門中，我們將瞭解一個最小的 ASP.NET Core 應用程式，該應用程式承載 Elsa Dashboard 元件並將其連線到 Elsa Server。

ElsaDashboard + Docker

儘管能夠設定您自己的 Elsa Dashboard 專案以自定義某些方面很有用，但在許多情況下，您可能會發現基本儀表板是連線到 Elsa 伺服器所需要的。

Elsa 附帶了一個名為 ElsaDashboard.Web 的預製專案，您可以將其配置為與現有的 Elsa 伺服器通訊。此外，您還可以構建和執行一個 Dockerfile。

有關更多資訊，請檢視 ElsaDashboard + Docker 快速入門。

我們會：

  • 建立 ASP.NET Core 應用程式。
  • 安裝 Elsa Dashboard 元件。

專案

建立一個名為 ElsaQuickstarts.Server.Dashboard 的新的空 ASP.NET Core 專案：

dotnet new web -n "ElsaQuickstarts.Server.Dashboard"

CD 到建立的專案資料夾中：

cd ElsaQuickstarts.Server.Dashboard

新增以下包：

dotnet add package Elsa.Designer.Components.Web

Startup

開啟 Startup.cs 並將其內容替換為以下內容：

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.DependencyInjection;

namespace ElsaQuickstarts.Server.Dashboard

{

    public class Startup

    {

        public void ConfigureServices(IServiceCollection services)

        {

            services.AddRazorPages();

        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

        {

            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints => { endpoints.MapFallbackToPage("/_Host"); });

        }

    }

}

_Host.cshtml + _ViewImports.cshtml

請注意，該應用程式將始終提供 _Host.cshtml 頁面，我們接下來將建立該頁面。

  1. 建立一個名為 Pages 的新資料夾。
  2. 在 Pages 中，建立一個名為cshtml 的新檔案。
  3. 在 Pages 中，建立一個名為cshtml 的新檔案。

將以下內容新增到 _ViewImports.cshtml：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

並將以下內容新增到_Host.cshtml：

@page "/"

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Elsa Workflows</title>

    <link rel="icon" type="image/png" sizes="32x32" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-16x16.png">

    <link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/fonts/inter/inter.css">

    <link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.css">

    <script src="/_content/Elsa.Designer.Components.Web/monaco-editor/min/vs/loader.js"></script>

    <script type="module" src="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.esm.js"></script>

</head>

<body>

<elsa-studio-root server-url="https://your-elsa-server-url" monaco-lib-path="_content/Elsa.Designer.Components.Web/monaco-editor/min">

    <elsa-studio-dashboard></elsa-studio-dashboard>

</elsa-studio-root>

</body>

</html>

執行

執行程式並開啟 Web 瀏覽器到主頁（如果您不更改 launchSettings.json，通常會自動發生）：

在您確保將元件指向正在執行的 Elsa 伺服器之前，所有選單項都不會正常工作。