ASP.NET Paleiskite "Blazor WebAssembly" naudodami pagrindinį MVC rodinį

Puslapis atnaujintas : 2022 m. liepos 17 d., sekmadienis

Puslapio sukūrimo data : 2022 m. kovo 30 d., trečiadienis

Aplinkos

"Visual Studio"

"Visual Studio 2019"

.NET

.NET 5.0

Iš pradžių

Kadangi Blazor WebAssembly yra kliento technologija, nesvarbu, kaip veikia žiniatinklio serveris. Tačiau norint aptarnauti "WebAssembly" klientams, bent jau reikalinga serverio konfigūracija. Paleiskime serverio programą kaip ASP.NET Core MVC Blazor WebAssembly.

"Blazor WebAssembly" kūrimas

Dabar mums tereikia įsitikinti, kad "Blazor WebAssembly" veikia, todėl paliksime jį tokį, koks buvo, kai sukūrėme projektą.

Projekto pavadinimas arba sprendimo pavadinimas yra savavališkas.

Papildomos informacijos ekrane rodomas ekranas "ASP.NET priglobtas "Core" taip pat gali veikti kaip MVC, tačiau gautas projektas yra arti API serverio, todėl čia jo netikrinsime.

"Blazor WebAssembly" leidyba

Publikuokite failus, kad įdiegtumėte Blazor WebAssembly ASP.NET Core MVC" projekte.

Dešiniuoju pelės mygtuku spustelėkite projektą ir pasirinkite Publikuoti.

Pasirinkite Aplankai.

Palikite numatytąją publikavimo paskirties vietą.

Pasirodo publikavimo ekranas. Galite nustatyti įvairius nustatymus, tačiau kol kas mygtukas "Paskelbti" paliekamas kaip numatytasis.

Palaukite, kol leidyba prasidės ir bus sėkmingai baigta. Atminkite, kad ilgi aplankų keliai gali nepavykti.

Galite patikrinti, ar failas buvo sukurtas nurodytame aplanke. Jei jis nurodomas kaip santykinis kelias, paskirties vieta yra susijusi su projektu.

"ASP.NET Core MVC" projekto kūrimas

Tada sukurkite "ASP.NET Core MVC" projektą. "Visual Studio" atidarymas atskirai gali būti varginantis, todėl sukurkite jį "Blazor WebAssembly" sprendime. Kadangi abu projektai šį kartą nėra susieti, nėra jokių problemų, net jei jie sukurti atskirai.

Projekto pavadinimas neprivalomas. Kiti nustatymai paliekami pagal numatytuosius nustatymus.

Kadangi "Blazor" pusė daro prielaidą, kad plėtra baigta ASP.NET projektas pagrindinėje MVC pusėje yra paleidimas.

"Blazor" asamblėjos vaizdų kūrimas

Ši sritis keisis priklausomai nuo projekto, kurį iš tikrųjų kuriate, todėl pakeiskite ją pagal tą projektą. Čia mes jį pakeisime pagal pavyzdinio projekto konfigūraciją.

Iš esmės jis turėtų būti modifikuotas, kad būtų panašus į tą, kuris sukuriamas index.html , kai skelbiate "Blazor Assembly".

_Layout.cshtml fiksavimas

Noriu paminėti Blazoro asamblėjos CSS, kad galėčiau jį parašyti tiesiai į . _Layout.cshtml Norime, kad jis būtų kuo labiau taikomas tik tiksliniam puslapiui, kad galėtume jį išplėsti pridėdami, kad kiekviename puslapyje būtų RenderSectionAsync galima rašyti nuorodas į CSS.

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

"Blazor" asamblėjos puslapio įtraukimas

Pridėkite specialų puslapį, kad būtų rodomas Blazoro susirinkimas. ASP.NET Įprastas puslapio papildymas ir procedūra "Core MVC" yra vienodi.

HomeController Įtraukite šiuos veiksmus į . Serverio pusė nieko konkretaus nedaro, todėl tiesiog grąžina vaizdą.

HomeController.cs

// 省略

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

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

Dešiniuoju pelės mygtuku spustelėkite veiksmą, kad įtrauktumėte rodinį.

Nėra prie ko prisirišti, todėl pridėkite jį tokį, koks yra.

Vaizdas sukuriamas.

Naudojant "Blazor Assembly" paskelbimo index.html metu sukurtą sukurtą informaciją, mes ją perdarysime taip.

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

Pridėkite nuorodą, kad galėtumėte pereiti į "Blazor" puslapį.

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 nuorodos įtraukimas

Startup.cs Jums nereikia patiems rašyti reikiamo kodo, bet kad būtų lengviau, gausite iš Microsoft.AspNetCore.Components.WebAssembly.Server "NuGet".

Dešiniuoju pelės mygtuku spustelėkite Priklausomybės ir pasirinkite Tvarkyti "NuGet" paketus.

Pasirinkite skirtuką Administravimas ir ieškos lauke įveskite Microsoft.AspNetCore.Components.WebAssembly.Server.

Rodomas paketas su tuo pačiu pavadinimu, todėl įdiekite jį.

Patikrinkite, ar paketas pridėtas.

Paleisties pakeitimai.cs

app.UseHttpsRedirection(); Po eilutės esančioje eilutėje įterpkite šį kodą:

app.UseBlazorFrameworkFiles();

"Blazor WebAssembly" diegimas

Iš esmės galite įdėti paskelbtą Blazor WebAssembly wwwroot aplanką tokį, koks jis yra ASP.NEt Core" wwwroot aplanke, tačiau turėtumėte jį ištrinti,index.html nes jo nebereikės. Be to, kadangi yrafavicon.ico dubliuotas, nuspręskite, kurią piktogramą naudoti.

Kai išleidžiate su PWA, jei wwwroot aplanke neįtraukėte failų (pvz., indekso.html), Turėsite atidaryti teksto rengyklėje, taip pat ir wwwroot aplanke, ir ištrinti neįtraukto failo įrašus service-worker-assets.js . Priešingu atveju atidarę žiniatinklio ekraną galite gauti vidinę klaidą.

Kai skelbiate "Blazor" programą, jums nereikia to daryti rankiniu būdu, neįtraukiant nereikalingų failų iš savo projekto.

PWA atveju vidinės klaidos atsiranda, jei jos nėra https aplinkoje. Jo negalima įdiegti kaip PWA.

Vykdymo patvirtinimas

ASP.NET Debug vykdo "Core MVC" projektą. Apsilankykite "Blazor" puslapyje ir patikrinkite, ar puslapyje rodomas "Blazor Assembly" išdėstymas. Pasirinkite kairįjį meniu ir patikrinkite, ar kiekviena funkcija veikia.

Apie URL

Jei spustelėsite "Blazor Assembly" kairįjį meniu, rodomą puslapyje, pastebėsite, kad URL pasikeičia. Šis elgesys neatitinka URL elgesio, kurio tikisi ASP.NET Core MVC", todėl, jei įmanoma, "Blazor Assembly" turėtų sukurti URL taip, kad URL nepasikeistų.

Kai atidarote Blazor puslapį

Spustelėjus meniu Skaitiklis

Pakeitimų žurnalas

2022/7/12

Pridėta taškų, į kuriuos reikia atkreipti dėmesį neįtraukiant nereikalingų failų į paskelbtos "Blazor" programos failų išdėstymą.

2022/3/30

pirmasis leidimas

Įdėkite programas, sukurtas "Blazor WebAssembly" IIS

Kelių Blazor WebAssemblys diegimas ASP.NET Core MVC