Blazor •

Wdrażanie wielu zestawów Blazor WebAssemblys w ASP.NET Core MVC

Data utworzenia strony :

środowisko

Visual Studio
  • Program Visual Studio 2019
Platforma .NET
  • PLATFORMA .NET 5.0

Na początku

Ta wskazówka zakłada twoją wiedzę na temat "Uruchamianie Blazor WebAssembly w ASP.NET Core MVC View", więc jeśli nie wiesz, jak uruchomić Blazor Assembly na ASP.NET Core MVC, zobacz ten artykuł.

Poprzednia metoda pozwala umieścić tylko jeden zespół Blazor, więc ta wskazówka pozwala umieścić więcej niż jeden.

Utwórz dwa zestawy Blazor

Możesz upewnić się, że dwa zespoły Blazor działają odpowiednio, więc możesz zrobić wszystko, co jest Zgromadzeniem Blazora. Zrób to, abyś na razie mógł zobaczyć różnicę. Tutaj kolor lewego menu jest zmieniany dla początkowego stanu projektu.

Opublikuj każdy projekt i przygotuj plik.

tworzenie projektu MVC ASP.NET Core

Jest to również oparte na wskazówkach przed utworzeniem projektu. Po utworzeniu projektu dodaj "in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Poprawka _Layout.cshtml

To jest to samo, co ostatnim razem.

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

Dodawanie stron dla dwóch zespołów Blazor

Tym razem będziemy mieli dwa widoki, aby pokazać każde Zgromadzenie Blazora.

HomeController dodaj dwie akcje do . Ponownie, strona serwera nie robi nic szczególnego, więc po prostu zwróć widok.

HomeController.cs

// 省略

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

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

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

Kliknij akcję prawym przyciskiem myszy, aby dodać widok. Proszę iść za dwoje.

Widok zostanie utworzony.

Najpierw załóż pierwsze Zgromadzenie Blazora.

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

To, co różni się od poprzedniego, to to, że zawartość znacznika bazowego składa się <base href="/" /> z . <base href="/Home/Blazor1/" />

Jeśli zmienisz tę ścieżkę, Blazor Assembly będzie mógł odwoływać się do każdego pliku, takiego jak dll, jako katalogu głównego tej ścieżki w ścieżce względnej.

Jednak bieżąca specyfikacja zestawu Blazor określa, że kontroler i akcja mają tę samą ścieżkę, ponieważ jeśli adres URL określony przez akcję MVC nie jest zgodny ze ścieżką względną z hosta tej bazy, zestaw Blazor nie powiedzie się podczas ładowania.

Nawiasem mówiąc, wpływa to na wielkość liter tej ścieżki, więc jeśli adres URL jest automatycznie pisany małymi literami, powinien być pisany małymi literami.

Blazor2.cshtml edytuj również. Blazor1.cshtml Należy pamiętać, że różni się to od .

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

Dodaj link, aby przejść do strony Blazora.

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>

Uruchamianie.cs Zmiany

Ścieżka trasy Blazor WebAssembly zmienia się, więc włącz ją dla każdej ścieżki.

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

Wdrożenie Blazor WebAssembly

Ostatnim razem umieściłem opublikowany plik w wwwroot takim, jaki był, ale ponieważ określiłem ścieżkę dla znacznika bazowego na każdej stronie, tworzę folder o podobnej ścieżce w wwwroot.

Skopiuj zawartość katalogu wwwroot opublikowanego pliku do każdego folderu. Tak jak index.html poprzednio, nie jest to wymagane.

egzekucja

Uruchom go, aby upewnić się, że blazor WebAssembly na każdej stronie działa poprawnie.

ASP.NET Uruchom Blazor WebAssembly z widokiem Core MVC