Blazor

Triển khai nhiều Blazor WebAssemblys trong MVC Core ASP.NET

Ngày tạo trang :

môi trường

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

Lúc đầu

Mẹo này giả định kiến thức của bạn về "Chạy Blazor WebAssembly trong ASP.NET Core MVC View", vì vậy nếu bạn không biết cách chạy Blazor Assembly trên MVC ASP.NET Core, hãy xem bài viết đó.

Phương pháp trước đây cho phép bạn chỉ đặt một Lắp ráp Blazor, vì vậy Mẹo này cho phép bạn đặt nhiều hơn một.

Tạo hai Hội nghị Blazor

Bạn có thể chắc chắn rằng hai Hội đồng Blazor đang hoạt động tương ứng, vì vậy bạn có thể làm bất cứ điều gì Hội đồng Blazor. Hãy làm cho nó để bạn có thể thấy sự khác biệt trong thời gian này. Ở đây, màu sắc của menu bên trái được thay đổi cho trạng thái ban đầu của dự án.

Xuất bản từng dự án và chuẩn bị tệp.

tạo ra một dự án MVC cốt lõi ASP.NET

Điều này cũng dựa trên các mẹo trước để tạo ra một dự án. Khi bạn đã tạo dự án của mình, hãy thêm 'trong Microsoft.AspNetCore.Components.WebAssembly.Server NuGet'.

Khắc phục _Layout.cshtml

Điều này cũng giống như lần trước.

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

Thêm trang cho hai Hội nghị Blazor

Lần này, chúng ta sẽ có hai quan điểm để hiển thị mỗi Hội đồng Blazor.

HomeController thêm hai hành động vào . Một lần nữa, phía máy chủ không làm gì đặc biệt, vì vậy chỉ cần trả lại chế độ xem.

HomeController.cs

// 省略

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

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

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

Bấm chuột phải vào hành động để thêm dạng xem. Làm ơn đi cho hai.

Quan điểm được tạo ra.

Đầu tiên, thành lập Hội đồng Blazor đầu tiên.

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>
}

Điều khác biệt so với thẻ trước đó là nội dung của thẻ cơ sở được <base href="/" /> làm bằng . <base href="/Home/Blazor1/" />

Nếu bạn thay đổi đường dẫn này, Blazor Assembly sẽ có thể tham chiếu từng tệp, chẳng hạn như dll, làm gốc của đường dẫn này trong một đường dẫn tương đối.

Tuy nhiên, đặc điểm kỹ thuật của Blazor Assembly hiện tại quy định rằng bộ điều khiển và hành động có cùng một đường dẫn, bởi vì nếu URL được xác định bởi hành động MVC không khớp với đường dẫn tương đối từ máy chủ của cơ sở này, Hội đồng Blazor sẽ thất bại khi tải.

Nhân tiện, trường hợp của đường dẫn này bị ảnh hưởng, vì vậy nếu URL tự động là chữ thường, nó phải là chữ thường.

Blazor2.cshtml Edit cũng vậy. Blazor1.cshtml Xin lưu ý rằng nó là một số khác nhau từ .

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>
}

Thêm nối kết để bạn có thể điều hướng đến trang của Blazor.

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>

Khởi động.cs thay đổi

Đường dẫn tuyến đường của Blazor WebAssembly thay đổi, vì vậy hãy bật nó cho từng đường dẫn.

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

Blazor WebAssembly Deployment

Lần trước, tôi đã đặt tệp được xuất bản trong wwwroot như nó đã được, nhưng kể từ khi tôi chỉ định một đường dẫn cho thẻ cơ sở trên mỗi trang, tôi tạo một thư mục với một đường dẫn tương tự trong wwwroot.

Sao chép nội dung của wwwroot của tệp đã xuất bản vào từng thư mục. Như index.html trước đây, nó không bắt buộc.

Thực hiện

Chạy nó để đảm bảo blazor WebAssembly trên mỗi trang hoạt động chính xác.

ASP.NET Chạy Blazor WebAssembly với chế độ xem Core MVC