Blazor

Nasadenie viacerých Blazor WebAssemblys v ASP.NET Core MVC

Dátum vytvorenia strany :

životné prostredie

Vizuálne štúdio
  • Visual Studio 2019
.NET
  • .NET 5.0

Najskôr

Tieto tipy predpokladajú vaše znalosti o "Spustení Blazor WebAssembly v ASP.NET Core MVC View", takže ak neviete, ako spustiť Blazor Assembly na ASP.NET Core MVC, pozrite si tento článok.

Predchádzajúca metóda vám umožňuje umiestniť iba jednu zostavu Blazor, takže tieto tipy vám umožňujú umiestniť viac ako jednu.

Vytvorenie dvoch zostáv Blazor

Môžete sa uistiť, že dve zostavy Blazor bežia, takže môžete robiť čokoľvek, čo je Zhromaždenie Blazor. Prosím, urobte to tak, aby ste v tejto chvíli videli rozdiel. Tu sa farba ľavého menu zmení pre počiatočný stav projektu.

Publikujte každý projekt a pripravte súbor.

vytvorenie ASP.NET základného MVC projektu

To je tiež založené na tipoch predtým na vytvorenie projektu. Po vytvorení projektu pridajte "in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Oprava _Layout.cshtml

Je to rovnaké ako minule.

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

Pridanie strán pre dve zostavy Blazor

Tentokrát budeme mať dva pohľady, aby sme ukázali každé zhromaždenie Blazoru.

HomeController pridajte dve akcie do položky . Opäť platí, že strana servera nerobí nič konkrétne, takže stačí vrátiť pohľad.

HomeController.cs

// 省略

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

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

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

Ak chcete pridať zobrazenie, kliknite pravým tlačidlom myši na akciu. Prosím, choďte na dvoch.

Pohľad je vytvorený.

Po prvé, zriadiť prvé zhromaždenie Blazor.

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

Čo sa líši od predchádzajúceho, je to, že obsah základnej značky je <base href="/" /> vyrobený z . <base href="/Home/Blazor1/" />

Ak zmeníte túto cestu, Blazor Assembly bude môcť odkazovať na každý súbor, napríklad dll, ako na koreň tejto cesty v relatívnej ceste.

Aktuálna špecifikácia zostavy Blazor však určuje, že ovládač a akcia majú rovnakú cestu, pretože ak sa adresa URL určená akciou MVC nezhoduje s relatívnou cestou od hostiteľa tejto základne, zostava Blazor zlyhá pri načítaní.

Mimochodom, prípad tejto cesty je ovplyvnený, takže ak je adresa URL automaticky malá, mala by byť malá.

Blazor2.cshtml Editovať tiež. Blazor1.cshtml Upozorňujeme, že je to niečo iné ako .

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

Pridajte prepojenie, aby ste mohli prejsť na stránku blazoru.

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>

Spustenie.cs zmeny

Trasa trasy Blazor WebAssembly sa mení, takže ju povoľte pre každú cestu.

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

Blazor WebAssembly Nasadenie

Naposledy som publikovaný súbor umiestnil na wwwroot, ako to bolo, ale keďže som na každej stránke zadal cestu pre základnú značku, vytvorím priečinok s podobnou cestou na wwwroot.

Skopírujte obsah wwwroot publikovaného súboru do každého priečinka. Ako index.html predtým, nie je to potrebné.

poprava

Spustite ho, aby ste sa uistili, že blazor WebAssembly na každej stránke funguje správne.

ASP.NET Spustiť Blazor WebAssembly so zobrazením Core MVC