Blāzors

Vairāku Blazor WebAssemblys izvietošana ASP.NET Core MVC

Lapas izveides datums :

vide

Vizuālā studija
  • Visual Studio 2019
.NET
  • .NET 5.0

Sākumā

Šie padomi pieņem jūsu zināšanas par "Running Blazor WebAssembly in ASP.NET Core MVC View", tāpēc, ja nezināt, kā palaist Blazor Assembly uz ASP.NET Core MVC, skatiet šo rakstu.

Iepriekšējā metode ļauj novietot tikai vienu Blazora montāžu, tāpēc šie padomi ļauj ievietot vairāk nekā vienu.

Izveidot divas liesmas montāžas

Jūs varat pārliecināties, ka abas Blazora asamblejas darbojas attiecīgi, lai jūs varētu darīt visu, kas ir Blazora asambleja. Lūdzu, padariet to tā, lai jūs varētu redzēt atšķirību pagaidām. Šeit kreisās izvēlnes krāsa tiek mainīta projekta sākotnējam stāvoklim.

Publicējiet katru projektu un sagatavojiet failu.

izveidot ASP.NET core MVC projektu

Tas ir balstīts arī uz padomiem pirms projekta izveides. Kad esat izveidojis savu projektu, pievienojiet "in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Labojums _Layout.cshtml

Tas ir tas pats, kas iepriekšējā reizē.

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

Lappušu pievienošana divām Blazora montāžām

Šoreiz mums būs divi skati, lai parādītu katru Blazora asambleju.

HomeController pievienot divas darbības . Atkal servera puse neko īpaši nedara, tāpēc vienkārši atgrieziet skatu.

SākumsKontrollers.cs

// 省略

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

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

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

Ar peles labo pogu noklikšķiniet uz darbības, lai pievienotu skatu. Lūdzu, dodieties uz diviem.

Skats ir izveidots.

Pirmkārt, izveidojiet pirmo Blazora asambleju.

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

Kas atšķiras no iepriekšējā, ir tas, ka pamatbirkas saturs ir <base href="/" /> izgatavots no . <base href="/Home/Blazor1/" />

Ja maināt šo ceļu, Blazora montāža varēs atsaukties uz katru failu, piemēram, dll, kā šī ceļa sakni relatīvā ceļā.

Tomēr pašreizējā Blazora montāžas specifikācijā ir norādīts, ka kontrolierim un darbībai ir viens un tas pats ceļš, jo, ja MVC darbības noteiktais URL neatbilst relatīvajam ceļam no šīs bāzes resursdatora, ielādējot Blazora montāža neizdosies.

Starp citu, tiek ietekmēts šī ceļa gadījums, tāpēc, ja URL ir automātiski mazais, tam jābūt mazajam.

Blazor2.cshtml rediģēt, kā arī. Blazor1.cshtml Lūdzu, ņemiet vērā, ka tas atšķiras no .

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

Pievienojiet saiti, lai varētu naviģēt uz liesmoņa lapu.

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>

Startēšana.cs izmaiņas

Blazor WebAssembly maršruta ceļš mainās, tāpēc iespējojiet to katram ceļam.

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

Blazor WebAssembly izvietošana

Pēdējo reizi es ievietoju publicēto failu wwwroot, kā tas bija, bet, tā kā es katrā lapā norādīju ceļu bāzes tagam, es izveidoju mapi ar līdzīgu ceļu wwwroot.

Kopējiet publicētā faila wwwroot saturu katrā mapē. Tāpat kā index.html iepriekš, tas nav nepieciešams.

Izpildes

Palaidiet to, lai pārliecinātos, ka liesmas WebAssembly katrā lapā darbojas pareizi.

ASP.NET palaist Blazor WebAssembly ar Core MVC skatu