ASP.NET palaist Blazor WebAssembly ar Core MVC skatu

Lapa atjaunota : Svētdiena, 2022. gada 17. jūlijs

Lapas izveides datums : Trešdiena, 2022. gada 30. marts

vide

Vizuālā studija

Visual Studio 2019

.NET

.NET 5.0

Sākumā

Tā kā Blazor WebAssembly ir klienta tehnoloģija, nav svarīgi, kā darbojas tīmekļa serveris. Tomēr, lai klientiem nodrošinātu WebAssembly, ir nepieciešama vismaz servera puses konfigurācija. Palaidīsim servera programmu kā ASP.NET Core MVC Blazor WebAssembly.

Blazor WebAssembly izveide

Tagad mums tikai jāpārliecinās, ka Blazor WebAssembly darbojas, tāpēc mēs to atstāsim tādu, kāds tas bija, kad mēs izveidojām projektu.

Projekta nosaukums vai risinājuma nosaukums ir patvaļīgs.

Papildu informācijas ekrānā redzamais ekrāns "ASP.NET hosted on Core", kas tiek parādīts papildu informācijas ekrānā, var darboties arī kā MVC, taču iegūtais projekts atrodas tuvu API serverim, tāpēc mēs to šeit nepārbaudīsim.

Blazor WebAssembly publicēšana

Publicējiet failus, lai izvietotu Blazor WebAssembly ASP.NET Core MVC projektā.

Ar peles labo pogu noklikšķiniet uz projekta un izvēlieties Publicēt.

Atlasiet Mapes.

Atstājiet noklusējuma publicēšanas galamērķi.

Tiek parādīts publicēšanas ekrāns. Jūs varat iestatīt dažādus iestatījumus, bet pagaidām poga "Publicēt" tiek atstāta kā noklusējums.

Pagaidiet, līdz publicēšana sāksies un tiks veiksmīgi pabeigta. Ņemiet vērā, ka garie mapju ceļi var neizdoties.

Varat pārbaudīt, vai fails ir izveidots norādītajā mapē. Ja tas ir norādīts kā relatīvs ceļš, galamērķis ir attiecībā pret projektu.

Izveidojiet ASP.NET Core MVC projektu

Pēc tam izveidojiet ASP.NET Core MVC projektu. Visual Studio atvēršana atsevišķi var būt garlaicīga, tāpēc izveidojiet to Blazor WebAssembly risinājumā. Tā kā abi projekti šoreiz nav saistīti, nav problēmu pat tad, ja tie tiek veidoti atsevišķi.

Projekta nosaukums nav obligāts. Pārējie iestatījumi tiek atstāti to noklusējuma iestatījumos.

Tā kā Blazor puse pieņem, ka attīstība ir pabeigta ASP.NET projekts MVC pusē ir jaunuzņēmums.

Skatu veidošana Blazor montāžai

Šī joma mainīsies atkarībā no projekta, kuru jūs faktiski veidojat, tāpēc, lūdzu, mainiet to atbilstoši šim projektam. Šeit mēs to mainīsim, pamatojoties uz projekta parauga konfigurāciju.

Būtībā tas ir jāmaina, lai tas līdzinātos tam, kas izveidots, publicējot index.html Blazor asambleju.

Fiksēšana _Layout.cshtml

Es gribu atsaukties uz Blazor asamblejas CSS, lai es varētu to rakstīt tieši uz . _Layout.cshtml Mēs vēlamies, lai tas pēc iespējas vairāk tiktu piemērots tikai mērķa lapai, lai mēs to varētu paplašināt, pievienojot, RenderSectionAsync lai saites uz CSS varētu rakstīt katrā lapā.

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

Lapas pievienošana Blazor asamblejai

Pievienojiet īpašu lapu, lai parādītu Blazor asambleju. ASP.NET Parastais lapu papildinājums un procedūra Core MVC ir vienādi.

HomeController Pievienojiet tālāk norādītās darbības . Servera puse neko īpaši nedara, tāpēc tā vienkārši atgriež skatu.

SākumsKontrolleris.cs

// 省略

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

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

Ar peles labo pogu noklikšķiniet uz darbības, lai pievienotu skatu.

Nav ar ko saistīties, tāpēc pievienojiet to, kā ir.

Skats ir izveidots.

Izmantojot Blazoras asamblejas index.html publicēšanas laikā radīto, ir atsauce, mēs to pārtaisīsim šādi.

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

Pievienojiet saiti, lai jūs varētu naviģēt uz lapu 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>

Microsoft.AspNetCore.Components.WebAssembly.Server atsauces pievienošana

Startup.cs Jums pašam nav jāraksta vajadzīgais kods, bet ērtības labad jūs saņemat no Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Ar peles labo pogu noklikšķiniet uz Atkarības un atlasiet Pārvaldīt NuGet pakotnes.

Atlasiet cilni Administrēšana un meklēšanas laukā ievadiet Microsoft.AspNetCore.Components.WebAssembly.Server.

Tiek parādīta pakotne ar tādu pašu nosaukumu, tāpēc instalējiet to.

Pārbaudiet, vai pakotne ir pievienota.

Startēšanas izmaiņas.cs

app.UseHttpsRedirection(); Iestarpina šādu kodu rindā aiz rindas:

app.UseBlazorFrameworkFiles();

Blazor WebAssembly izvietošana

Būtībā jūs varat ievietot publicēto Blazor WebAssembly wwwroot mapi, kāda tā ir ASP.NEt Core wwwroot mapē, taču jums tas ir jāizdzēš,index.html jo tas vairs nebūs vajadzīgs. Turklāt, tā kā tas irfavicon.ico dublēts, izlemiet, kuru ikonu izmantot.

Atlaižot ar PWA, ja esat izslēdzis failus (piemēram.html, kas atrodas mapē wwwroot, Jums būs jāatver teksta redaktorā, arī mapē wwwroot, un jāizdzēš ieraksti izslēgtajā failā service-worker-assets.js . Pretējā gadījumā, atverot tīmekļa ekrānu, var tikt parādīts iekšējs kļūdas ziņojums.

Publicējot Blazor lietotni, tas nav jādara manuāli, izslēdzot nevajadzīgus failus no sava projekta.

PAA gadījumā iekšējās kļūdas rodas, ja tās neatrodas https vidē. To nevar uzstādīt kā PWA.

Izpildes apstiprinājums

ASP.NET Debug vada Core MVC projektu. Apmeklējiet Blazor lapu un pārbaudiet, vai lapā parādās Blazor Asamblejas izkārtojums. Atlasiet kreiso izvēlni un pārbaudiet, vai katrs līdzeklis darbojas.

Par vietrāžiem URL

Noklikšķinot uz lapā redzamās Blazor Assembly kreisās izvēlnes, jūs pamanīsit, ka URL mainās. Šī darbība neatbilst URL uzvedībai, ko sagaida ASP.NET Core MVC, tāpēc, ja iespējams, Blazor asamblejai vēlams izveidot URL tā, lai URL nemainītos.

Atverot Blazor lapu

Noklikšķinot uz izvēlnes Skaitīt

Izmaiņu žurnāls

2022/7/12

Pievienoti punkti, kas jāņem vērā, izslēdzot nevajadzīgus failus publicētās Blazor lietotnes failu izvietojumā.

2022/3/30

pirmais izdevums

Ievietojiet Blazor WebAssembly izveidotās lietotnes IIS

Vairāku Blazor WebAssemblys izvietošana ASP.NET Core MVC