ASP.NET 核心 MVC 視圖中移動“藍色網络助手”

更新頁 : 2022年7月17日星期日

頁面創建日期 : 2022年3月30日星期三

環境

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

入門

由於 Blazor WebAssembly 是一種用戶端技術，因此無論 Web 伺服器如何工作，都無關緊要。但是，要向用戶端提供 WebAssembly，至少需要伺服器端設置。現在，我們將伺服器程序作為 ASP.NET 核心 MVC 運行，以運行 Blazor WebAssembly。

創建布萊佐爾網路子

我希望這次能夠看到 Blazor WebAssembly 正常工作，因此在創建專案時，請保留配置。

項目和解決方案名稱是可選的。

附加資訊螢幕中顯示的「託管在 ASP.NET 核心」也可以充當MVC，但我們不會在此處檢查創建的專案，因為它更接近API伺服器。

發佈布魯佐爾網路子

發佈檔以將模糊 Web 助手部署到 ASP.NET 核心 MVC 專案。

右鍵按下項目並選擇「發佈」。

選擇資料夾。

將目標保留為預設值。

將顯示發佈螢幕。您可以進行各種設置，但按兩下「發佈」按鈕，將其保留為預設值。

等待發佈開始並成功完成。請注意，如果資料夾路徑很長，則可能會失敗。

您可以驗證檔案是否已在指定的資料夾中建立。如果指定了相對路徑，則相對於專案的路徑是目標。

創建 ASP.NET 核心MVC專案

接下來，ASP.NET 創建核心MVC專案。在「虛擬 Web 助理」解決方案中創建它，因為單獨打開虛擬工作室很麻煩。這一次，這兩個專案不協同工作，因此可以單獨創建它們。

項目名稱是可選的。其他設置將保留為預設值。

由於 Blazor 端已完成開發 ASP.NET 因此將核心 MVC 端的專案作為啟動。

為「混合」創建檢視

這取決於您實際創建的專案，因此請修改它以匹配該專案。我們將根據範例專案的配置進行修改。

基本上，您將修改它，使其更接近於發佈「混合程式集」時創建 index.html 的形狀。

修復_Layout.cshtml

我想引用模糊程式集的 CSS，因此 _Layout.cshtml 我可以直接在中編寫它。由於我們希望它盡可能僅應用於目標頁面，因此可以通過添加來擴展 CSS 連結，以便可以在 RenderSectionAsync 每個頁面上編寫它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

為布魯佐爾程式集添加頁面

添加顯示模糊程式集的專用頁面。 ASP.NET 核心 MVC 的常規頁面添加和過程相同。

HomeController 將以下操作新增到：伺服器端不執行任何操作，因此只需返回視圖即可。

HomeController.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor()
    {
      return View();
    }
  }
}

右鍵按下操作以添加檢視。

沒有要綁定的內容，因此請按原樣添加它。

將創建檢視。

使用「混合程式集」發佈時生成的 index.html ，如下所示：

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

添加連結以轉到「藍色」頁面。

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>