Blazor

Nasazení více Blazor WebAssemblys v ASP.NET Core MVC

Datum vytvoření stránky :

životní prostředí

Vizuální sada
  • Vizuální sada 2019
Rozhraní .NET
  • Rozhraní .NET 5,0

Nejprve

Tyto tipy předpokládají vaše znalosti o "spuštění Blazor WebAssembly v ASP.NET zobrazení Core MVC", takže pokud nevíte, jak spustit Blazor Assembly na ASP.NET Core MVC, přečtěte si tento článek.

Předchozí metoda umožňuje umístit pouze jedno Blazor Assembly, takže tyto tipy umožňují umístit více než jeden.

Vytvoření dvou Blazor assembly

Můžete se ujistit, že dvě Blazor assembly běží v uvedeném pořadí, takže můžete dělat cokoli, co je Blazor Assembly. Prosím, udělejte to tak, abyste prozatím viděli rozdíl. Zde se barva levé nabídky změní pro počáteční stav projektu.

Publikujte každý projekt a připravte soubor.

vytvořit projekt MVC ASP.NET Core

To je také založeno na tipech před vytvořením projektu. Po vytvoření projektu přidejte "v Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Oprava souboru _Layout.cshtml

To je stejné jako minule.

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

Přidání stránek pro dvě Blazor Assembly

Tentokrát budeme mít dvě zobrazení, abychom ukázali každé Blazor Assembly.

HomeController přidejte dvě akce do programu . Opět platí, že strana serveru nedělá nic konkrétního, takže stačí vrátit zobrazení.

HomeController.cs

// 省略

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

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

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

Kliknutím pravým tlačítkem myši na akci přidáte zobrazení. Prosím, jděte na dvě.

Zobrazení je vytvořeno.

Nejprve nastavte první Blazor Assembly.

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

Co se liší od předchozího, je to, že obsah základní značky <base href="/" /> je vyroben z . <base href="/Home/Blazor1/" />

Pokud změníte tuto cestu, Blazor Assembly bude moci odkazovat na každý soubor, například dll, jako na kořen této cesty v relativní cestě.

Aktuální specifikace Blazor Assembly ale určuje, že kontroler a akce mají stejnou cestu, protože pokud adresa URL určená akcí MVC neodpovídá relativní cestě od hostitele této základny, Blazor Assembly při načítání selže.

Mimochodem, případ této cesty je ovlivněn, takže pokud je adresa URL automaticky malá, měla by být malá písmena.

Blazor2.cshtml upravit také. Blazor1.cshtml Vezměte prosím na vědomí, že se jedná o některé odlišné 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>
}

Přidejte odkaz, abyste mohli přejít na blazorovu stránku.

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>

Spuštění.cs Změny

Blazor WebAssembly se změní cesta trasy, takže ji povolte pro každou cestu.

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

Nasazení Blazor WebAssembly

Minule jsem umístil publikovaný soubor do wwwroot tak, jak byl, ale protože jsem na každé stránce zadal cestu k základní značce, vytvořím složku s podobnou cestou v wwwroot.

Zkopírujte obsah wwwroot publikovaného souboru do každé složky. Stejně jako index.html dříve to není nutné.

poprava

Spusťte ji, abyste se ujistili, že blazor WebAssembly na každé stránce funguje správně.

ASP.NET spuštění Blazor WebAssembly se zobrazením Core MVC