elsa-core：4.ASP.NET Core Server with Elsa Dashboard
阿新 • • 發佈：2021-09-08
在本快速入門中，我們將瞭解一個最小的 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.WebStartup
開啟 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 頁面，我們接下來將建立該頁面。
- 建立一個名為 Pages 的新資料夾。
- 在 Pages 中，建立一個名為cshtml 的新檔案。
- 在 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 伺服器之前，所有選單項都不會正常工作。
如果覺得不錯，可以推薦收藏一下，讓我也更有動力。