ASP.NET 核心MVC中放置多個混合Web助手

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

環境

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

入門

此提示假定您知道"在 ASP.NET 核心 MVC 視圖中移動模糊 WebAssembly"，因此，如果您不知道如何在 ASP.NET 核心 MVC 中移動模糊程式集，請參閱文章。

由於在上一種方法中只能放置一個「混合程式集」，因此此提示允許放置兩個或多個。

創建兩個混合程式集

只要確保兩個混合程式集都正常工作，就可以對「混合程式集」執行任何操作。現在，請創建它，以便了解差異。在這裡，我們更改左側功能表的顏色以適合專案的初始狀態。

發佈每個項目並準備檔。

創建 ASP.NET 核心MVC專案

同樣，您將使用前面的提示創建專案。創建專案后，在 NuGet 中 Microsoft.AspNetCore.Components.WebAssembly.Server 新增 '。

修復_Layout.cshtml

這與上次相同。

<!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>
  <!-- 以下同じなので省略 -->

為兩個布洛澤爾程式集添加了一個頁面

這一次，我們將有兩個視圖來顯示每個混合程式集。

HomeController 向添加兩個操作。伺服器端不執行任何操作，因此只需返回視圖即可。

HomeController.cs

// 省略

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

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

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

右鍵按下操作以添加檢視。請做兩分鐘。

將創建檢視。

首先，配置第一個藍色程序集。

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.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>
}

與上次不同的是，base 標記的內容 <base href="/" /> 是從的 <base href="/Home/Blazor1/" /> 。

如果更改此路徑，則 Blazor 程式集可以將此路徑作為根引用每個檔，如 dll。

但是，當前 Blazor 程式集規範指定 MVC 操作確定的 URL 與此基礎主機的相對路徑不匹配，以便在載入 Blazor 程式集時出錯，因此控制器指定路徑與操作相同。

順便說一下，此路徑的大小寫是有影響的，因此，如果URL是自動小寫的，則應該為小寫。

Blazor2.cshtml 也編輯。 Blazor1.cshtml 請注意，它們與某些內容不同。

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.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>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

更改啟動.cs

由於「混合 Web 代理」路由的路徑會更改，因此請為每個路徑啟用它。

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

布拉澤爾網路阿薩姆布利的放置

上次，我已將發佈的檔放在 wwwroot 中，但由於每個頁面都為base標記指定了路徑，因此我們將為 wwwroot 建立具有類似路徑的資料夾。

將已發佈檔的 wwwroot 內容複製到每個資料夾。與上次一樣 index.html ，不需要它。

執行

運行它，以確保每個頁面上的「混合 Web 代理」正常工作。

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