ASP.NET Futtassa a Blazor WebAssembly-t egy Core MVC nézettel

Oldal frissítve : 2022. július 17., vasárnap

Oldal létrehozásának dátuma : 2022. március 30., szerda

környezet

Visual Stúdió

Visual Studio 2019

.NET (angolul)

.NET 5.0

Először

Mivel a Blazor WebAssembly egy ügyféltechnológia, nem számít, hogyan működik a webszerver. Ahhoz azonban, hogy a WebAssembly-t kiszolgáljuk az ügyfeleknek, legalább kiszolgálóoldali konfigurációra van szükség. Futtassuk a szerverprogramot ASP.NET Core MVC-ként a Blazor WebAssembly-ben.

Blazor WebAssembly létrehozása

Most már csak meg kell győződnünk arról, hogy a Blazor WebAssembly működik, ezért úgy hagyjuk, ahogy a projekt létrehozásakor volt.

A projekt neve vagy a megoldás neve tetszőleges.

A további információs képernyőn megjelenő "ASP.NET Core-on tárolt" képernyő MVC-ként is működhet, de az eredményül kapott projekt közel van az API-kiszolgálóhoz, ezért itt nem ellenőrizzük.

Blazor WebAssembly kiadása

Fájlok közzététele a Blazor WebAssembly üzembe helyezéséhez egy ASP.NET Core MVC projektben.

Kattintson a jobb gombbal a projektre, és válassza a Közzététel parancsot.

Válassza a Mappák lehetőséget.

Hagyja meg az alapértelmezett közzétételi célt.

Megjelenik a közzétételi képernyő. Különböző beállításokat állíthat be, de egyelőre a "Közzététel" gomb marad alapértelmezettként.

Várja meg, amíg a közzététel megkezdődik és sikeresen befejeződik. Vegye figyelembe, hogy a hosszú mappaútvonalak sikertelenek lehetnek.

Ellenőrizheti, hogy a fájl a megadott mappában lett-e létrehozva. Ha relatív elérési útként van megadva, a cél a projekthez viszonyítva van megadva.

ASP.NET Core MVC-projekt létrehozása

Ezután hozzon létre egy ASP.NET Core MVC projektet. A Visual Studio külön-külön történő megnyitása fárasztó lehet, ezért hozza létre a Blazor WebAssembly megoldásban. Mivel a két projekt ezúttal nem kapcsolódik egymáshoz, akkor sem jelent problémát, ha külön-külön hozzák létre őket.

A projekt neve nem kötelező. A többi beállítás az alapértelmezett értéken marad.

Mivel a Blazor oldal feltételezi, hogy a fejlesztés befejeződött, ASP.NET az MVC alapoldalán lévő projekt egy startup.

Nézetek létrehozása a Blazor Assembly számára

Ez a terület a ténylegesen létrehozott projekttől függően változik, ezért kérjük, módosítsa azt a projektnek megfelelően. Itt a mintaprojekt konfigurációja alapján módosítjuk.

Alapvetően úgy kell módosítani, hogy hasonlítson a Blazor Assembly közzétételekor index.html létrehozotthoz.

A _Layout.cshtml javítása

A Blazor Assembly CSS-jére szeretnék hivatkozni, hogy közvetlenül _Layout.cshtml a . Azt akarjuk, hogy a lehető legnagyobb mértékben csak a céloldalra alkalmazzuk, ezért kiegészíthetjük a hozzáadással RenderSectionAsync , hogy a CSS-re mutató linkeket minden oldalra fel lehessen írni.

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

Oldal hozzáadása a Blazor Assemblyhez

Adjon hozzá egy dedikált oldalt a Blazor Assembly megjelenítéséhez. ASP.NET Normál oldal hozzáadása és eljárása a Core MVC-ben ugyanaz.

HomeController Adja hozzá a következő műveleteket a . A szerveroldal nem csinál semmit konkrétan, ezért csak visszaadja a nézetet.

HomeController.cs

// 省略

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

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

Kattintson a jobb gombbal a műveletre egy nézet hozzáadásához.

Nincs mihez kötni, ezért adja hozzá úgy, ahogy van.

Létrejön a nézet.

A Blazor Assembly megjelenésekor generáltra hivatkozunk, a index.html következőképpen fogjuk átdolgozni.

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

Adjon hozzá egy linket, hogy a Blazorban navigálhasson az oldalra.

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>

Microsoft.AspNetCore.Components.WebAssembly.Server-referencia hozzáadása

Startup.cs Nem kell saját maga megírnia a szükséges kódot, de a NuGet-től Microsoft.AspNetCore.Components.WebAssembly.Server kapott könnyítés érdekében.

Kattintson a jobb gombbal a Függőségek elemre, és válassza a NuGet-csomagok kezelése lehetőséget.

Válassza az Adminisztráció lapot, és írja be a Microsoft.AspNetCore.Components.WebAssembly.Server kifejezést a keresőmezőbe.

Megjelenik egy azonos nevű csomag, ezért telepítse.

Ellenőrizze, hogy a csomag hozzá lett-e adva.

Az indítás változásai.cs

app.UseHttpsRedirection(); Illessze be a következő kódot a sor után következő sorba:

app.UseBlazorFrameworkFiles();

A Blazor WebAssembly telepítése

Alapvetően a közzétett Blazor WebAssembly wwwroot mappát úgy helyezheti el, ahogy van, ASP.NEt Core wwwroot mappájába, de törölnie kell,index.html mert már nem lesz rá szükség. Továbbá, mivel szinkronizálva vanfavicon.ico , döntse el, hogy melyik ikont használja.

PWA-val történő kiadáskor, ha kizárta a wwwroot mappában lévő fájlokat (például index.html), Meg kell nyitnia egy szövegszerkesztőben, szintén a wwwroot mappában, és törölnie kell a kizárt fájlban lévő service-worker-assets.js rekordokat. Ellenkező esetben belső hibaüzenet jelenhet meg, amikor megnyit egy webes képernyőt.

Blazor-alkalmazás közzétételekor ezt nem kell manuálisan megtennie úgy, hogy kizárja a felesleges fájlokat a projektből.

A PWA-k esetében belső hibák akkor fordulnak elő, ha nem https környezetben vannak. PwA-ként nem telepíthető.

Végrehajtás megerősítése

ASP.NET Debug futtassa a Core MVC projektet. Látogasson el a Blazor oldalra, és ellenőrizze, hogy a Blazor Assembly elrendezése megjelenik-e az oldalon. Válassza ki a bal oldali menüt, és ellenőrizze, hogy az egyes funkciók működnek-e.

Az URL-ekről

Ha rákattint az oldalon megjelenő Blazor Assembly bal oldali menüre, észre fogja venni, hogy az URL megváltozik. Ez a viselkedés nem követi a ASP.NET Core MVC által elvárt URL-viselkedést, ezért ha lehetséges, a Blazor Assemblynek lehetőleg úgy kell létrehoznia az URL-t, hogy az URL-cím ne változzon.

Amikor megnyit egy Blazor-oldalt

Amikor a Számláló menüre kattint

Változásnapló

2022/7/12

Hozzáadott pontok, amelyeket meg kell jegyezni, amikor kizárja a felesleges fájlokat a közzétett Blazor alkalmazás fájlelhelyezéséből.

2022/3/30

őskiadás

A Blazor WebAssembly-ben létrehozott alkalmazások helye az IIS-ben

Több Blazor webösszeállítás telepítése ASP.NET Core MVC-ben