Blazoras

Kelių Blazor WebAssemblys diegimas ASP.NET Core MVC

Puslapio sukūrimo data :

Aplinkos

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

Iš pradžių

Šis patarimas prisiima jūsų žinias apie "Blazor WebAssembly" veikimą ASP.NET "Core MVC View", taigi, jei nežinote, kaip paleisti "Blazor Assembly" ASP.NET Core MVC, žiūrėkite šį straipsnį.

Ankstesnis metodas leidžia įdėti tik vieną "Blazor" surinkimą, todėl šis patarimas leidžia įdėti daugiau nei vieną.

Sukurkite du blazorų rinkinius

Galite įsitikinti, kad du "Blazor Assembly" veikia atitinkamai, todėl galite daryti viską, kas yra "Blazor Assembly". Padarykite tai, kad šiuo metu galėtumėte pamatyti skirtumą. Čia kairiojo meniu spalva pakeičiama į pradinę projekto būseną.

Publikuoti kiekvieną projektą ir paruošti failą.

sukurti ASP.NET Core MVC projektą

Tai taip pat pagrįsta patarimais prieš kuriant projektą. Sukūrę savo projektą, pridėkite "nuGet Microsoft.AspNetCore.Components.WebAssembly.Server ".

Pataisykite _Layout.cshtml

Tai tas pats, kas praėjusį kartą.

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

Pridėti puslapius dviem blazorų rinkiniui

Šį kartą turėsime du rodinius, kad parodytume kiekvieną Blazoro asamblėją.

HomeController įtraukti du veiksmus į . Vėlgi, serverio pusė nieko konkrečiai nedaro, todėl tiesiog grąžinkite rodinį.

HomeController.cs

// 省略

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

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

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

Dešiniuoju pelės mygtuku spustelėkite veiksmą, kad įtrauktumėte rodinį. Prašau, eikite į du.

Vaizdas sukurtas.

Pirma, įsteigti pirmąjį Blazor asamblėja.

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 skiriasi nuo ankstesnio, yra tai, kad pagrindinės žymės turinys yra <base href="/" /> pagamintas iš . <base href="/Home/Blazor1/" />

Jei pakeisite šį kelią, "Blazor Assembly" galės nurodyti kiekvieną failą, pvz., dll, kaip šio kelio šaknį santykiniame kelyje.

Tačiau dabartinėje Blazoro rinkinio specifikacijoje nurodoma, kad valdiklis ir veiksmas turi tą patį kelią, nes jei MVC veiksmu nustatytas URL neatitinka santykinio kelio iš šios bazės pagrindinio kompiuterio, įkeliant "Blazor Assembly" nepavyks.

Beje, šio kelio atvejis yra paveiktas, todėl, jei URL automatiškai mažinamas, jis turėtų būti mažosiomis raidėmis.

Blazor2.cshtml Taip pat redaguoti. Blazor1.cshtml Atkreipkite dėmesį, kad tai šiek tiek skiriasi nuo .

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

Įtraukite saitą, kad galėtumėte pereiti į "Blazor" puslapį.

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>

Paleistis.cs keitimai

Blazor WebAssembly maršruto kelias pasikeičia, todėl įgalinkite jį kiekvienam keliui.

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

Blazor WebAssembly diegimas

Paskutinį kartą publikuotą failą įdėjau į wwwroot, kaip jis buvo, bet kadangi kiekviename puslapyje nurodžiau pagrindinės žymės kelią, sukūriau aplanką su panašiu keliu wwwroot.

Nukopijuokite publikuoto failo wwwroot turinį į kiekvieną aplanką. Kaip ir index.html anksčiau, tai nėra būtina.

Vykdymo

Paleiskite jį, kad įsitikintumėte, jog "Blazor WebAssembly" kiekviename puslapyje veikia tinkamai.

ASP.NET Paleiskite "Blazor WebAssembly" naudodami pagrindinį MVC rodinį