ASP.NET Kør Blazor WebAssembly med en Core MVC-visning

Side opdateret : søndag den 17. juli 2022

Dato for oprettelse af side : onsdag den 30. marts 2022

miljø

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

Først

Fordi Blazor WebAssembly er en klientteknologi, betyder det ikke noget, hvordan webserveren fungerer. For at kunne betjene WebAssembly til klienter kræves der dog som minimum konfiguration på serversiden. Lad os køre serverprogrammet som ASP.NET Core MVC i Blazor WebAssembly.

Oprettelse af en Blazor WebAssembly

Nu skal vi bare sørge for, at Blazor WebAssembly fungerer, så vi lader det være, som det var, da vi oprettede projektet.

Projektnavnet eller løsningsnavnet er vilkårligt.

Skærmen "ASP.NET hostet på Core", der vises på skærmen med yderligere oplysninger, kan også fungere som MVC, men det resulterende projekt er tæt på API-serveren, så vi kontrollerer det ikke her.

Udgivelse af Blazor WebAssembly

Udgiv filer for at implementere Blazor WebAssembly til et ASP.NET Core MVC-projekt.

Højreklik på projektet, og vælg Udgiv.

Vælg Mapper.

Forlad standardudgivelsesdestinationen.

Skærmbilledet Publicer vises. Du kan indstille forskellige indstillinger, men for nu er knappen "Publicer" tilbage som standard.

Vent på, at udgivelsen begynder og fuldføres med succes. Bemærk, at lange mappestier muligvis mislykkes.

Du kan kontrollere, at filen er oprettet i den angivne mappe. Hvis det er angivet som en relativ sti, er destinationen i forhold til projektet.

Opret et MVC-projekt med ASP.NET Core

Opret derefter et ASP.NET Core MVC-projekt. Det kan være kedeligt at åbne Visual Studio separat, så opret det inde i Blazor WebAssembly-løsningen. Da de to projekter ikke er forbundet denne gang, er der ikke noget problem, selvom de oprettes separat.

Projektnavnet er valgfrit. De andre indstillinger er tilbage ved deres standardindstillinger.

Da Blazor-siden antager, at udviklingen er afsluttet ASP.NET er projektet på kerne-MVC-siden en opstart.

Oprettelse af visninger til Blazor Assembly

Dette område ændres afhængigt af det projekt, du rent faktisk opretter, så rediger det i henhold til det pågældende projekt. Her ændrer vi det baseret på konfigurationen af prøveprojektet.

Dybest set skal det ændres, så det ligner det, der oprettes, når du udgiver index.html Blazor Assembly.

At rette _Layout.cshtml

Jeg vil henvise til CSS fra Blazor Assembly, så jeg kan skrive det direkte til . _Layout.cshtml Vi ønsker, at det kun skal anvendes på målsiden så meget som muligt, så vi kan udvide det ved at tilføje, så RenderSectionAsync links til CSS kan skrives på hver side.

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

Tilføj en side til Blazor Assembly

Tilføj en dedikeret side for at få vist Blazor-samlingen. ASP.NET Normal sidetilføjelse og -procedure i Core MVC er de samme.

HomeController Føj følgende handlinger til . Serversiden gør ikke noget særligt, så det returnerer bare visningen.

HomeController.cs

// 省略

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

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

Højreklik på handlingen for at tilføje en visning.

Der er ikke noget at binde sig til, så tilføj det som det er.

Visningen oprettes.

Ved hjælp af det genererede på tidspunktet for offentliggørelsen af index.html Blazor Assembly refereres, vil vi genskabe det som følger.

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

Tilføj et link, så du kan navigere til siden i 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>

Tilføj Microsoft.AspNetCore.Components.WebAssembly.Server-reference

Startup.cs Du behøver ikke selv at skrive den nødvendige kode, men for nemheds skyld får du fra Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Højreklik på Afhængigheder, og vælg Administrer NuGet-pakker.

Vælg fanen Administration, og indtast Microsoft.AspNetCore.Components.WebAssembly.Server i søgefeltet.

Der vises en pakke med samme navn, så installer den.

Kontrollér, at pakken er tilføjet.

Ændringer i opstart.cs

app.UseHttpsRedirection(); Indsæt følgende kode på linjen efter linjen:

app.UseBlazorFrameworkFiles();

Implementering af Blazor WebAssembly

Dybest set kan du placere den offentliggjorte Blazor WebAssembly wwwroot-mappe, som den er i mappen wwwroot i ASP.NEt Core, men du bør slette den,index.html fordi den ikke længere er nødvendig. Da det er døbt, skalfavicon.ico du også beslutte, hvilket ikon der skal bruges.

Hvis du har ekskluderet filer (f.eks. indeks.html) i mappen wwwroot, når du frigiver med PWA, Du skal åbne i en teksteditor, også i mappen wwwroot, og slette posterne i service-worker-assets.js den ekskluderede fil. Ellers kan du få en intern fejl, når du åbner en webskærm.

Når du udgiver en Blazor-app, behøver du ikke at gøre dette manuelt ved at udelukke unødvendige filer fra dit projekt.

I tilfælde af PWA'er opstår der interne fejl, hvis de ikke er i et https-miljø. Det kan ikke installeres som en PWA.

Bekræftelse af udførelse

ASP.NET Debug køre Core MVC-projektet. Besøg Blazor-siden og kontroller, at blazorsamlingens layout vises på siden. Vælg menuen til venstre, og kontroller, at hver funktion fungerer.

Om webadresser

Hvis du klikker på Blazor Assembly venstre menu, der vises på siden, vil du bemærke, at URL'en ændres. Denne adfærd følger ikke den URL-adfærd, der forventes af ASP.NET Core MVC, så hvis det er muligt, skal Blazor Assembly fortrinsvis oprette URL'en på en sådan måde, at URL'en ikke ændres.

Når du åbner en Blazor-side

Når du klikker på menuen Tæller

Changelog

2022/7/12

Tilføjede punkter, der skal bemærkes, når unødvendige filer udelukkes i filplaceringen af den offentliggjorte Blazor-app.

2022/3/30

første udgave

Placer apps, der er oprettet i Blazor WebAssembly i IIS

Udrul flere Blazor WebAssemblys i ASP.NET Core MVC