ASP.NET spuštění Blazor WebAssembly se zobrazením Core MVC

Stránky aktualizovány : neděle 17. července 2022

Datum vytvoření stránky : středa 30. března 2022

životní prostředí

Vizuální sada

Vizuální sada 2019

Rozhraní .NET

Rozhraní .NET 5,0

Nejprve

Vzhledem k tomu, že Blazor WebAssembly je klientská technologie, nezáleží na tom, jak webový server funguje. Aby však bylo možné obsluhovat WebAssembly klientům, je vyžadována minimálně konfigurace na straně serveru. Pojďme spustit serverový program jako ASP.NET Core MVC v Blazor WebAssembly.

Vytvoření Blazor WebAssembly

Teď se jen musíme ujistit, že Blazor WebAssembly funguje, takže to necháme tak, jak to bylo, když jsme projekt vytvořili.

Název projektu nebo název řešení je libovolný.

Obrazovka "ASP.NET hostovaná v Core" zobrazená na obrazovce s dalšími informacemi může také fungovat jako MVC, ale výsledný projekt je blízko serveru API, takže jej zde nebudeme kontrolovat.

Publikování Blazor WebAssembly

Publikujte soubory pro nasazení Blazor WebAssembly do projektu MVC ASP.NET Core.

Klikněte pravým tlačítkem na projekt a zvolte Publikovat.

Vyberte Složky.

Ponechte výchozí cíl publikování.

Zobrazí se obrazovka publikování. Můžete nastavit různá nastavení, ale prozatím je tlačítko "Publikovat" ponecháno jako výchozí.

Počkejte, až se publikování začne a úspěšně dokončí. Všimněte si, že dlouhé cesty ke složkám mohou selhat.

Můžete ověřit, zda byl soubor vytvořen v zadané složce. Pokud je zadána jako relativní cesta, cíl je relativní k projektu.

Vytvoření projektu MVC ASP.NET Core

Dále vytvořte projekt MVC ASP.NET Core. Otevření sady Visual Studio samostatně může být zdlouhavé, takže ji vytvořte v rámci Blazor WebAssembly řešení. Vzhledem k tomu, že oba projekty nejsou tentokrát propojeny, není problém, i když jsou vytvořeny samostatně.

Název projektu je volitelný. Ostatní nastavení jsou ponechána ve výchozím nastavení.

Vzhledem k tomu, že Blazor strana předpokládá, že vývoj je dokončen ASP.NET projekt na straně jádra MVC je spuštění.

Vytváření zobrazení pro Blazor Assembly

Tato oblast se bude měnit v závislosti na projektu, který skutečně vytváříte, proto ji prosím upravte podle tohoto projektu. Zde jej upravíme na základě konfigurace ukázkového projektu.

V podstatě by měl být upraven tak, aby se podobal tomu, který byl vytvořen při publikování index.html Blazor Assembly.

Oprava _Layout.cshtml

Chci odkazovat na CSS Blazor Assembly, abych to mohl napsat přímo do . _Layout.cshtml Chceme, aby byl aplikován pouze na cílovou stránku co nejvíce, abychom jej mohli rozšířit přidáním tak RenderSectionAsync , aby odkazy na CSS mohly být napsány na každé stránce.

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

Přidání stránky pro Blazor Assembly

Přidejte vyhrazenou stránku pro zobrazení Blazor assembly. ASP.NET Normální přidání stránky a postup v Core MVC jsou stejné.

HomeController Do programu . Přidejte následující akce Strana serveru nedělá nic konkrétního, takže pouze vrací zobrazení.

HomeController.cs

// 省略

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

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

Kliknutím pravým tlačítkem myši na akci přidáte zobrazení.

Není na co se vázat, tak to přidejte tak, jak je.

Zobrazení je vytvořeno.

Pomocí odkazu vygenerovaného v době publikování index.html Blazor Assembly jej předěláme následujícím způsobem.

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

Přidejte odkaz, abyste mohli přejít na stránku v Blazor.

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>

Přidat Microsoft.AspNetCore.Components.WebAssembly.Server odkaz

Startup.cs Nemusíte psát potřebný kód sami, ale pro usnadnění získáte z Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Klikněte pravým tlačítkem na závislosti a vyberte Spravovat balíčky NuGet.

Vyberte kartu Správa a do vyhledávacího pole zadejte Microsoft.AspNetCore.Components.WebAssembly.Server .

Zobrazí se balíček se stejným názvem, proto jej nainstalujte.

Ověřte, zda byl balíček přidán.

Změny ve spuštění.cs

app.UseHttpsRedirection(); Na řádek za řádkem vložte následující kód:

app.UseBlazorFrameworkFiles();

Nasazení Blazor WebAssembly

V podstatě můžete publikovanou blazor WebAssembly wwwroot složku umístit tak, jak je, do složky wwwroot ASP.NEt Core, ale měli byste ji odstranit,index.html protože už nebude potřeba. Také, protože jefavicon.ico dabován, rozhodněte se, kterou ikonu použít.

Pokud jste při uvolňování s PWA vyloučili soubory (například index.html) ve složce wwwroot, Budete muset otevřít v textovém editoru, také ve složce wwwroot, a odstranit záznamy ve service-worker-assets.js vyloučeném souboru. V opačném případě se při otevření webové obrazovky může zobrazit vnitřní chyba.

Když publikujete Blazor aplikaci, nemusíte to dělat ručně vyloučením nepotřebných souborů z projektu.

V případě PWA dochází k interním chybám, pokud nejsou v prostředí https. Nelze jej nainstalovat jako PWA.

Potvrzení o provedení

ASP.NET ladění spusťte projekt Core MVC. Navštivte blazor stránku a ověřte, že se na stránce zobrazí rozložení Blazor Assembly. Vyberte levou nabídku a ověřte, zda každá funkce funguje.

Adresy URL

Pokud kliknete na blazor assembly levou nabídku zobrazenou na stránce, všimnete si, že se změní adresa URL. Toto chování neodpovídá chování adresy URL očekávané ASP.NET Core MVC, takže pokud je to možné, Blazor Assembly by mělo přednostně vytvořit adresu URL takovým způsobem, aby se adresa URL nezměnila.

Když otevřete Blazor stránku

Když kliknete na nabídku Počítadlo

Seznam změn

2022/7/12

Přidány body k poznámce při vyloučení nepotřebných souborů v umístění souboru publikované Blazor aplikace.

2022/3/30

první vydání

Umístění aplikací vytvořených v Blazor WebAssembly ve službě IIS

Nasazení více Blazor WebAssemblys v ASP.NET Core MVC