ASP.NET Kör Blazor WebAssembly med en Core MVC-vy

Sidan uppdaterad : söndag 17 juli 2022

Datum för skapande av sida : onsdag 30 mars 2022

miljö

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

Först

Eftersom Blazor WebAssembly är en klientteknik spelar det ingen roll hur webbservern fungerar. För att kunna betjäna WebAssembly till klienter krävs dock minst konfiguration på serversidan. Låt oss köra serverprogrammet som ASP.NET Core MVC i Blazor WebAssembly.

Skapa en Blazor WebAssembly

Nu behöver vi bara se till att Blazor WebAssembly fungerar, så vi lämnar det som det var när vi skapade projektet.

Projektnamnet eller lösningsnamnet är godtyckligt.

Skärmen "ASP.NET hosted on Core" som visas på skärmen med ytterligare information kan också fungera som MVC, men det resulterande projektet ligger nära API-servern, så vi kommer inte att kontrollera det här.

Publicera Blazor WebAssembly

Publicera filer för att distribuera Blazor WebAssembly till ett ASP.NET Core MVC-projekt.

Högerklicka på projektet och välj Publicera.

Välj Mappar.

Lämna standardpubliceringsmålet.

Publiceringsskärmen visas. Du kan ställa in olika inställningar, men för närvarande är knappen "Publicera" kvar som standard.

Vänta tills publiceringen har börjat och slutförts. Observera att långa mappsökvägar kan misslyckas.

Du kan kontrollera att filen har skapats i den angivna mappen. Om den anges som en relativ sökväg är målet relativt projektet.

Skapa ett ASP.NET Core MVC-projekt

Skapa sedan ett ASP.NET Core MVC-projekt. Det kan vara tråkigt att öppna Visual Studio separat, så skapa det i Blazor WebAssembly-lösningen. Eftersom de två projekten inte är kopplade den här gången är det inga problem även om de skapas separat.

Projektnamnet är valfritt. De andra inställningarna lämnas som standard.

Eftersom Blazor-sidan förutsätter att utvecklingen är klar ASP.NET är projektet på MVC-kärnsidan en start.

Skapa vyer för Blazor Assembly

Detta område kommer att ändras beroende på vilket projekt du faktiskt skapar, så ändra det enligt det projektet. Här kommer vi att ändra det baserat på konfigurationen av exempelprojektet.

I grund och botten bör den ändras för att likna den som skapades när du publicerar index.html Blazor Assembly.

Åtgärda _Layout.cshtml

Jag vill referera till CSS för Blazor Assembly, så jag kan skriva det direkt till . _Layout.cshtml Vi vill att den endast ska tillämpas på målsidan så mycket som möjligt, så att vi kan utöka den genom att lägga till så RenderSectionAsync att länkar till CSS kan skrivas på varje sida.

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

Lägg till en sida för Blazor Assembly

Lägg till en dedikerad sida för att visa Blazor Assembly. ASP.NET Normal sidtillägg och procedur i Core MVC är desamma.

HomeController Lägg till följande åtgärder i . Serversidan gör inget särskilt, så det returnerar bara vyn.

HemKontroll.cs

// 省略

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

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

Högerklicka på åtgärden för att lägga till en vy.

Det finns inget att binda till, så lägg till det som det är.

Vyn skapas.

Med hjälp av det genererade vid tidpunkten för publiceringen av index.html Blazor Assembly refereras, kommer vi att göra om det enligt följande.

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

Lägg till en länk så att du kan navigera till sidan 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>

Lägg till Microsoft.AspNetCore.Components.WebAssembly.Server referens

Startup.cs Du behöver inte skriva den nödvändiga koden själv, men för enkelhetens skull får du från Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Högerklicka på Beroenden och välj Hantera NuGet-paket.

Välj fliken Administration och ange Microsoft.AspNetCore.Components.WebAssembly.Server i sökfältet.

Ett paket med samma namn visas, så installera det.

Kontrollera att paketet har lagts till.

Ändringar i start.cs

app.UseHttpsRedirection(); Infoga följande kod på raden efter raden:

app.UseBlazorFrameworkFiles();

Distribuera Blazor WebAssembly

I grund och botten kan du lägga den publicerade Blazor WebAssembly wwwroot-mappen som den är i wwwroot-mappen ASP.NEt Core,index.html men du bör ta bort den eftersom den inte längre behövs. Eftersom det dubbasfavicon.ico bestämmer du också vilken ikon som ska användas.

När du släpper med PWA, om du har uteslutit filer (till exempel index.html) i mappen wwwroot, Du måste öppna i en textredigerare, även i mappen wwwroot, och ta bort posterna i service-worker-assets.js den uteslutna filen. Annars kan du få ett internt felmeddelande när du öppnar en webbskärm.

När du publicerar en Blazor-app behöver du inte göra detta manuellt genom att utesluta onödiga filer från projektet.

När det gäller PWA uppstår interna fel om de inte finns i en https-miljö. Den kan inte installeras som en PWA.

Bekräftelse av utförande

ASP.NET Felsökning kör MVC-projektet Core. Besök Blazor-sidan och kontrollera att layouten för Blazor Assembly visas på sidan. Välj den vänstra menyn och kontrollera att varje funktion fungerar.

Om webbadresser

Om du klickar på Blazor Assemblys vänstra meny som visas på sidan kommer du att märka att webbadressen ändras. Det här beteendet följer inte det URL-beteende som förväntas av ASP.NET Core MVC, så om möjligt bör Blazor-sammansättningen helst skapa URL:en på ett sådant sätt att URL:en inte ändras.

När du öppnar en Blazor-sida

När du klickar på menyn Räknare

Ändringslogg

2022/7/12

Lade till punkter att notera när onödiga filer utesluts i filplaceringen av den publicerade Blazor-appen.

2022/3/30

första upplagan

Placera appar som skapats i Blazor WebAssembly i IIS

Distribuera flera Blazor WebAssemblys i ASP.NET Core MVC