ASP.NET ZaženiTe Blazor WebAssembly s temeljnim prikazom MVC

Stran posodobljena : nedelja, 17. julij 2022

Datum ustvarjanja strani : sreda, 30. marec 2022

okolje

Vizualni studio

Vizualni studio 2019

.NET

.NET 5.0

Sprva

Ker je Blazor WebAssembly odjemalska tehnologija, ni pomembno, kako deluje spletni strežnik. Da pa bi storitev WebAssembly služila odjemalcem, je potrebna vsaj strežniško-stranska konfiguracija. Zaženimo strežniški program kot ASP.NET MVC v Blazor WebAssembly.

Izdelava blazor webAssembly

Zdaj se moramo prepričati, da bo Blazor WebAssembly deloval, zato ga bomo pustili tako, kot je bilo, ko smo ustvarili projekt.

Ime projekta ali ime rešitve je poljubno.

Zaslon »ASP.NET na jedru« prikazan na dodatnem informacijskem zaslonu lahko deluje tudi kot MVC, vendar je posledčni projekt blizu API strežnika, zato ga tukaj ne bomo preverili.

Objavljanje Blazor WebAssembly

Objavite datoteke za uvajanje Blazor WebAssembly na ASP.NET jedro MVC projekta.

Z desno tipko miške kliknite projekt in izberite Objavi.

Izberite Mape.

Zapustite privzeti cilj za objavljanje.

Prikaže se zaslon za objavo. Nastavite lahko različne nastavitve, vendar je za zdaj gumb »Objavi« ostal kot privzeti.

Počakajte, da se objava začne in uspešno zaključi. Upoštevajte, da dolge poti map morda ne uspejo.

Preverite lahko, ali je bila datoteka ustvarjena v določeni mapi. Če je določena kot relativna pot, je cilj v primerjavi s projektom.

Ustvarjanje ASP.NET osrednjega MVC projekta

Nato ustvarite projekt ASP.NET core MVC. Odpiranje Visual Studio posebej je lahko zamočilo, zato ga ustvarite znotraj rešitve Blazor WebAssembly. Ker tokrat nista povezana projekta, ni težav, tudi če sta ustvarjena ločeno.

Ime projekta je neobvezno. Druge nastavitve ostanejo privzeto.

Ker blazorska stran predpostavi, da je ASP.NET je projekt na osrednji MVC strani zagon.

Ustvarjanje pogledov za blazorski zbor

To področje se bo spremenilo glede na projekt, ki ga dejansko ustvarjate, zato ga spremenite v skladu s tem projektom. Tukaj ga bomo spremenili na podlagi konfiguracije vzorčenega projekta.

V bistvu je treba spremeniti, index.html da je podobno tisti, ki je nastal, ko objavite Skupščino Blazor.

Pritrjevanje _Layout.cshtml

Sklicevanje na CSS skupščine Blazor, da ga lahko napišem neposredno na . _Layout.cshtml Želimo, da se uporablja le na ciljno stran, kolikor je le mogoče, RenderSectionAsync tako da jo lahko razširimo z dodajanjem, tako da se povezave na CSS lahko pišejo na vsaki strani.

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

Dodajanje strani za blazorski zbor

Dodajte namensko stran za prikaz Blazorske skupščine. ASP.NET Običajno dodajanje strani in postopek v jedru MVC sta enaka.

HomeController Dodajte naslednja dejanja v . Stran strežnika ne naredi ničesar posebnega, zato le vrne pogled.

HomeController.cs

// 省略

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

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

Z desno tipko miške kliknite dejanje, da dodate pogled.

Nič se ne more prilegati, zato ga dodajte tako, kot je.

Pogled je ustvarjen.

Z uporabo ustvarjene index.html ob objavi Skupščine Blazor se sklicuje, jo bomo remake na naslednji način.

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

Dodajte povezavo, tako da se lahko pomaknete do strani v Blazorju.

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>

Dodajte sklic Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Ni vam treba sami napisati potrebne kode, ampak za lahkoto boste dobili od Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Z desno tipko miške kliknite Odvisnosti in izberite Upravljanje paketov NuGet.

Izberite zavihek Skrbništvo in v iskalno polje vnesite Microsoft.AspNetCore.Components.WebAssembly.Server.

Prikaže se paket z istim imenom, zato ga namestite.

Preverite, ali je bil paket dodan.

Spremembe zagona.cs

app.UseHttpsRedirection(); V vrstico za vrstico vstavite naslednjo kodo:

app.UseBlazorFrameworkFiles();

Uvajanje Blazor WebAssembly

V bistvu lahko objavite mapo Blazor WebAssembly wwwroot, kot je v mapi wwwroot ASP.NEt Core,index.html vendar jo morate izbrisati, ker ne bo več potrebna. Prav tako, glede na to, da jefavicon.ico poimenoval, odločite, katero ikono uporabiti.

Če ste pri izpuščanju s PWA izključili datoteke (na primer indeks.html) v mapi wwwroot, Odpreti boste morali v urejevalniku besedila, tudi v mapi wwwroot, in service-worker-assets.js izbrisati zapise v izključeni datoteki. V nasprotnem primeru se lahko pri odpiranju spletnega zaslona prikaže notranja napaka.

Ko objavite aplikacijo Blazor, vam tega ni treba narediti ročno, tako da iz svojega projekta izključite nepotrebne datoteke.

V primeru PWA se notranje napake pojavijo, če niso v okolju https. Ni ga mogoče namestiti kot PWA.

Potrditev izvršitve

ASP.NET debug zaženite projekt core MVC. Obiščite stran Blazor in preverite, ali je postavitev Blazorjevega zbora prikazana na strani. Izberite levi meni in preverite, ali vsaka funkcija deluje.

O URL-jih

Če kliknete na blazorski sestav levi meni, prikazan na strani, boste opazili, da se URL spremeni. To vedenje ne sledi vedenju URL-ja, ki ga pričakuje ASP.NET Core MVC, zato bi moral, če je mogoče, Sestava Blazor po možnosti ustvariti URL tako, da se URL ne spremeni.

Ko odprete stran Blazor

Ko kliknete meni Števec

Dnevnik sprememb

2022/7/12

Dodane točke na opombo, če izključite nepotrebne datoteke v datotečni postavitvi objavljene aplikacije Blazor.

2022/3/30

prva izdaja

Postavite aplikacije, ustvarjene v programu Blazor WebAssembly v IIS

Uvajanje več Blazor webAssemblys v ASP.NET core MVC