Blazor

ASP.NET käivitada Blazor WebAssembly MVC põhivaatega

Lehekülg uuendatud :
Lehe loomise kuupäev :

keskkond

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

Alguses

Kuna Blazor WebAssembly on klienditehnoloogia, ei ole oluline, kuidas veebiserver töötab. WebAssembly klientidele teenindamiseks on siiski vaja vähemalt serveripoolset konfiguratsiooni. Käivitame serveriprogrammi ASP.NET Core MVC-na Blazor WebAssemblys.

Blazor WebAssembly loomine

Nüüd peame lihtsalt veenduma, et Blazor WebAssembly töötab, nii et jätame selle nii, nagu see oli projekti loomisel.

Projekti nimi või lahenduse nimi on meelevaldne.

Lisateabe ekraanil kuvatud ekraan "ASP.NET hostitud Core'is" võib töötada ka MVC-na, kuid saadud projekt on API-serveri lähedal, nii et me ei kontrolli seda siin.

Blazor WebAssembly avaldamine

Avaldage failid Blazor WebAssembly juurutamiseks ASP.NET Core MVC projekti.

Paremklõpsake projekti ja valige Avalda.

Valige Kaustad.

Jätke avaldamise vaikesihtkoht.

Kuvatakse avaldamiskuva. Saate määrata erinevaid seadeid, kuid praegu jääb vaikimisi nupp "Avalda".

Oodake, kuni avaldamine algab ja lõpeb edukalt. Pange tähele, et pikad kaustateed võivad nurjuda.

Saate kontrollida, kas fail on loodud määratud kaustas. Kui see on määratud suhteliseks teeks, on sihtkoht projekti suhtes.

ASP.NET Core MVC projekti loomine

Seejärel looge ASP.NET Core MVC projekt. Visual Studio eraldi avamine võib olla tüütu, nii et looge see Blazor WebAssembly lahenduse sees. Kuna need kaks projekti ei ole seekord omavahel seotud, ei ole probleemi isegi siis, kui need luuakse eraldi.

Projekti nimi on valikuline. Teised sätted jäetakse vaikesätetele.

Kuna Blazori pool eeldab, et arendus viiakse lõpule ASP.NET on MVC põhipoole projekt käivitamine.

Vaadete loomine Blazori assambleele

See ala muutub sõltuvalt projektist, mida te tegelikult loote, nii et palun muutke seda vastavalt sellele projektile. Siin muudame seda vastavalt näidisprojekti konfiguratsioonile.

Põhimõtteliselt tuleks seda muuta nii, et see sarnaneks Blazori assamblee avaldamisel index.html loodud omaga.

_Layout.cshtml kinnitamine

Ma tahan viidata Blazori assamblee CSS-ile, et saaksin selle otse kirjutada . _Layout.cshtml Me tahame, et seda rakendataks ainult sihtlehele nii palju kui võimalik, nii et saame seda laiendada, lisades, RenderSectionAsync et igale lehele saaks kirjutada linke CSS-ile.

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

Blazori assambleele lehe lisamine

Blazori assamblee kuvamiseks lisage spetsiaalne leht. ASP.NET Tavaline lehe lisamine ja protseduur Core MVC-s on samad.

HomeController Lisage rakendusse järgmisi toiminguid. Serveri pool ei tee midagi konkreetset, nii et see lihtsalt tagastab vaate.

HomeController.cs

// 省略

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

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

Vaate lisamiseks paremklõpsake toimingut.

Pole midagi, millega siduda, nii et lisage see nii, nagu see on.

Vaade on loodud.

Kasutades Blazori assamblee avaldamise index.html ajal loodud produkti, teeme selle ümber järgmiselt.

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

Lisage link, et saaksite Blazori lehele navigeerida.

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.Serveri viite lisamine

Startup.cs Te ei pea ise vajalikku koodi kirjutama, kuid NuGetilt Microsoft.AspNetCore.Components.WebAssembly.Server lihtsuse huvides saate.

Paremklõpsake sõltuvust ja valige Halda NuGeti pakette.

Valige vahekaart Haldus ja sisestage otsinguväljale tekst Microsoft.AspNetCore.Components.WebAssembly.Server.

Kuvatakse sama nimega pakett, nii et installige see.

Veenduge, et pakett on lisatud.

Muudatused käivitamisel.cs

app.UseHttpsRedirection(); Reale järgnevale reale saate lisada järgmise tähise.

app.UseBlazorFrameworkFiles();

Blazor WebAssembly juurutamine

Põhimõtteliselt võite panna avaldatud Blazor WebAssembly wwwroot kausta, nagu see on ASP.NEt Core'i wwwroot kaustas, kuid peaksite selle kustutama,index.html sest seda pole enam vaja. Samuti, kuna see onfavicon.ico dubleeritud, otsustage, millist ikooni kasutada.

PWA-ga vabastamisel, kui olete välistanud failid (nt indeks.html) kaustast wwwroot, Peate avama tekstiredaktoris, ka kaustas wwwroot, ja kustutama välistatud faili kirjed service-worker-assets.js . Vastasel juhul võib veebiekraani avamisel ilmneda sisemine tõrge.

Blazori rakenduse avaldamisel ei pea te seda käsitsi tegema, jättes projektist välja mittevajalikud failid.

PWA-de puhul ilmnevad sisemised vead, kui need ei ole https-keskkonnas. Seda ei saa PWA-na installida.

Täitmise kinnitus

ASP.NET Debug käivitab Core MVC projekti. Külastage Blazori lehte ja veenduge, et lehel kuvatakse Blazori assamblee paigutus. Valige vasakpoolne menüü ja veenduge, et iga funktsioon töötab.

URL-ide kohta

Kui klõpsate lehel kuvataval Blazori assembleri vasakpoolsel menüül, märkate, et URL muutub. Selline käitumine ei järgi ASP.NET Core MVC oodatud URL-i käitumist, nii et võimaluse korral peaks Blazori assembler eelistatavalt looma URL-i nii, et URL ei muutuks.

Blazori lehe avamisel

Kui klõpsate menüüd Loendur

Changelog

2022/7/12
  • Lisatud punktid, mida märkida, kui välistada avaldatud Blazori rakenduse failipaigutuses mittevajalikud failid.
2022/3/30
  • esimene väljaanne
Blazor WebAssemblys loodud rakenduste paigutamine IIS-is
Mitme Blazor WebAssemblyse juurutamine ASP.NET Core MVC-s