Blazor

Desplega diversos Fitxers web de Blazor a ASP.NET Core MVC

Data de creació de la pàgina :

entorn

Estudi visual
  • Visual Studio 2019
.NET
  • .NET 5.0

Al principi

Aquests consells assumeixen el vostre coneixement de "Running Blazor WebAssembly in ASP.NET Core MVC View", de manera que si no sabeu com executar l'assemblador Blazor a ASP.NET MVC principal, vegeu aquest article.

El mètode anterior us permet col·locar només un muntatge Blazor, de manera que aquest Consell us permet col·locar-ne més d'un.

Crea dos muntatges blazor

Podeu assegurar-vos que les dues Assemblees blazor s'executin respectivament, de manera que pugueu fer el que sigui l'Assemblea de Blazor. Si us plau, feu-ho perquè pugueu veure la diferència de moment. Aquí, el color del menú esquerre es canvia per a l'estat inicial del projecte.

Publica cada projecte i prepara el fitxer.

crear un projecte MVC ASP.NET Core

Això també es basa en els consells anteriors per crear un projecte. Un cop hàgiu creat el projecte, afegiu "a Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Esmena _Layout.cshtml

És el mateix que l'última vegada.

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

Afegeix pàgines per a dos assemblatge blazor

Aquesta vegada, tindrem dues vistes per mostrar cada Assemblea de Blazor.

HomeController afegeix dues accions a . De nou, el costat del servidor no fa res en particular, de manera que només cal tornar la vista.

HomeControlador.cs

// 省略

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

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

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

Feu clic amb el botó dret del ratolí a l'acció per afegir una visualització. Si us plau, aneu a per dos.

Es crea la visualització.

En primer lloc, es va crear la primera Assemblea de 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>
}

El que és diferent de l'anterior és que el contingut de l'etiqueta base està <base href="/" /> fet de . <base href="/Home/Blazor1/" />

Si canvieu aquest camí, l'assemblat del Blazor podrà fer referència a cada fitxer, com ara dll, com a arrel d'aquest camí en un camí relatiu.

No obstant això, l'especificació actual de l'assemblat blazor especifica que el controlador i l'acció tenen el mateix camí, ja que si l'URL determinat per l'acció MVC no coincideix amb el camí relatiu de l'amfitrió d'aquesta base, l'assemblat de Blazor fallarà en carregar- se.

Per cert, el cas d'aquest camí es veu afectat, de manera que si l'URL és automàticament minúscula, hauria de ser minúscula.

Blazor2.cshtml Edita també. Blazor1.cshtml Tingueu en compte que és diferent de .

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

Afegiu un enllaç perquè pugueu navegar a la pàgina de 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>

Inici.cs canvis

El camí de la ruta del Blazor WebAssembly canvia, de manera que habiliteu-lo per a cada camí.

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

Implementació de Blazor WebAssembly

L'última vegada, vaig col·locar el fitxer publicat a wwwroot tal com era, però com que vaig especificar un camí per a l'etiqueta base a cada pàgina, creo una carpeta amb un camí similar a wwwroot.

Copiar el contingut del wwwroot del fitxer publicat a cada carpeta. Com index.html abans, no és necessari.

execució

Executeu-lo per assegurar-vos que blazor WebAssembly a cada pàgina funcioni correctament.

ASP.NET Executa l'allotjament web de Blazor amb una visualització MVC bàsica