Blazor

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

Oldal létrehozásának dátuma :

környezet

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5,0

Először

Ez a tipp feltételezi a "Blazor WebAssembly futtatása ASP.NET Core MVC View"-ban való ismeretét, így ha nem tudja, hogyan kell futtatni a Blazor Assembly-t ASP.NET Core MVC-n, olvassa el ezt a cikket.

Az előző módszer lehetővé teszi, hogy csak egy Blazor szerelvényt helyezzen el, így ez a tipp lehetővé teszi, hogy egynél több helyet helyezzen el.

Hozzon létre két Blazor-szerelvényt

Győződjön meg róla, hogy a két Blazor Közgyűlés fut, így bármit megtehet, ami a Blazor Szerelvény. Kérjük, tegye meg, hogy egyelőre láthassa a különbséget. Itt a bal oldali menü színe megváltozik a projekt kezdeti állapotához.

Tegye közzé az egyes projekteket, és készítse elő a fájlt.

ASP.NET Core MVC projekt létrehozása

Ez a projekt létrehozásához szükséges tippeken is alapul. Miután létrehozta a projektet, adja hozzá a "NuGet Microsoft.AspNetCore.Components.WebAssembly.Server " szót.

A _Layout.cshtml javítása

Ez ugyanaz, mint legutóbb.

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

Lapok hozzáadása két Blazor-szerelvényhez

Ezúttal két nézetünk lesz, hogy megmutassuk minden Blazor Gyűlésnek.

HomeController két művelet hozzáadása a programhoz. Ismét a szerver oldal nem csinál semmit különösen, így csak vissza a nézetet.

FőoldalKontroller.cs

// 省略

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

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

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

Nézet hozzáadásához kattintson a jobb gombbal a műveletre. Kérlek, menj kettőért.

Létrejön a nézet.

Először is, hozza létre az első Blazor Gyűlést.

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.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>
}

Ami különbözik az előzőtől, az az, hogy az alapcímke <base href="/" /> tartalma abból készül. <base href="/Home/Blazor1/" />

Ha módosítja ezt az elérési utat, a Blazor-kódösszeállítás az egyes fájlokat, például a DLL-t hivatkozhatja az elérési út gyökereként egy relatív elérési úton.

A jelenlegi Blazor Assembly specifikáció azonban azt határozza meg, hogy a vezérlő és a művelet elérési útja azonos legyen, mert ha az MVC művelet által meghatározott URL-cím nem egyezik meg az alap állomásának relatív elérési útjával, a Blazor-kódösszeállítás betöltésekor sikertelen lesz.

Egyébként ennek az elérési útnak az esete érintett, így ha az URL-cím automatikusan kisbetűs, akkor kisbetűsnek kell lennie.

Blazor2.cshtml szerkesztést is. Blazor1.cshtml Kérjük, vegye figyelembe, hogy ez néhány más, mint .

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.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 hivatkozást, hogy navigálhasson Blazor oldalára.

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>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

Indítás.cs módosítások

A Blazor WebAssembly útvonalútvonala megváltozik, ezért engedélyezze azt minden útvonalhoz.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

Blazor webösszeállítás telepítése

Legutóbb a közzétett fájlt a wwwroot-ba helyeztem, de mivel minden oldalon megadtam az alapcímkéhez tartozó elérési utat, létrehozok egy mappát hasonló elérési úttal a wwwroot mappában.

Másolja a közzétett fájl wwwroot tartalmának tartalmát az egyes mappákba. Mint index.html korábban, ez nem szükséges.

kivégzés

Futtassa, hogy megbizonyosodjon arról, hogy a blazor WebAssembly minden oldalon megfelelően működik.

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