Blazor

Implantar várias WebAssemblys Blazor em MVC de núcleo ASP.NET

Data de criação de página :

ambiente

Estúdio Visual
  • Visual Studio 2019
.NET
  • .NET 5.0

Inicialmente

Esta dica assume seu conhecimento de "Running Blazor WebAssembly in ASP.NET Core MVC View", então se você não sabe como executar o Blazor Assembly no ASP.NET Core MVC, consulte esse artigo.

O método anterior permite que você coloque apenas uma Montagem Blazor, de modo que esta Dicas permite que você coloque mais de um.

Crie duas Assembleias Blazor

Você pode ter certeza de que os dois Blazor Assembly estão funcionando, respectivamente, para que você possa fazer o que a Assembleia Blazor é. Por favor, faça isso para que você possa ver a diferença por enquanto. Aqui, a cor do menu esquerdo é alterada para o estado inicial do projeto.

Publique cada projeto e prepare o arquivo.

criar um projeto MVC núcleo ASP.NET

Isso também se baseia nas dicas anteriores para criar um projeto. Depois de criar seu projeto, adicione 'in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet'.

Corrigir _Layout.cshtml

Isto é o mesmo da última vez.

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

Adicione páginas para duas Assembleias Blazor

Desta vez, teremos duas vistas para mostrar cada Assembleia Blazor.

HomeController adicionar duas ações para . Novamente, o lado do servidor não faz nada em particular, então basta retornar a visualização.

HomeController.cs

// 省略

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

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

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

Clique com o botão direito da ação para adicionar uma exibição. Por favor, vá para dois.

A visão foi criada.

Primeiro, configure a primeira Assembleia 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>
}

O que é diferente do anterior é que o conteúdo da tag base é <base href="/" /> feito de . <base href="/Home/Blazor1/" />

Se você mudar esse caminho, o Conjunto Blazor será capaz de referenciar cada arquivo, como dll, como a raiz deste caminho em um caminho relativo.

No entanto, a especificação atual do Conjunto Blazor especifica que o controlador e a ação têm o mesmo caminho, pois se a URL determinada pela ação MVC não corresponder ao caminho relativo do host desta base, o Conjunto Blazor falhará ao carregar.

A propósito, o caso desse caminho é afetado, portanto, se a URL é automaticamente minúscula, deve ser minúscula.

Blazor2.cshtml editar também. Blazor1.cshtml Por favor, note que é diferente 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>
}

Adicione um link para que você possa navegar até a página do 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>

Mudanças .cs startup

O caminho de rota do Blazor WebAssembly muda, então habilite-o para cada caminho.

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

Implantação de Blazor WebAssembly

Da última vez, coloquei o arquivo publicado no wwwroot como era, mas como especifiquei um caminho para a tag base em cada página, eu crio uma pasta com um caminho semelhante em wwwroot.

Copie o conteúdo do arquivo wwwroot do arquivo publicado para cada pasta. Como index.html antes, não é necessário.

execução

Execute-o para ter certeza de que o Blazor WebAssembly em cada página está funcionando corretamente.

ASP.NET Run Blazor WebAssembly com uma visão MVC principal