ASP.NET Voer Blazor WebAssembly uit met een Core MVC-weergave

Pagina bijgewerkt : zondag 17 juli 2022

Aanmaakdatum van pagina : woensdag 30 maart 2022

milieu

Visual Studio

Visual Studio 2019

.NET

.NET 5,0

Eerst

Omdat Blazor WebAssembly een clienttechnologie is, maakt het niet uit hoe de webserver werkt. Om WebAssembly aan clients te kunnen leveren, is echter minimaal een server-side configuratie vereist. Laten we het serverprogramma uitvoeren als ASP.NET Core MVC in Blazor WebAssembly.

Een Blazor WebAssembly maken

Nu moeten we er gewoon voor zorgen dat Blazor WebAssembly werkt, dus we laten het zoals het was toen we het project maakten.

De projectnaam of oplossingsnaam is willekeurig.

Het scherm "ASP.NET gehost op Core" dat wordt weergegeven in het aanvullende informatiescherm kan ook werken als MVC, maar het resulterende project bevindt zich dicht bij de API-server, dus we zullen het hier niet controleren.

Uitgeverij Blazor WebAssembly

Publiceer bestanden om Blazor WebAssembly te implementeren in een ASP.NET Core MVC-project.

Klik met de rechtermuisknop op het project en kies Publiceren.

Selecteer Mappen.

Laat de standaard publicatiebestemming staan.

Het publicatiescherm wordt weergegeven. U kunt verschillende instellingen instellen, maar voorlopig blijft de knop "Publiceren" standaard over.

Wacht tot het publiceren is begonnen en voltooid. Houd er rekening mee dat lange mappaden kunnen mislukken.

U kunt controleren of het bestand is gemaakt in de opgegeven map. Als het is opgegeven als een relatief pad, is de bestemming relatief ten opzichte van het project.

Een ASP.NET Core MVC-project maken

Maak vervolgens een ASP.NET Core MVC-project. Visual Studio afzonderlijk openen kan vervelend zijn, dus maak het in de Blazor WebAssembly-oplossing. Aangezien de twee projecten deze keer niet met elkaar verbonden zijn, is er geen probleem, zelfs als ze afzonderlijk worden gemaakt.

De projectnaam is optioneel. De andere instellingen blijven op hun standaardwaarden staan.

Aangezien de Blazor-kant ervan uitgaat dat de ontwikkeling is voltooid ASP.NET is het project aan de kern MVC-kant een startup.

Weergaven maken voor Blazor Assembly

Dit gebied zal veranderen afhankelijk van het project dat u daadwerkelijk maakt, dus pas het aan volgens dat project. Hier zullen we het aanpassen op basis van de configuratie van het voorbeeldproject.

Kortom, het moet worden aangepast om te lijken op degene die is gemaakt wanneer u de index.html Blazor Assembly publiceert.

_Layout.cshtml repareren

Ik wil verwijzen naar de CSS van de Blazor Assembly, zodat ik het rechtstreeks naar . _Layout.cshtml We willen dat het zoveel mogelijk alleen op de doelpagina wordt toegepast, zodat we het kunnen uitbreiden door het toe te voegen, zodat RenderSectionAsync links naar de CSS op elke pagina kunnen worden geschreven.

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

Voeg een pagina toe voor de Blazor Assembly

Voeg een speciale pagina toe om de Blazor Assembly weer te geven. ASP.NET Normale paginatoevoeging en procedure in Core MVC zijn hetzelfde.

HomeController Voeg de volgende acties toe aan . De serverzijde doet niets in het bijzonder, dus het retourneert gewoon de weergave.

Homecontroller.cs

// 省略

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

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

Klik met de rechtermuisknop op de actie om een weergave toe te voegen.

Er is niets om aan te binden, dus voeg het toe zoals het is.

De weergave wordt gemaakt.

Met behulp van de gegenereerde op het moment van publicatie van de index.html Blazor Assembly wordt verwezen, zullen we het als volgt opnieuw maken.

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

Voeg een link toe zodat u naar de pagina in Blazor kunt navigeren.

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>

Referentie voor Microsoft.AspNetCore.Components.WebAssembly.Server toevoegen

Startup.cs U hoeft niet zelf de benodigde code te schrijven, maar voor het gemak krijgt u van Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Klik met de rechtermuisknop op Afhankelijkheden en selecteer NuGet-pakketten beheren.

Selecteer het tabblad Beheer en voer Microsoft.AspNetCore.Components.WebAssembly.Server in het zoekveld in.

Er wordt een pakket met dezelfde naam weergegeven, dus installeer het.

Controleer of het pakket is toegevoegd.

Wijzigingen in opstarten.cs

app.UseHttpsRedirection(); Voeg de volgende code in op de regel na de regel:

app.UseBlazorFrameworkFiles();

Blazor WebAssembly implementeren

Kortom, u kunt de gepubliceerde Blazor WebAssembly wwwroot-map plaatsen zoals deze zich in de wwwroot-map van ASP.NEt Core bevindt,index.html maar u moet deze verwijderen omdat deze niet langer nodig is. Omdat het nagesynchroniseerd isfavicon.ico , beslis je ook welk pictogram je wilt gebruiken.

Als u bij het vrijgeven met PWA bestanden (zoals index.html) in de map wwwroot hebt uitgesloten, U moet openen in een teksteditor, ook in de map wwwroot, en de records in service-worker-assets.js het uitgesloten bestand verwijderen. Anders krijgt u mogelijk een interne fout wanneer u een webscherm opent.

Wanneer u een Blazor-app publiceert, hoeft u dit niet handmatig te doen door onnodige bestanden uit uw project uit te sluiten.

In het geval van PWA's treden interne fouten op als ze zich niet in een https-omgeving bevinden. Het kan niet worden geïnstalleerd als een PWA.

Bevestiging van uitvoering

ASP.NET Debug voert u het Core MVC-project uit. Ga naar de Blazor-pagina en controleer of de lay-out van de Blazor Assembly op de pagina wordt weergegeven. Selecteer het linkermenu en controleer of elke functie werkt.

Informatie over URL's

Als u op het blazor assembly linkermenu op de pagina klikt, zult u merken dat de URL verandert. Dit gedrag volgt niet het URL-gedrag dat wordt verwacht door ASP.NET Core MVC, dus indien mogelijk moet de Blazor Assembly de URL bij voorkeur zo maken dat de URL niet verandert.

Wanneer u een Blazor-pagina opent

Wanneer u op het menu Teller klikt

Changelog

2022/7/12

Punten toegevoegd om op te merken bij het uitsluiten van onnodige bestanden in de bestandsplaatsing van de gepubliceerde Blazor-app.

2022/3/30

eerste editie

Apps die zijn gemaakt in Blazor WebAssembly plaatsen in IIS

Implementeer meerdere Blazor WebAssemblys in ASP.NET Core MVC