Blazor

Useiden Blazor WebAssemblys -laitteiden käyttöönotto ASP.NET Core MVC:ssä

Sivun luontipäivämäärä :

ympäristö

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

Alun perin

Nämä vinkit edellyttävät tietämystäsi "Running Blazor WebAssembly in ASP.NET Core MVC View", joten jos et tiedä kuinka suorittaa Blazor Assembly ASP.NET Core MVC: llä, katso kyseinen artikkeli.

Edellisen menetelmän avulla voit sijoittaa vain yhden Blazor-kokoonpanon, joten tämän vinkin avulla voit sijoittaa useamman kuin yhden.

Luo kaksi Blazor-kokoonpanoa

Voit varmistaa, että kaksi Blazor-edustajakokousta on käynnissä, joten voit tehdä mitä blazor-kokoonpano on. Tee se niin, että näet eron toistaiseksi. Tässä vasemman valikon väri muuttuu projektin alkuperäisen tilan mukaan.

Julkaise jokainen projekti ja valmistele tiedosto.

ASP.NET Core MVC -projektin luominen

Tämä perustuu myös projektin luomista edeltäviin vihjeisiin. Kun olet luonut projektin, lisää 'NuGetissa Microsoft.AspNetCore.Components.WebAssembly.Server '.

Korjaa _Layout.cshtml

Tämä on sama kuin viimeksi.

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

Sivujen lisääminen kahdelle Blazor-kokoonpanolle

Tällä kertaa meillä on kaksi näkymää näytettäväksi jokaiselle Blazorin edustajakokoukselle.

HomeController lisää -järjestelmään kaksi toimintoa. Jälleen palvelinpuoli ei tee mitään erityistä, joten palauta vain näkymä.

HomeController.cs

// 省略

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

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

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

Lisää näkymä napsauttamalla toimintoa hiiren kakkospainikkeella. Ole hyvä ja valitse kaksi.

Näkymä on luotu.

Ensinnäkin, aseta ensimmäinen Blazorin kokous.

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

Mikä eroaa edellisestä, on se, että perustunnisteen sisältö on <base href="/" /> valmistettu -järjestelmästä. <base href="/Home/Blazor1/" />

Jos muutat tätä polkua, Blazor Assembly voi viitata jokaiseen tiedostoon, kuten dll-tiedostoon, tämän polun pääkansiona suhteellisessa polussa.

Nykyinen Blazor Assembly -määritys määrittää kuitenkin, että ohjaimella ja toiminnolla on sama polku, koska jos MVC-toiminnon määrittämä URL-osoite ei vastaa tämän tukikohdan isännän suhteellista polkua, Blazor-kokoonpano epäonnistuu lataamisen yhteydessä.

Muuten, tämä polku vaikuttaa tähän polkuun, joten jos URL-osoite on automaattisesti pieni, sen pitäisi olla pieni.

Blazor2.cshtml myös muokata. Blazor1.cshtml Huomaa, että se eroaa jonkin verran .

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

Lisää linkki, jotta voit siirtyä Blazorin sivulle.

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äynnistys.cs Muutokset

Blazor WebAssemblyn reittipolku muuttuu, joten ota se käyttöön jokaiselle polulle.

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

Blazor WebAssembly -käyttöönotto

Viimeksi sijoitin julkaistun tiedoston wwwrootiin sellaisenaan, mutta koska määritin perustunnisteen polun jokaiselle sivulle, luon kansion, jolla on samanlainen polku wwwrootissa.

Kopioi julkaistun tiedoston wwwrootin sisältö kuhunkin kansioon. Kuten index.html aiemmin, sitä ei tarvita.

teloitus

Suorita se varmistaaksesi, että blazor WebAssembly toimii jokaisella sivulla oikein.

ASP.NET Suorita Blazor WebAssembly core MVC -näkymällä