Blazor

ASP.NET Ejecutar Blazor WebAssembly con una vista Core MVC

Actualización de la página :
Fecha de creación de la página :

medio ambiente

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

Al principio

Debido a que Blazor WebAssembly es una tecnología de cliente, no importa cómo funcione el servidor web. Sin embargo, para servir WebAssembly a los clientes, como mínimo, se requiere una configuración del lado del servidor. Ejecutemos el programa de servidor como ASP.NET Core MVC en Blazor WebAssembly.

Creación de un Blazor WebAssembly

Ahora solo tenemos que asegurarnos de que Blazor WebAssembly funcione, así que lo dejaremos como estaba cuando creamos el proyecto.

El nombre del proyecto o del nombre de la solución es arbitrario.

La pantalla "ASP.NET alojada en Core" que se muestra en la pantalla de información adicional también puede funcionar como MVC, pero el proyecto resultante está cerca del servidor API, por lo que no lo comprobaremos aquí.

Publicación de Blazor WebAssembly

Publicar archivos para implementar Blazor WebAssembly en un proyecto MVC de ASP.NET Core.

Haga clic con el botón secundario en el proyecto y elija Publicar.

Seleccione Carpetas.

Deje el destino de publicación predeterminado.

Aparecerá la pantalla de publicación. Puede establecer varias configuraciones, pero por ahora, el botón "Publicar" se deja como predeterminado.

Espere a que la publicación comience y se complete correctamente. Tenga en cuenta que las rutas de acceso de carpetas largas pueden fallar.

Puede comprobar que el archivo se ha creado en la carpeta especificada. Si se especifica como una ruta relativa, el destino es relativo al proyecto.

Crear un proyecto MVC de ASP.NET Core

A continuación, cree un proyecto MVC de ASP.NET Core. Abrir Visual Studio por separado puede ser tedioso, así que créelo dentro de la solución Blazor WebAssembly. Dado que los dos proyectos no están vinculados esta vez, no hay problema incluso si se crean por separado.

El nombre del proyecto es opcional. Las otras configuraciones se dejan en sus valores predeterminados.

Dado que el lado de Blazor asume que el desarrollo se completa ASP.NET el proyecto en el lado central de MVC es una startup.

Creación de vistas para Blazor Assembly

Esta área cambiará dependiendo del proyecto que realmente esté creando, así que modifíquelo de acuerdo con ese proyecto. Aquí, lo modificaremos en función de la configuración del proyecto de ejemplo.

Básicamente, debe modificarse para que se parezca al que se crea cuando se publica el index.html Blazor Assembly.

Arreglando _Layout.cshtml

Quiero hacer referencia al CSS de la Asamblea blazor, para poder escribirlo directamente en . _Layout.cshtml Queremos que se aplique solo a la página de destino tanto como sea posible, por lo que podemos extenderlo agregando para que se puedan RenderSectionAsync escribir enlaces al CSS en 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>
  <!-- 以下同じなので省略 -->

Agregar una página para el ensamblaje de Blazor

Agregue una página dedicada para mostrar el ensamblaje de Blazor. ASP.NET la adición de página normal y el procedimiento en Core MVC son los mismos.

HomeController Agregue las siguientes acciones a . El lado del servidor no hace nada en particular, por lo que solo devuelve la vista.

HomeController.cs

// 省略

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

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

Haga clic con el botón secundario en la acción para agregar una vista.

No hay nada a lo que vincularse, así que agréguelo tal cual.

Se crea la vista.

Utilizando el generado en el momento de la publicación de la index.html Asamblea blazor que se hace referencia, lo reharemos de la siguiente manera.

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

Añade un enlace para que puedas 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>

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

Agregar referencia de Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs No necesita escribir el código necesario usted mismo, pero para mayor facilidad lo obtiene de Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Haga clic con el botón secundario en Dependencias y seleccione Administrar paquetes nuGet.

Seleccione la ficha Administración y escriba Microsoft.AspNetCore.Components.WebAssembly.Server en el campo de búsqueda.

Se muestra un paquete con el mismo nombre, así que instálelo.

Compruebe que se ha agregado el paquete.

Cambios en el inicio.cs

app.UseHttpsRedirection(); Inserte el código siguiente en la línea que sigue a la línea:

app.UseBlazorFrameworkFiles();

Implementación de Blazor WebAssembly

Básicamente, puede poner la carpeta wwwroot de Blazor WebAssembly publicada tal como está en la carpeta wwwroot de ASP.NEt Core,index.html pero debe eliminarla porque ya no será necesaria. Además, ya que estáfavicon.ico doblado, decide qué icono usar.

Al publicar con PWA, si ha excluido archivos (como index.html) en la carpeta wwwroot, Deberá abrir en un editor de texto, también en la carpeta wwwroot, y eliminar los registros en service-worker-assets.js el archivo excluido. De lo contrario, es posible que reciba un error interno al abrir una pantalla web.

Cuando publicas una aplicación Blazor, no necesitas hacerlo manualmente excluyendo archivos innecesarios de tu proyecto.

En el caso de las PWA, los errores internos se producen si no se encuentran en un entorno https. No se puede instalar como una PWA.

Confirmación de ejecución

ASP.NET Debug ejecutar el proyecto Core MVC. Visite la página de Blazor y verifique que el diseño de la Asamblea de Blazor aparezca en la página. Seleccione el menú de la izquierda y verifique que cada función funcione.

Acerca de las URL

Si hace clic en el menú izquierdo de Blazor Assembly que se muestra en la página, notará que la URL cambia. Este comportamiento no sigue el comportamiento de URL esperado por ASP.NET Core MVC, por lo que, si es posible, el ensamblado Blazor debe crear preferiblemente la dirección URL de tal manera que la dirección URL no cambie.

Al abrir una página de Blazor

Al hacer clic en el menú Contador

Registro de cambios

2022/7/12
  • Se agregaron puntos a tener en cuenta al excluir archivos innecesarios en la ubicación de archivos de la aplicación Blazor publicada.
2022/3/30
  • primera edición
Colocar aplicaciones creadas en Blazor WebAssembly en IIS
Implementar varios Blazor WebAssemblys en ASP.NET Core MVC