ASP.NET Suorita Blazor WebAssembly core MVC -näkymällä
ympäristö
- Visuaalinen studio
-
- Visual Studio 2019
- .NET
-
- .NET 5.0
Alun perin
Koska Blazor WebAssembly on asiakastekniikka, sillä ei ole väliä miten verkkopalvelin toimii. WebAssemblyn palvelemiseksi asiakkaille tarvitaan kuitenkin vähintään palvelinpuolen määritys. Suoritetaan palvelinohjelma ASP.NET Core MVC: nä Blazor WebAssemblyssä.
Blazor WebAssemblyn luominen
Nyt meidän on vain varmistettava, että Blazor WebAssembly toimii, joten jätämme sen sellaiseksi kuin se oli, kun loimme projektin.
Projektin nimi tai ratkaisun nimi on mielivaltainen.
Lisätietonäytössä näkyvä "ASP.NET isännöidään Coressa" -näyttö voi toimia myös MVC: nä, mutta tuloksena oleva projekti on lähellä API-palvelinta, joten emme tarkista sitä täällä.
Blazor WebAssemblyn julkaiseminen
Julkaise tiedostoja ottaaksesi Blazor WebAssemblyn käyttöön ASP.NET Core MVC -projektissa.
Napsauta projektia hiiren kakkospainikkeella ja valitse Julkaise.
Valitse Kansiot.
Poistu oletusjulkaisukohteesta.
Julkaisunäyttö tulee näkyviin. Voit asettaa erilaisia asetuksia, mutta toistaiseksi "Julkaise" -painike jätetään oletukseksi.
Odota julkaisemisen alkamista ja suorita se onnistuneesti. Huomaa, että pitkät kansioreitit voivat epäonnistua.
Voit varmistaa, että tiedosto on luotu määritettyyn kansioon. Jos se on määritetty suhteelliseksi poluksi, kohde on suhteessa projektiin.
ASP.NET Core MVC -projektin luominen
Luo seuraavaksi ASP.NET Core MVC -projekti. Visual Studion avaaminen erikseen voi olla työlästä, joten luo se Blazor WebAssembly -ratkaisun sisällä. Koska nämä kaksi projektia eivät ole tällä kertaa yhteydessä toisiinsa, ei ole mitään ongelmaa, vaikka ne luotaisiin erikseen.
Projektin nimi on valinnainen. Muut asetukset jätetään oletusarvoihinsa.
Koska Blazor-puoli olettaa, että kehitys on valmis ASP.NET MVC: n ydinpuolen projekti on käynnistys.
Näkymien luominen Blazor Assemblylle
Tämä alue muuttuu sen mukaan, mitä projektia olet todella luomassa, joten muokkaa sitä projektin mukaan. Tässä muokkaamme sitä näyteprojektin kokoonpanon perusteella.
Pohjimmiltaan sitä tulisi muokata muistuttamaan sitä, joka luotiin, kun julkaiset Blazor Assemblyn index.html .
_Layout.cshtml kiinnittäminen
Haluan viitata Blazor Assemblyn CSS: ään, jotta voin kirjoittaa sen suoraan . _Layout.cshtml
Haluamme, että sitä sovelletaan vain kohdesivulle niin paljon kuin mahdollista, joten voimme laajentaa sitä lisäämällä niin RenderSectionAsync , että linkit CSS: ään voidaan kirjoittaa jokaiselle sivulle.
<!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>
<!-- 以下同じなので省略 -->
Sivun lisääminen Blazor Assemblylle
Lisää erillinen sivu Blazor-kokoonpanon näyttämiseksi. ASP.NET Normaali sivun lisäys ja menettely Core MVC: ssä ovat samat.
HomeController Lisää seuraavat toiminnot kohtaan . Palvelinpuoli ei tee mitään erityistä, joten se vain palauttaa näkymän.
HomeController.cs
// 省略
namespace AspNetCoreMvc.Controllers
{
public class HomeController : Controller
{
// 省略
// 追加
public IActionResult Blazor()
{
return View();
}
}
}
Napsauta toimintoa hiiren kakkospainikkeella lisätäksesi näkymän.
Ei ole mitään, mihin sitoa, joten lisää se sellaisenaan.
Näkymä luodaan.
Käyttämällä Blazor Assemblyn julkaisuhetkellä luotua index.html viitataan, teemme sen uudelleen seuraavasti.
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>
}
Lisää linkki, jotta voit siirtyä sivulle Blazorissa.
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>
Lisää Microsoft.AspNetCore.Components.WebAssembly.Server-viite
Startup.cs Sinun ei tarvitse kirjoittaa tarvittavaa koodia itse, mutta helposti saat NuGetilta Microsoft.AspNetCore.Components.WebAssembly.Server .
Napsauta hiiren kakkospainikkeella Riippuvuuksia ja valitse Hallitse NuGet-paketteja.
Valitse Hallinta-välilehti ja kirjoita hakukenttään Microsoft.AspNetCore.Components.WebAssembly.Server.
Näyttöön tulee paketti, jolla on sama nimi, joten asenna se.
Varmista, että paketti on lisätty.
Muutokset käynnistykseen.cs
app.UseHttpsRedirection(); Lisätään seuraava koodi riviä seuraavalle riville:
app.UseBlazorFrameworkFiles();
Blazor WebAssemblyn käyttöönotto
Periaatteessa voit laittaa julkaistun Blazor WebAssembly wwwroot -kansion sellaisena kuin se on ASP.NEt Coren wwwroot-kansioon, mutta sinun pitäisi poistaa se,index.html koska sitä ei enää tarvita.
Lisäksi, koska se onfavicon.ico kopioitu, päätä, mitä kuvaketta haluat käyttää.
Kun vapautat PWA: lla, jos olet sulkenut pois tiedostoja (kuten hakemisto.html) wwwroot-kansiossa,
Sinun on avattava tekstieditorissa, myös wwwroot-kansiossa, ja poistettava tietueet service-worker-assets.js poissuljetusta tiedostosta.
Muussa tapauksessa saatat saada sisäisen virheen, kun avaat verkkonäytön.
Kun julkaiset Blazor-sovelluksen, sinun ei tarvitse tehdä sitä manuaalisesti sulkemalla tarpeettomat tiedostot pois projektistasi.
PWA:iden tapauksessa sisäisiä virheitä esiintyy, jos ne eivät ole https-ympäristössä. Sitä ei voi asentaa PWA: na.
Suorituksen vahvistus
ASP.NET Debug suorittaa Core MVC -projektin. Käy Blazor-sivulla ja varmista, että Blazor-kokoonpanon asettelu näkyy sivulla. Valitse vasen valikko ja varmista, että jokainen ominaisuus toimii.
Tietoja URL-osoitteista
Jos napsautat sivulla näkyvää Blazor Assemblyn vasenta valikkoa, huomaat, että URL-osoite muuttuu. Tämä toiminta ei noudata ASP.NET Core MVC:n odottamaa URL-osoitetta, joten jos mahdollista, Blazor Assemblyn tulisi mieluiten luoda URL-osoite siten, että URL-osoite ei muutu.
Kun avaat Blazor-sivun
Kun napsautat Laskuri-valikkoa
Muutosloki
- 2022/7/12
-
- Lisätty huomioitavia kohtia, kun tarpeettomia tiedostoja ei oteta huomioon julkaistun Blazor-sovelluksen tiedostojen sijoittelussa.
- 2022/3/30
-
- ensipainos