Blazor

Mitme Blazor WebAssemblyse juurutamine ASP.NET Core MVC-s

Lehe loomise kuupäev :

keskkond

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

Alguses

Need näpunäited eeldavad teie teadmisi "Blazor WebAssembly käitamine ASP.NET Core MVC vaates", nii et kui te ei tea, kuidas Blazori assemblerit ASP.NET Core MVC-s käivitada, vaadake seda artiklit.

Eelmine meetod võimaldab teil paigutada ainult ühe Blazori assamblee, nii et see näpunäide võimaldab teil paigutada rohkem kui ühe.

Kahe Blazori assamblee loomine

Võite olla kindel, et kaks Blazori assambleed töötavad vastavalt, nii et saate teha, mida iganes Blazori assamblee on. Palun tehke seda nii, et näeksite praegu erinevust. Siin muudetakse vasakpoolse menüü värvi projekti algolekus.

Avaldage iga projekt ja valmistage fail ette.

ASP.NET Core MVC projekti loomine

See põhineb ka varasematel näpunäidetel projekti loomiseks. Kui olete oma projekti loonud, lisage "NuGetis Microsoft.AspNetCore.Components.WebAssembly.Server ".

_Layout.cshtml parandamine

See on sama, mis eelmine kord.

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

Kahe Blazori assamblee lehtede lisamine

Seekord on meil kaks vaadet, et näidata iga Blazori assambleed.

HomeController lisage rakendusse kaks toimingut . Jällegi ei tee serveri pool midagi konkreetset, nii et lihtsalt tagastage vaade.

HomeController.cs

// 省略

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

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

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

Vaate lisamiseks paremklõpsake toimingut. Palun minge kahele.

Vaade on loodud.

Kõigepealt moodustage esimene Blazori assamblee.

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

Mis erineb eelmisest, on see, et aluse sildi sisu on <base href="/" /> valmistatud . <base href="/Home/Blazor1/" />

Kui muudate seda teed, saab Blazori assembler viidata igale failile (nt dll) kui selle tee juurtele suhtelisel teel.

Praegune Blazori assembleri spetsifikatsioon määrab siiski, et kontrolleril ja toimingul on sama tee, sest kui MVC toiminguga määratud URL ei vasta selle baasi hosti suhtelisele teele, ebaõnnestub Blazori assamblee laadimisel.

Muide, see mõjutab selle tee juhtumit, nii et kui URL on automaatselt väike, peaks see olema väike.

Blazor2.cshtml Redigeerige ka. Blazor1.cshtml Pange tähele, et see erineb mõnest .

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

Lisage link, et saaksite blazori lehele navigeerida.

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>

Käivitus.cs muudatused

Blazor WebAssembly marsruuditee muutub, nii et lubage see iga tee jaoks.

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

Blazor WebAssembly juurutamine

Viimane kord panin avaldatud faili wwwrooti, nagu see oli, kuid kuna ma määrasin igale lehele alussildile tee, loon wwwrootis sarnase teega kausta.

Kopeerige avaldatud faili wwwrooti sisu igasse kausta. Nagu index.html varemgi, ei ole see vajalik.

Täitmise

Käivitage see veendumaks, et blazor WebAssembly töötab igal lehel õigesti.

ASP.NET käivitada Blazor WebAssembly MVC põhivaatega