ASP.NET Eseguire Blazor WebAssembly con una visualizzazione MVC di base

Pagina aggiornata : domenica 17 luglio 2022

Data di creazione della pagina : mercoledì 30 marzo 2022

ambiente

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

Dapprima

Poiché Blazor WebAssembly è una tecnologia client, non importa come funziona il server web. Tuttavia, per servire WebAssembly ai client, è necessaria almeno una configurazione lato server. Eseguiamo il programma server come ASP.NET Core MVC in Blazor WebAssembly.

Creazione di un oggetto WebAssembly Blazor

Ora dobbiamo solo assicurarci che Blazor WebAssembly funzioni, quindi lo lasceremo com'era quando abbiamo creato il progetto.

Il nome del progetto o della soluzione è arbitrario.

La schermata "ASP.NET ospitato su Core" visualizzata nella schermata delle informazioni aggiuntive può anche funzionare come MVC, ma il progetto risultante è vicino al server API, quindi non lo controlleremo qui.

Pubblicazione di Blazor WebAssembly

Pubblicare file per distribuire Blazor WebAssembly in un progetto MVC ASP.NET Core.

Fare clic con il pulsante destro del mouse sul progetto e scegliere Pubblica.

Seleziona Cartelle.

Lasciare la destinazione di pubblicazione predefinita.

Viene visualizzata la schermata di pubblicazione. È possibile impostare varie impostazioni, ma per ora il pulsante "Pubblica" viene lasciato come predefinito.

Attendere l'inizio e il completamento della pubblicazione. Si noti che i percorsi di cartelle lunghi potrebbero non riuscire.

È possibile verificare che il file sia stato creato nella cartella specificata. Se viene specificato come percorso relativo, la destinazione è relativa al progetto.

Creare un progetto MVC ASP.NET Core

Quindi, creare un progetto MVC ASP.NET Core. L'apertura di Visual Studio separatamente può essere noiosa, quindi crealo all'interno della soluzione Blazor WebAssembly. Poiché i due progetti non sono collegati questa volta, non c'è problema anche se vengono creati separatamente.

Il nome del progetto è facoltativo. Le altre impostazioni vengono lasciate alle impostazioni predefinite.

Poiché il lato Blazor presuppone che lo sviluppo sia completato ASP.NET il progetto sul lato MVC principale è una startup.

Creazione di viste per l'assieme Blazor

Quest'area cambierà a seconda del progetto che stai effettivamente creando, quindi modificala in base a quel progetto. Qui, lo modificheremo in base alla configurazione del progetto di esempio.

Fondamentalmente, dovrebbe essere modificato per assomigliare a quello creato quando si pubblica l'assembly index.html Blazor.

Correzione di _Layout.cshtml

Voglio fare riferimento al CSS dell'Assemblea Blazor, in modo da poterlo scrivere direttamente in . _Layout.cshtml Vogliamo che venga applicato il più possibile solo alla pagina di destinazione, in modo da poterlo estendere aggiungendo in modo RenderSectionAsync che i collegamenti al CSS possano essere scritti su ogni pagina.

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

Aggiungere una pagina per l'assembly Blazor

Aggiungere una pagina dedicata per visualizzare l'assemblaggio Blazor. ASP.NET L'aggiunta e la procedura di pagina normale in Core MVC sono le stesse.

HomeController Aggiungere le seguenti azioni a . Il lato server non fa nulla in particolare, quindi restituisce solo la vista.

HomeController.cs

// 省略

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

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

Fare clic con il pulsante destro del mouse sull'azione per aggiungere una visualizzazione.

Non c'è nulla a cui legarsi, quindi aggiungilo così com'è.

La vista viene creata.

Utilizzando il generato al momento della pubblicazione dell'Assemblea index.html Blazor è referenziato, lo rifaremo come segue.

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

Aggiungi un link in modo da poter passare alla pagina in 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>

Aggiungere informazioni di riferimento su Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Non è necessario scrivere il codice necessario da soli, ma per facilità si ottiene da Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Fare clic con il pulsante destro del mouse su Dipendenze e selezionare Gestisci pacchetti NuGet.

Selezionare la scheda Amministrazione e immettere Microsoft.AspNetCore.Components.WebAssembly.Server nel campo di ricerca.

Viene visualizzato un pacchetto con lo stesso nome, quindi installalo.

Verificare che il pacchetto sia stato aggiunto.

Modifiche all'avvio.cs

app.UseHttpsRedirection(); Inserire il codice seguente nella riga successiva alla riga:

app.UseBlazorFrameworkFiles();

Distribuzione di Blazor WebAssembly

Fondamentalmente, puoi inserire la cartella wwwroot Blazor WebAssembly pubblicata così com'è nella cartella wwwroot di ASP.NEt Core,index.html ma dovresti eliminarla perché non sarà più necessaria. Inoltre, poiché èfavicon.ico doppiato, decidi quale icona usare.

Quando si rilascia con PWA, se sono stati esclusi file (ad esempio index.html) nella cartella wwwroot, Sarà necessario aprire in un editor di testo, anche nella cartella wwwroot, ed eliminare i record nel service-worker-assets.js file escluso. In caso contrario, potresti ricevere un errore interno quando apri una schermata Web.

Quando pubblichi un'app Blazor, non è necessario farlo manualmente escludendo i file non necessari dal progetto.

Nel caso delle PWA, gli errori interni si verificano se non si trovano in un ambiente https. Non può essere installato come PWA.

Conferma dell'esecuzione

ASP.NET Debug eseguire il progetto Core MVC. Visita la pagina Blazor e verifica che il layout dell'Assemblea Blazor sia visualizzato nella pagina. Selezionare il menu a sinistra e verificare che ogni funzione funzioni.

Informazioni sugli URL

Se fai clic sul menu a sinistra di Blazor Assembly visualizzato nella pagina, noterai che l'URL cambia. Questo comportamento non segue il comportamento dell'URL previsto da ASP.NET Core MVC, quindi, se possibile, l'assembly Blazor dovrebbe preferibilmente creare l'URL in modo tale che l'URL non cambi.

Quando apri una pagina Blazor

Quando si fa clic sul menu Contatore

Changelog

2022/7/12

Aggiunti punti da notare quando si escludono file non necessari nel posizionamento dei file dell'app Blazor pubblicata.

2022/3/30

prima edizione

Inserire le app create in Blazor WebAssembly in IIS

Distribuire più Blazor WebAssemblys in ASP.NET Core MVC