Blazor

ASP.NET Exécuter Blazor WebAssembly avec une vue Core MVC

Page mise à jour :
Date de création de la page :

environnement

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

Au début

Étant donné que Blazor WebAssembly est une technologie cliente, peu importe le fonctionnement du serveur Web. Toutefois, pour servir WebAssembly aux clients, une configuration côté serveur est au minimum requise. Exécutons le programme serveur en tant que ASP.NET Core MVC dans Blazor WebAssembly.

Création d’un Assemblage Web Blazor

Maintenant, il nous suffit de nous assurer que Blazor WebAssembly fonctionne, nous allons donc le laisser tel quel lorsque nous avons créé le projet.

Le nom du projet ou du nom de la solution est arbitraire.

L’écran « ASP.NET hébergé sur Core » affiché dans l’écran d’informations supplémentaires peut également fonctionner en tant que MVC, mais le projet résultant est proche du serveur API, nous ne le vérifierons donc pas ici.

Publication De Blazor WebAssembly

Publiez des fichiers pour déployer Blazor WebAssembly sur un projet ASP.NET Core MVC.

Cliquez avec le bouton droit sur le projet et choisissez Publier.

Sélectionnez Dossiers.

Conservez la destination de publication par défaut.

L’écran de publication s’affiche. Vous pouvez définir divers paramètres, mais pour l’instant, le bouton « Publier » est laissé par défaut.

Attendez que la publication commence et se termine avec succès. Notez que les chemins d’accès aux dossiers longs peuvent échouer.

Vous pouvez vérifier que le fichier a été créé dans le dossier spécifié. S’il est spécifié en tant que chemin d’accès relatif, la destination est relative au projet.

Créer un projet MVC ASP.NET Core

Ensuite, créez un projet ASP.NET Core MVC. L’ouverture de Visual Studio séparément peut être fastidieuse, alors créez-la dans la solution Blazor WebAssembly. Comme les deux projets ne sont pas liés cette fois- il n’y a pas de problème même s’ils sont créés séparément.

Le nom du projet est facultatif. Les autres paramètres sont laissés à leurs valeurs par défaut.

Étant donné que le côté Blazor suppose que le développement est terminé ASP.NET le projet du côté MVC de base est une startup.

Création de vues pour l’assemblage Blazor

Cette zone changera en fonction du projet que vous créez réellement, veuillez donc la modifier en fonction de ce projet. Ici, nous allons le modifier en fonction de la configuration de l’exemple de projet.

Fondamentalement, il doit être modifié pour ressembler à celui créé lorsque vous publiez l’assemblage index.html Blazor.

Correction de _Layout.cshtml

Je veux référencer le CSS de l’Assemblée Blazor, afin de pouvoir l’écrire directement sur . _Layout.cshtml Nous voulons qu’il ne soit appliqué qu’à la page cible autant que possible, afin que nous puissions l’étendre en ajoutant afin RenderSectionAsync que des liens vers le CSS puissent être écrits sur chaque page.

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

Ajouter une page pour l’assemblage Blazor

Ajoutez une page dédiée pour afficher l’assemblage Blazor. ASP.NET l’ajout de page normal et la procédure dans Core MVC sont les mêmes.

HomeController Ajoutez les actions suivantes à . Le côté serveur ne fait rien de particulier, il renvoie donc simplement la vue.

HomeController.cs

// 省略

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

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

Cliquez avec le bouton droit sur l’action pour ajouter une vue.

Il n’y a rien à lier, alors ajoutez-le tel quel.

La vue est créée.

En utilisant le généré au moment de la publication de l’Assemblée index.html Blazor est référencé, nous allons le refaire comme suit.

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

Ajoutez un lien pour pouvoir accéder à la page dans 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>

Ajouter une référence Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Vous n’avez pas besoin d’écrire vous-même le code nécessaire, mais pour plus de facilité, vous obtenez de Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Cliquez avec le bouton droit sur Dépendances et sélectionnez Gérer les packages NuGet.

Sélectionnez l’onglet Administration et entrez Microsoft.AspNetCore.Components.WebAssembly.Server dans le champ de recherche.

Un package portant le même nom s’affiche, alors installez-le.

Vérifiez que le package a été ajouté.

Modifications apportées au démarrage.cs

app.UseHttpsRedirection(); Insérez le code suivant sur la ligne qui suit la ligne :

app.UseBlazorFrameworkFiles();

Déploiement de Blazor WebAssembly

Fondamentalement, vous pouvez mettre le dossier wwwroot Blazor WebAssembly publié tel qu’il est dans le dossier wwwroot de ASP.NEt Core,index.html mais vous devez le supprimer car il ne sera plus nécessaire. En outre, puisque estfavicon.ico doublé, décidez quelle icône utiliser.

Lors de la publication avec PWA, si vous avez exclu des fichiers (tels que index.html) dans le dossier wwwroot, Vous devrez ouvrir dans un éditeur de texte, également dans le dossier wwwroot, et supprimer les enregistrements dans service-worker-assets.js le fichier exclu. Sinon, vous risquez d’obtenir une erreur interne lorsque vous ouvrez un écran Web.

Lorsque vous publiez une application Blazor, vous n’avez pas besoin de le faire manuellement en excluant les fichiers inutiles de votre projet.

Dans le cas des PWA, des erreurs internes se produisent si elles ne se trouvent pas dans un environnement https. Il ne peut pas être installé en tant que PWA.

Confirmation d’exécution

ASP.NET Debug exécutez le projet Core MVC. Visitez la page Blazor et vérifiez que la mise en page de l’assemblage Blazor apparaît dans la page. Sélectionnez le menu de gauche et vérifiez que chaque fonctionnalité fonctionne.

À propos des URL

Si vous cliquez sur le menu de gauche Assemblage Blazor affiché dans la page, vous remarquerez que l’URL change. Ce comportement ne suit pas le comportement d’URL attendu par ASP.NET Core MVC, donc si possible, l’assembly Blazor doit de préférence créer l’URL de manière à ce que l’URL ne change pas.

Lorsque vous ouvrez une page Blazor

Lorsque vous cliquez sur le menu Compteur

Journal des modifications

2022/7/12
  • Ajout de points à noter lors de l’exclusion de fichiers inutiles dans le placement de fichiers de l’application Blazor publiée.
2022/3/30
  • première édition
Placer des applications créées dans Blazor WebAssembly dans IIS
Déployer plusieurs Blazor WebAssemblys dans ASP.NET Core MVC