ASP.NET Spustiť Blazor WebAssembly so zobrazením Core MVC

Stránka aktualizovaná : nedeľa 17. júla 2022

Dátum vytvorenia strany : streda 30. marca 2022

životné prostredie

Vizuálne štúdio

Vizuálne štúdio 2019

.NET

.NET 5.0

Najskôr

Keďže Blazor WebAssembly je klientska technológia, nezáleží na tom, ako funguje webový server. Aby sa však webassembly zobrazoval klientom, je potrebná minimálne konfigurácia na strane servera. Spustite serverový program ako ASP.NET Core MVC v Blazor WebAssembly.

Vytvorenie blazorskej webovej zostavy

Teraz sa musíme len uistiť, že Blazor WebAssembly funguje, takže to necháme tak, ako to bolo, keď sme projekt vytvorili.

Názov projektu alebo názov riešenia je ľubovoľný.

Obrazovka "ASP.NET hosťovaná na Core" zobrazená na obrazovke s ďalšími informáciami môže fungovať aj ako MVC, ale výsledný projekt je v blízkosti servera API, takže ho tu nebudeme kontrolovať.

Vydavateľstvo Blazor WebAssembly

Publikovať súbory na nasadenie Blazor WebAssembly do projektu ASP.NET Core MVC.

Kliknite pravým tlačidlom myši na projekt a vyberte položku Publikovať.

Vyberte položku Priečinky.

Zanechajte predvolený cieľ publikovania.

Zobrazí sa obrazovka publikovania. Môžete nastaviť rôzne nastavenia, ale zatiaľ je tlačidlo "Publikovať" ponechané ako predvolené.

Počkajte na začatie a úspešné dokončenie publikovania. Upozorňujeme, že cesty dlhých priečinkov môžu zlyhať.

Môžete overiť, či bol súbor vytvorený v zadanom priečinku. Ak je zadaná ako relatívna cesta, cieľ je relatívny k projektu.

Vytvorenie ASP.NET základného projektu MVC

Ďalej vytvorte projekt ASP.NET Core MVC. Otvorenie Visual Studio samostatne môže byť únavné, takže ho vytvorte vo vnútri riešenia Blazor WebAssembly. Keďže tieto dva projekty tentoraz nie sú prepojené, nie je problém, aj keď sú vytvorené samostatne.

Názov projektu je voliteľný. Ostatné nastavenia zostávajú v predvolených nastaveniach.

Keďže blazorská strana predpokladá, že vývoj je ukončený ASP.NET projekt na základnej strane MVC je startup.

Vytváranie názorov pre blazorské zhromaždenie

Táto oblasť sa bude meniť v závislosti od projektu, ktorý skutočne vytvárate, preto ju prosím upravte podľa tohto projektu. Tu ho upravíme na základe konfigurácie vzorového projektu.

V podstate by mal byť upravený tak, aby sa podobal tomu, ktorý bol vytvorený pri publikovaní Blazorského index.html zhromaždenia.

Oprava _Layout.cshtml

Chcem odkázať na CSS blazorského zhromaždenia, aby som to mohol napísať priamo na . _Layout.cshtml Chceme, aby sa čo najviac uplatňovala len na cieľovú stránku, aby sme ju mohli rozšíriť pridaním tak RenderSectionAsync , aby odkazy na CSS mohli byť napísané na každej stránke.

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

Pridanie strany pre blazorské zhromaždenie

Pridajte vyhradenú stránku na zobrazenie zostavy Blazor. ASP.NET Normálne pridanie stránky a postup v Core MVC sú rovnaké.

HomeController Pridajte nasledujúce akcie do systému . Strana servera nerobí nič konkrétne, takže len vracia zobrazenie.

HomeController.cs

// 省略

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

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

Kliknutím pravým tlačidlom myši na akciu pridajte zobrazenie.

Nie je sa na čo viazať, tak to pridajte tak, ako to je.

Zobrazenie je vytvorené.

Použitím vygenerovaného v čase zverejnenia Blazorského index.html zhromaždenia sa odkazuje, prerobíme ho nasledovne.

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.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>
}

Pridajte prepojenie, aby ste mohli prejsť na stránku v Blaze.

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>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Pridanie odkazu na server Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Nemusíte písať potrebný kód sami, ale pre jednoduchosť získate od Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Kliknite pravým tlačidlom myši na položku Závislosti a vyberte položku Spravovať balíky NuGet.

Vyberte kartu Správa a do vyhľadávacieho poľa zadajte výraz Microsoft.AspNetCore.Components.WebAssembly.Server.

Zobrazí sa balík s rovnakým názvom, takže ho nainštalujte.

Skontrolujte, či bol balík pridaný.

Zmeny v startupe.cs

app.UseHttpsRedirection(); Vložte nasledujúci kód na riadok nasledujúci za riadok:

app.UseBlazorFrameworkFiles();

Nasadenie Blazor WebAssembly

V podstate môžete vložiť publikovaný priečinok Blazor WebAssembly wwwroot, ako je to v priečinku wwwroot ASP.NEt Core, ale mali by ste ho odstrániť,index.html pretože už nebude potrebný. Tiež, pretože jefavicon.ico dabovaný, rozhodnite sa, ktorú ikonu použiť.

Pri uvoľňovaní pomocou PWA, ak ste vylúčili súbory (napríklad index.html) v priečinku wwwroot, Budete musieť otvoriť v textovom editore, tiež v priečinku wwwroot, a odstrániť záznamy vo service-worker-assets.js vylúčenom súbore. V opačnom prípade sa pri otvorení webovej obrazovky môže vyskytnúť vnútorná chyba.

Keď publikujete aplikáciu Blazor, nemusíte to robiť manuálne vylúčením nepotrebných súborov z projektu.

V prípade PWA sa vyskytujú interné chyby, ak nie sú v prostredí https. Nie je možné ho nainštalovať ako PWA.

Potvrdenie o vykonaní

ASP.NET Debug prevádzkuje projekt Core MVC. Navštívte stránku Blazor a overte, či sa na stránke zobrazuje rozloženie blazorskej zostavy. Vyberte ľavú ponuku a overte, či každá funkcia funguje.

Informácie o adresách URL

Ak kliknete na ľavú ponuku Blazor Assembly zobrazenú na stránke, všimnete si, že url adresa sa mení. Toto správanie sa neriadi správaním URL, ktoré očakáva ASP.NET Core MVC, takže ak je to možné, Blazor Assembly by mal prednostne vytvoriť URL adresu tak, aby sa url adresa nezmenila.

Keď otvoríte stránku Blazor

Po kliknutí na ponuku Počítadlo

Changelog

2022/7/12

Pridané body na poznámku pri vylúčení nepotrebných súborov v umiestnení súboru publikovanej aplikácie Blazor.

2022/3/30

Prvé vydanie

Umiestnenie aplikácií vytvorených v Blazor WebAssembly v službe IIS

Nasadenie viacerých Blazor WebAssemblys v ASP.NET Core MVC