Blazor

Uvajanje več Blazor webAssemblys v ASP.NET core MVC

Datum ustvarjanja strani :

okolje

Vizualni studio
  • Vizualni studio 2019
.NET
  • .NET 5.0

Sprva

Ta Nasveti predvidevajo vaše znanje o "Teku Blazor WebAssembly in ASP.NET Core MVC View", tako da če ne veste, kako zagnati Blazor Assembly na ASP.NET Core MVC, si oglejte ta članek.

Prejšnja metoda vam omogoča, da postavite le en Blazor sestav, zato vam ta Nasveti omogoča, da postavite več kot enega.

Ustvarite dva blazorska sklopa

Prepričajte se lahko, da bosta zbor Blazorja kandidirali, tako da lahko storite karkoli je zbor Blazorja. Prosim, naredite tako, da boste lahko videli razliko za zdaj. Tukaj se spremeni barva levega menija za začetno stanje projekta.

Objavite vsak projekt in pripravite datoteko.

ustvariti ASP.NET osrednji projekt MVC

To temelji tudi na nasvetih, ki jih je treba pred tem ustvariti. Ko ustvarite projekt, dodajte »v Microsoft.AspNetCore.Components.WebAssembly.Server NuGet«.

Popravi _Layout.cshtml

To je enako kot zadnjič.

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

Dodajanje strani za dva blazorska sklopa

Tokrat bomo imeli dva stališča, da pokažemo vsako Skupščino Blazorja.

HomeController dodajte dve dejanji v . Spet stran strežnika ne naredi nič posebnega, zato samo vrnite pogled.

HomeController.cs

// 省略

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

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

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

Z desno tipko miške kliknite dejanje, da dodate pogled. Prosim, pojdi na dva.

Pogled je ustvarjen.

Najprej postavite prvi Blazorski zbor.

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

Tisto, kar se razlikuje od prejšnje, je, da je vsebina osnovne oznake narejena <base href="/" /> iz . <base href="/Home/Blazor1/" />

Če spremenite to pot, bo Blazor Assembly lahko sklicevanje na vsako datoteko, kot je DLL, kot koren te poti na relativni poti.

Trenutna specifikacija blazorske skupščine pa določa, da imata krmilnik in dejanje enako pot, saj če se URL, ki ga določa ukrep MVC, ne ujema z relativno potjo gostitelja te baze, bo blazorska skupščina pri nalaganju odpovedala.

Mimogrede, primer te poti je prizadet, tako da, če je URL samodejno manjše, mora biti manjše.

Blazor2.cshtml uredite tudi. Blazor1.cshtml Upoštevajte, da se razlikuje od .

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

Dodajte povezavo, tako da se lahko pomaknete na stran Blazorja.

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>

Zagon.cs spremembe

Pot blazorja WebAssembly se spreminja, zato jo omogočite za vsako pot.

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

Blazor WebAssembly Uvajanje

Zadnjič sem objavil datoteko v wwwroot, kot je bila, ampak ker sem določil pot za osnovno oznako na vsaki strani, ustvarim mapo s podobno potjo v wwwroot.

Kopirajte vsebino wwwroota objavljene datoteke v vsako mapo. Kot prej index.html , to ni potrebno.

usmrtitev

Zaženite ga, da se prepričate, da blazor WebAssembly na vsaki strani deluje pravilno.

ASP.NET ZaženiTe Blazor WebAssembly s temeljnim prikazom MVC