Blazor

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

Pàgina actualitzada :
Data de creació de la pàgina :

entorn

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

Al principi

Com que Blazor WebAssembly és una tecnologia client, no importa com funcioni el servidor web. No obstant això, per poder servir WebAssembly als clients, com a mínim, es requereix una configuració del servidor. Executem el programa del servidor com ASP.NET Core MVC a Blazor WebAssembly.

Creació d'un Blazor WebAssembly

Ara només hem d'assegurar-nos que Blazor WebAssembly funcioni, així que ho deixarem tal com era quan vam crear el projecte.

El nom del projecte o el nom de la solució és arbitrari.

La pantalla "ASP.NET allotjada al nucli" que es mostra a la pantalla d'informació addicional també pot funcionar com a MVC, però el projecte resultant és a prop del servidor de l'API, de manera que no ho comprovarem aquí.

S'està publicant Blazor WebAssembly

Publica fitxers per implementar Blazor WebAssembly a un projecte MVC ASP.NET Core.

Feu clic amb el botó dret del ratolí al projecte i trieu Publica.

Seleccioneu carpetes.

Deixa la destinació de publicació per defecte.

Apareix la pantalla de publicació. Podeu establir diverses opcions de configuració, però de moment, el botó "Publica" es deixa com a predeterminat.

Espereu que la publicació comenci i es completi correctament. Tingueu en compte que els camins de carpetes llargs poden fallar.

Podeu verificar que el fitxer s'ha creat a la carpeta especificada. Si s'especifica com a camí relatiu, la destinació és relativa al projecte.

Crear un projecte MVC ASP.NET Core

A continuació, creeu un ASP.NET projecte Core MVC. Obrir Visual Studio per separat pot ser tediós, de manera que creeu-lo dins de la solució Blazor WebAssembly. Atès que els dos projectes no estan vinculats aquesta vegada, no hi ha cap problema encara que es creen per separat.

El nom del projecte és opcional. La resta de paràmetres es deixen per defecte.

Atès que el costat de Blazor assumeix que el desenvolupament s'ha completat ASP.NET el projecte en el costat MVC central és una startup.

Creació de visualitzacions per a l'assemblat de Blazor

Aquesta àrea canviarà en funció del projecte que realment esteu creant, així que modifiqueu-lo segons aquest projecte. Aquí, el modificarem en funció de la configuració del projecte de mostra.

Bàsicament, s'ha de modificar per assemblar-se al creat quan publiqueu l'assemblat index.html blazor.

S'està corregint _Layout.cshtml

Vull fer referència al CSS de l'Assemblea de Blazor, perquè pugui escriure-ho directament a . _Layout.cshtml Volem que s'apliqui només a la pàgina de destinació tant com sigui possible, de manera que puguem ampliar-la afegint-la de manera RenderSectionAsync que es puguin escriure enllaços al CSS a 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>
  <!-- 以下同じなので省略 -->

Afegeix una pàgina per a l'assemblat de Blazor

Afegiu una pàgina dedicada per mostrar l'assemblat de Blazor. ASP.NET L'addició de pàgines normal i el procediment en el MVC principal són els mateixos.

HomeController Afegeix les accions següents al . El costat del servidor no fa res en particular, de manera que només retorna la vista.

HomeControlador.cs

// 省略

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

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

Feu clic amb el botó dret del ratolí a l'acció per afegir una visualització.

No hi ha res a fer, així que afegiu-lo tal com és.

Es crea la visualització.

Utilitzant el generat en el moment de la publicació de l'Assemblea index.html blazor, el refem de la següent 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>
}

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>

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

Afegeix la referència microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs No cal que escriviu el codi necessari vosaltres mateixos, però per facilitar-ho obteniu de Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Feu clic amb el botó dret del ratolí Dependències i seleccioneu Administra els paquets NuGet.

Seleccioneu la pestanya Administració i introduïu Microsoft.AspNetCore.Components.WebAssembly.Server al camp de cerca.

Es mostra un paquet amb el mateix nom, així que instal·leu-lo.

Verifiqueu que s'ha afegit el paquet.

Canvis a l'inici.cs

app.UseHttpsRedirection(); Insereix el codi següent a la línia següent a la línia:

app.UseBlazorFrameworkFiles();

S'està implementant Blazor WebAssembly

Bàsicament, podeu posar la carpeta wwwroot de Blazor WebAssembly publicada tal com es troba a la carpeta wwwroot de ASP.NEt Core,index.html però hauríeu d'eliminar-la perquè ja no serà necessària. A més, ja que esfavicon.ico dobla, decidiu quina icona utilitzar.

En alliberar amb PWA, si heu exclòs fitxers (com ara index.html) a la carpeta wwwroot, Haureu d'obrir en un editor de text, també a la carpeta wwwroot, i suprimir els registres service-worker-assets.js del fitxer exclòs. En cas contrari, és possible que rebeu un error intern quan obriu una pantalla web.

Quan publiqueu una aplicació blazor, no cal que ho feu manualment excloent fitxers innecessaris del vostre projecte.

En el cas dels PWAs, es produeixen errors interns si no es troben en un entorn https. No es pot instal·lar com a PWA.

Confirmació de l'execució

ASP.NET Debug executen el projecte Core MVC. Visiteu la pàgina de Blazor i verifiqueu que la disposició de l'assemblat blazor aparegui a la pàgina. Seleccioneu el menú de l'esquerra i verifiqueu que cada característica funcioni.

Quant als URL

Si feu clic al menú de l'esquerra de l'assemblat de Blazor que es mostra a la pàgina, notareu que l'URL canvia. Aquest comportament no segueix el comportament d'URL esperat per ASP.NET MVC principal, de manera que, si és possible, l'assemblat Blazor hauria de crear preferentment l'URL de manera que l'URL no canviï.

Quan obriu una pàgina de Blazor

Quan feu clic al menú Comptador

Registre de canvis

2022/7/12
  • S'han afegit punts a tenir en compte en excloure fitxers innecessaris en la col·locació d'arxius de l'aplicació Blazor publicada.
2022/3/30
  • primera edició
Col·loca les aplicacions creades a Blazor WebAssembly a l'IIS
Desplega diversos Fitxers web de Blazor a ASP.NET Core MVC