Blazor ·

Distribuire più Blazor WebAssemblys in ASP.NET Core MVC

Data di creazione della pagina :

ambiente

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

Dapprima

Questo suggerimento presuppone la tua conoscenza di "Esecuzione di Blazor WebAssembly in ASP.NET Core MVC View", quindi se non sai come eseguire Blazor Assembly su ASP.NET Core MVC, consulta quell'articolo.

Il metodo precedente consente di posizionare un solo assemblaggio Blazor, quindi questo Suggerimenti consente di posizionarne più di uno.

Creare due assiemi Blazor

Potete assicurarvi che i due Blazor Assembly siano in esecuzione rispettivamente, in modo da poter fare qualsiasi cosa sia l'Assembly Blazor. Per favore, fai in modo che tu possa vedere la differenza per il momento. Qui, il colore del menu a sinistra viene modificato per lo stato iniziale del progetto.

Pubblicare ogni progetto e preparare il file.

Creare un progetto MVC ASP.NET Core

Questo si basa anche sui suggerimenti prima di creare un progetto. Dopo aver creato il progetto, aggiungi "in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Correzione _Layout.cshtml

Questo è lo stesso dell'ultima volta.

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

Aggiungere pagine per due assembly Blazor

Questa volta, avremo due viste per mostrare ogni Assemblea Blazor.

HomeController aggiungere due azioni a . Ancora una volta, il lato server non fa nulla in particolare, quindi basta restituire la vista.

HomeController.cs

// 省略

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

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

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

Fare clic con il pulsante destro del mouse sull'azione per aggiungere una visualizzazione. Si prega di andare per due.

La vista viene creata.

Per prima cosa, imposta la prima Assemblea Blazor.

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

Ciò che è diverso dal precedente è che il contenuto del tag di base è <base href="/" /> fatto di . <base href="/Home/Blazor1/" />

Se si modifica questo percorso, Blazor Assembly sarà in grado di fare riferimento a ciascun file, ad esempio dll, come radice di questo percorso in un percorso relativo.

Tuttavia, la specifica Blazor Assembly corrente specifica che il controller e l'azione hanno lo stesso percorso, perché se l'URL determinato dall'azione MVC non corrisponde al percorso relativo dall'host di questa base, l'assembly Blazor avrà esito negativo durante il caricamento.

A proposito, il caso di questo percorso è interessato, quindi se l'URL è automaticamente minuscolo, dovrebbe essere minuscolo.

Blazor2.cshtml modifica pure. Blazor1.cshtml Si prega di notare che è diverso da .

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

Aggiungi un link in modo da poter navigare alla pagina di 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>

Avvio.cs Modifiche

Il percorso del percorso di Blazor WebAssembly cambia, quindi abilitalo per ogni percorso.

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

Distribuzione di Blazor WebAssembly

L'ultima volta, ho inserito il file pubblicato in wwwroot così com'era, ma poiché ho specificato un percorso per il tag di base su ogni pagina, creo una cartella con un percorso simile in wwwroot.

Copiare il contenuto del wwwroot del file pubblicato in ogni cartella. Come index.html prima, non è richiesto.

esecuzione

Eseguilo per assicurarti che blazor WebAssembly su ogni pagina funzioni correttamente.

ASP.NET Eseguire Blazor WebAssembly con una visualizzazione MVC di base