Blazor

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

Página atualizada :
Data de criação de página :

ambiente

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

Inicialmente

Como o Blazor WebAssembly é uma tecnologia cliente, não importa como o servidor web funciona. No entanto, para servir o WebAssembly aos clientes, no mínimo, é necessária uma configuração do lado do servidor. Vamos executar o programa de servidor como ASP.NET Core MVC no Blazor WebAssembly.

Criando um WebAssembly Blazor

Agora só precisamos ter certeza de que o Blazor WebAssembly funciona, então vamos deixá-lo como estava quando criamos o projeto.

O nome do projeto ou da solução é arbitrário.

A tela "ASP.NET hospedado no Core" exibida na tela de informações adicionais também pode funcionar como MVC, mas o projeto resultante está próximo ao servidor de API, então não vamos verificar aqui.

Publicando Blazor WebAssembly

Publique arquivos para implantar o Blazor WebAssembly em um projeto de MVC core ASP.NET.

Clique com o botão direito do mouse no projeto e escolha Publicar.

Selecione Pastas.

Deixe o destino de publicação padrão.

A tela de publicação é exibida. Você pode definir várias configurações, mas por enquanto, o botão "Publicar" é deixado como padrão.

Aguarde que a publicação comece e complete com sucesso. Observe que caminhos de pastas longas podem falhar.

Você pode verificar se o arquivo foi criado na pasta especificada. Se for especificado como um caminho relativo, o destino é relativo ao projeto.

Crie um projeto de MVC núcleo ASP.NET

Em seguida, crie um projeto de MVC core ASP.NET. Abrir o Visual Studio separadamente pode ser tedioso, então crie-o dentro da solução Blazor WebAssembly. Como os dois projetos não estão vinculados desta vez, não há problema mesmo que sejam criados separadamente.

O nome do projeto é opcional. As outras configurações são deixadas em seus padrões.

Uma vez que o lado Blazor assume que o desenvolvimento está concluído ASP.NET o projeto no lado principal do MVC é uma startup.

Criando pontos de vista para a Assembleia de Blazor

Essa área mudará dependendo do projeto que você está realmente criando, então, por favor, modifique-o de acordo com esse projeto. Aqui, vamos modificá-lo com base na configuração do projeto amostral.

Basicamente, deve ser modificado para se assemelhar ao criado quando você publica a index.html Assembleia blazor.

Fixação _Layout.cshtml

Quero fazer referência ao CSS da Assembleia Blazor, para que eu possa escrevê-lo diretamente para. _Layout.cshtml Queremos que ele seja aplicado apenas à página de destino o máximo possível, para que possamos amplie-o adicionando RenderSectionAsync para que os links para o CSS possam ser gravados em cada página.

<!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 uma página para o Conjunto Blazor

Adicione uma página dedicada para exibir a Assembleia Blazor. ASP.NET Adição e procedimento de página normal no Core MVC são os mesmos.

HomeController Adicione as seguintes ações a . O lado do servidor não faz nada em particular, então ele apenas retorna a visualização.

HomeController.cs

// 省略

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

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

Clique com o botão direito da ação para adicionar uma exibição.

Não há nada para se ligar, então adicione como está.

A visão foi criada.

Usando o gerado no momento da publicação da index.html Assembleia Blazor é referenciado, vamos refazê-lo da seguinte forma.

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.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 em 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>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Adicionar referência Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Você não precisa escrever o código necessário você mesmo, mas para facilitar você obter de Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Com o botão direito do mouse em Dependências e selecione Gerenciar pacotes NuGet.

Selecione a guia Administração e insira Microsoft.AspNetCore.Components.WebAssembly.Server no campo de pesquisa.

Um pacote com o mesmo nome é exibido, então instale-o.

Verifique se o pacote foi adicionado.

Mudanças na Startup.cs

app.UseHttpsRedirection(); Insira o seguinte código na linha seguindo a linha:

app.UseBlazorFrameworkFiles();

Implantação do Blazor WebAssembly

Basicamente, você pode colocar a pasta publicada blazor WebAssembly wwwroot como ela está na pasta wwwroot de ASP.NEt Core,index.html mas você deve excluí-la porque ela não será mais necessária. Além disso, já que éfavicon.ico apelidado, decida qual ícone usar.

Ao liberar com PWA, se você excluiu arquivos (como índice.html) na pasta wwwroot, Você precisará abrir em um editor de texto, também na pasta wwwroot, e excluir os registros no service-worker-assets.js arquivo excluído. Caso contrário, você pode ter um erro interno ao abrir uma tela da Web.

Quando você publica um aplicativo Blazor, você não precisa fazer isso manualmente, excluindo arquivos desnecessários do seu projeto.

No caso das PWAs, erros internos ocorrem se não estiverem em um ambiente https. Não pode ser instalado como um PWA.

Confirmação da execução

ASP.NET Debug executam o projeto Core MVC. Visite a página blazor e verifique se o layout da Assembleia blazor aparece na página. Selecione o menu esquerdo e verifique se cada recurso funciona.

Sobre URLs

Se você clicar no menu esquerdo do Conjunto Blazor exibido na página, você notará que a URL muda. Esse comportamento não segue o comportamento de URL esperado pelo ASP.NET MVC Core, portanto, se possível, o Conjunto Blazor deve, preferencialmente, criar a URL de tal forma que a URL não mude.

Quando você abre uma página blazor

Quando você clica no menu Contador

Changelog

2022/7/12
  • Adicionado pontos a nota ao excluir arquivos desnecessários na colocação do arquivo do aplicativo Blazor publicado.
2022/3/30
  • primeira edição
Coloque aplicativos criados no Blazor WebAssembly no IIS
Implantar várias WebAssemblys Blazor em MVC de núcleo ASP.NET