ASP.NET Uruchom Blazor WebAssembly z widokiem Core MVC

Strona zaktualizowana : niedziela, 17 lipca 2022

Data utworzenia strony : środa, 30 marca 2022

środowisko

Visual Studio

Program Visual Studio 2019

Platforma .NET

PLATFORMA .NET 5.0

Na początku

Ponieważ Blazor WebAssembly jest technologią kliencką, nie ma znaczenia, jak działa serwer WWW. Jednak w celu obsługi WebAssembly klientom wymagana jest co najmniej konfiguracja po stronie serwera. Uruchommy program serwera jako ASP.NET Core MVC w Blazor WebAssembly.

Tworzenie Blazor WebAssembly

Teraz musimy tylko upewnić się, że Blazor WebAssembly działa, więc zostawimy to tak, jak było, gdy tworzyliśmy projekt.

Nazwa projektu lub nazwa rozwiązania jest dowolna.

Ekran "ASP.NET hostowany na Core" wyświetlany na ekranie dodatkowych informacji może również działać jako MVC, ale wynikowy projekt jest zbliżony do serwera API, więc nie będziemy go tutaj sprawdzać.

Publikowanie Blazor WebAssembly

Opublikuj pliki, aby wdrożyć Blazor WebAssembly w projekcie ASP.NET Core MVC.

Kliknij projekt prawym przyciskiem myszy i wybierz polecenie Opublikuj.

Wybierz foldery.

Pozostaw domyślne miejsce docelowe publikowania.

Zostanie wyświetlony ekran publikowania. Możesz ustawić różne ustawienia, ale na razie przycisk "Opublikuj" pozostaje domyślny.

Poczekaj na rozpoczęcie i pomyślne zakończenie publikowania. Należy pamiętać, że długie ścieżki folderów mogą się nie powieść.

Można sprawdzić, czy plik został utworzony w określonym folderze. Jeśli jest określona jako ścieżka względna, miejsce docelowe jest względne dla projektu.

Tworzenie projektu MVC ASP.NET Core

Następnie utwórz projekt MVC ASP.NET Core. Otwieranie programu Visual Studio osobno może być żmudne, dlatego utwórz go w rozwiązaniu Blazor WebAssembly. Ponieważ tym razem oba projekty nie są ze sobą powiązane, nie ma problemu, nawet jeśli są tworzone osobno.

Nazwa projektu jest opcjonalna. Pozostałe ustawienia pozostają domyślne.

Ponieważ strona Blazor zakłada, że rozwój został zakończony ASP.NET projekt po stronie podstawowej MVC jest startupem.

Tworzenie widoków dla blazor Assembly

Ten obszar zmieni się w zależności od projektu, który faktycznie tworzysz, więc zmodyfikuj go zgodnie z tym projektem. Tutaj zmodyfikujemy go na podstawie konfiguracji przykładowego projektu.

Zasadniczo powinien zostać zmodyfikowany, aby przypominał ten utworzony podczas publikowania index.html blazor Assembly.

Naprawianie _Layout.cshtml

Chcę odwołać się do CSS blazor Assembly, więc mogę napisać go bezpośrednio do . _Layout.cshtml Chcemy, aby w jak największym stopniu był on stosowany tylko do strony docelowej, abyśmy mogli go rozszerzyć, dodając, aby RenderSectionAsync linki do CSS mogły być zapisywane na każdej stronie.

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

Dodawanie strony dla zespołu Blazor

Dodaj dedykowaną stronę, aby wyświetlić zespół Blazor. ASP.NET Normalne dodawanie stron i procedura w Core MVC są takie same.

HomeController Dodaj następujące akcje do programu . Strona serwera nie robi nic szczególnego, więc po prostu zwraca widok.

HomeController.cs

// 省略

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

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

Kliknij akcję prawym przyciskiem myszy, aby dodać widok.

Nie ma się z czym wiązać, więc dodaj to tak, jak jest.

Widok zostanie utworzony.

Korzystając z wygenerowanego w momencie publikacji index.html Blazor Assembly jest przywoływany, przerobimy go w następujący sposób.

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

Dodaj link, aby móc przejść do strony w 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>

Dodawanie dokumentacji Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Nie musisz samodzielnie pisać niezbędnego kodu, ale dla ułatwienia otrzymujesz od Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Kliknij prawym przyciskiem myszy pozycję Zależności i wybierz polecenie Zarządzaj pakietami NuGet.

Wybierz kartę Administracja i w polu wyszukiwania wpisz Microsoft.AspNetCore.Components.WebAssembly.Server.

Wyświetlany jest pakiet o tej samej nazwie, więc zainstaluj go.

Sprawdź, czy pakiet został dodany.

Zmiany w autostarcie.cs

app.UseHttpsRedirection(); Wstaw następujący kod w wierszu następującym po wierszu:

app.UseBlazorFrameworkFiles();

Wdrażanie Blazor WebAssembly

Zasadniczo możesz umieścić opublikowany folder wwwroot Blazor WebAssembly, tak jak jest w folderze wwwroot ASP.NEt Core, ale powinieneś go usunąć,index.html ponieważ nie będzie już potrzebny. Ponadto, ponieważ jestfavicon.ico dubbingowany, zdecyduj, której ikony użyć.

Podczas zwalniania z programem PWA, jeśli wykluczyłeś pliki (takie jak index.html) w folderze wwwroot, Będziesz musiał otworzyć w edytorze tekstu, również w folderze wwwroot, i usunąć rekordy z service-worker-assets.js wykluczonego pliku. W przeciwnym razie może wystąpić błąd wewnętrzny podczas otwierania ekranu internetowego.

Podczas publikowania aplikacji Blazor nie trzeba tego robić ręcznie, wykluczając niepotrzebne pliki z projektu.

W przypadku PWA błędy wewnętrzne występują, jeśli nie znajdują się w środowisku https. Nie można go zainstalować jako programu PWA.

Potwierdzenie wykonania

ASP.NET Debuguj uruchom projekt Core MVC. Odwiedź stronę Blazor i sprawdź, czy układ blazor Assembly jest wyświetlany na stronie. Wybierz menu po lewej stronie i sprawdź, czy każda funkcja działa.

Informacje o adresach URL

Jeśli klikniesz menu Blazor Assembly po lewej stronie wyświetlane na stronie, zauważysz, że adres URL się zmienia. To zachowanie nie jest zgodne z zachowaniem adresu URL oczekiwanym przez ASP.NET Core MVC, więc jeśli to możliwe, zestaw Blazor powinien najlepiej utworzyć adres URL w taki sposób, aby adres URL się nie zmienił.

Po otwarciu strony Blazora

Po kliknięciu menu Licznik

Dziennik zmian

2022/7/12

Dodano punkty, na które należy zwrócić uwagę przy wykluczaniu niepotrzebnych plików w umieszczaniu plików opublikowanej aplikacji Blazor.

2022/3/30

pierwsza edycja

Umieszczanie aplikacji utworzonych w Blazor WebAssembly w usługach IIS

Wdrażanie wielu zestawów Blazor WebAssemblys w ASP.NET Core MVC