Blazor

ASP.NET Rulați Blazor WebAssembly cu o vizualizare Core MVC

Pagina actualizată :
Data creării paginii :

mediu

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

La început

Deoarece Blazor WebAssembly este o tehnologie client, nu contează cum funcționează serverul web. Cu toate acestea, pentru a servi WebAssembly clienților, este necesară cel puțin o configurație pe partea de server. Să rulăm programul serverului ca ASP.NET Core MVC în Blazor WebAssembly.

Crearea unui Blazor WebAssembly

Acum trebuie doar să ne asigurăm că Blazor WebAssembly funcționează, așa că îl vom lăsa așa cum a fost atunci când am creat proiectul.

Numele proiectului sau al soluției este arbitrar.

Ecranul "ASP.NET găzduit pe Core" afișat în ecranul de informații suplimentare poate funcționa și ca MVC, dar proiectul rezultat este aproape de serverul API, deci nu îl vom verifica aici.

Publicarea Blazor WebAssembly

Publicați fișiere pentru a implementa Blazor WebAssembly într-un proiect MVC ASP.NET Core.

Faceți clic dreapta pe proiect și alegeți Publicare.

Selectați Foldere.

Părăsiți destinația implicită de publicare.

Apare ecranul de publicare. Puteți seta diverse setări, dar deocamdată, butonul "Publicare" este lăsat ca implicit.

Așteptați ca publicarea să înceapă și să se finalizeze cu succes. Rețineți că căile de folder lung poate să nu reușească.

Puteți verifica dacă fișierul a fost creat în folderul specificat. Dacă este specificat ca o cale relativă, destinația este relativă la proiect.

Crearea unui proiect MVC ASP.NET Core

Apoi, creați un proiect ASP.NET Core MVC. Deschiderea Visual Studio separat poate fi obositoare, astfel încât creați-l în interiorul soluției Blazor WebAssembly. Având în vedere că cele două proiecte nu sunt legate de această dată, nu există nicio problemă, chiar dacă sunt create separat.

Numele proiectului este opțional. Celelalte setări sunt lăsate la valorile implicite.

Deoarece partea Blazor presupune că dezvoltarea este finalizată ASP.NET proiectul pe partea de bază MVC este un startup.

Crearea vizualizărilor pentru Adunarea Blazor

Această zonă se va schimba în funcție de proiectul pe care îl creați de fapt, așa că vă rugăm să îl modificați în funcție de acel proiect. Aici, îl vom modifica pe baza configurației proiectului eșantion.

Practic, ar trebui să fie modificate pentru a semăna cu cel creat atunci când publicați index.html Adunarea Blazor.

Fixare _Layout.cshtml

Vreau să fac referire la CSS a Adunării Blazor, așa că am putea scrie direct la . _Layout.cshtml Vrem să fie aplicate numai la pagina țintă cât mai mult posibil, astfel încât să putem extinde prin adăugarea de astfel încât RenderSectionAsync link-uri către CSS pot fi scrise pe fiecare pagină.

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

Adăugarea unei pagini pentru Adunarea Blazor

Adăugați o pagină dedicată pentru a afișa Adunarea Blazor. ASP.NET Adăugarea și procedura normală a paginii în Core MVC sunt aceleași.

HomeController Adăugați următoarele acțiuni la . Partea de server nu face nimic în special, așa că returnează doar vizualizarea.

HomeControler.cs

// 省略

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

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

Faceți clic dreapta pe acțiune pentru a adăuga o vizualizare.

Nu este nimic de a lega la, așa că adăugați-l așa cum este.

Vizualizarea este creată.

Folosind generate la momentul publicării index.html Adunării Blazor este referit, vom reface după cum urmează.

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

Adăugați un link, astfel încât să puteți naviga la pagina din 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>

Adăugați referință Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Nu trebuie să scrieți singur codul necesar, dar pentru ușurința pe care o obțineți de la Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Faceți clic dreapta pe Dependențe și selectați Gestionare pachete NuGet.

Selectați fila Administrare și introduceți Microsoft.AspNetCore.Components.WebAssembly.Server în câmpul de căutare.

Se afișează un pachet cu același nume, așa că instalați-l.

Verificați dacă pachetul a fost adăugat.

Modificări la pornire.cs

app.UseHttpsRedirection(); Introduceți următorul cod pe linia care urmează liniei:

app.UseBlazorFrameworkFiles();

Implementarea Blazor WebAssembly

Practic, puteți pune folderul publicat Blazor WebAssembly wwwroot așa cum este în folderul wwwroot al ASP.NEt Core,index.html dar ar trebui să îl ștergeți, deoarece nu va mai fi necesar. De asemenea, deoarece estefavicon.ico numit, decideți ce pictogramă să utilizați.

La eliberarea cu PWA, dacă ați exclus fișiere (cum ar fi index.html) în folderul wwwroot, Va trebui să deschideți într-un editor de text, de asemenea, în folderul wwwroot și să ștergeți înregistrările service-worker-assets.js din fișierul exclus. În caz contrar, este posibil să primiți o eroare internă atunci când deschideți un ecran web.

Când publicați o aplicație Blazor, nu trebuie să faceți acest lucru manual, excluzând fișierele inutile din proiect.

În cazul PWAs, erori interne apar dacă acestea nu sunt într-un mediu https. Acesta nu poate fi instalat ca un PWA.

Confirmarea execuției

ASP.NET Debug executați proiectul Core MVC. Vizitați pagina Blazor și verificați dacă aspectul Adunării Blazor apare în pagină. Selectați meniul din stânga și verificați dacă fiecare caracteristică funcționează.

Despre adresele URL

Dacă faceți clic pe meniul din stânga Adunarea Blazor afișat în pagină, veți observa că url-ul se modifică. Acest comportament nu urmează comportamentul URL-ul așteptat de ASP.NET Core MVC, deci, dacă este posibil, Adunarea Blazor ar trebui să creeze, de preferință, URL-ul în așa fel încât URL-ul să nu se schimbe.

Când deschideți o pagină Blazor

Când faceți clic pe meniul Contor

Changelog

2022/7/12
  • A adăugat puncte de reținut atunci când excludeți fișierele inutile din plasarea fișierului aplicației Blazor publicate.
2022/3/30
  • prima ediție
Plasați aplicațiile create în Blazor WebAssembly în IIS
Implementați mai multe Blazor WebAssemblys în ASP.NET Core MVC