Créer une belle application ASP.NET Core

En plus de puissantes fonctionnalités backend, ASP.NET Core permet la création de belles applications. Par exemple, créons un album photo numérique.

ASP.NET Core est bien connu pour ses fonctionnalités backend extrêmement utiles : API Web, services de travail et communication en temps réel, entre autres. Pourtant, au-delà de cela, il est possible d’utiliser ses ressources pour créer de belles applications utilisant HTML et CSS côte à côte avec toutes ses puissantes fonctionnalités de backend.

Dans cet article, nous allons créer de toutes pièces un album photo numérique en utilisant le template natif .NET MVC et voir en pratique comment il est possible d’obtenir un excellent résultat en utilisant ASP.NET Core.

Qu’est-ce que MVC ?

Modèle-Vue-Contrôleur (MVC) est un modèle architectural qui sépare une application en trois groupes principaux de composants : les modèles, les vues et les contrôleurs.

Le modèle MVC est utilisé pour séparer les zones d’intérêt d’une application, de sorte que les demandes des utilisateurs sont acheminées vers un contrôleur chargé de travailler avec le modèle pour effectuer des actions utilisateur et/ou récupérer des résultats de requête. Le contrôleur choisit la vue à afficher à l’utilisateur et lui fournit toutes les données de modèle nécessaires.

Le diagramme ci-dessous montre les trois composants qui composent MVC et comment ils sont liés les uns aux autres :

Pour un examen plus approfondi de MVC, vous pouvez consulter cet article dans la documentation Microsoft : Vue d’ensemble ASP.NET Core MVC.

Qu’allons-nous construire ?

Nous allons créer une application dans .NET 7 en utilisant le modèle MVC. Cette application sera comme un album photo pour vous permettre de visualiser les lieux que vous avez visités. N’oubliez pas qu’il ne s’agit que d’une suggestion de modèle. N’hésitez pas à modifier la portée du site Web. Vous pouvez, par exemple, créer un album photo pour votre animal de compagnie ou même pour vos objets de collection.

Conditions préalables

Création de l’application

Vous pouvez accéder au code source complet du projet ici : code source.

Pour créer le projet dans Visual Studio :

• Cliquez sur « Créer un nouveau projet »
• Choisissez « Application Web ASP.NET Core (Modèle-Vue-Contrôleur) »
• Choisissez un nom (dans cet exemple, j’utilise MyFavoritePlaces)
• Choisissez .NET 7

Créons maintenant la classe model qui sera l’entité principale de notre application, donc dans le dossier Models, créez la classe ci-dessous :

using System.ComponentModel.DataAnnotations;

namespace MyFavoritePlaces.Models
{
    public class PlaceCollectionItem
    {
        [Required]
        public string? Description { get; set; }
        [Required]
        public string? ImageUrl { get; set; }
        [Required]
        public DateTime Date { get; set; }
    }
}

Pour afficher les images, nous allons créer des cartes avec un CSS personnalisé, et les données qui alimenteront les cartes seront envoyées depuis un fichier .json.

Pour garder les choses simples, nous ne créerons pas de base de données, mais n’hésitez pas à l’implémenter si vous le jugez nécessaire. Vous pouvez utiliser ce tutoriel pour le créer : Application du modèle CQRS dans une application ASP.NET Core dans les sections Création du contexte de base de données et Exécution des commandes EF Core.

Donc, pour créer le fichier JSON, créez un nouveau dossier appelé Data, et à l’intérieur, créez un fichier avec le nom collection.json et insérez-y le code ci-dessous :

[
  {
    "Description": "Walking through the square...",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/hospital-square.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 1",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-1.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 2",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-2.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 3",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-3.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 4",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-4.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 5",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-5.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 6",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-6.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 7",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-7.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  },
  {
    "Description": "A day in the park 8",
    "ImageUrl": "https://github.com/zangassis/my-favorite-places-photos/blob/main/square-soldier-adriano-8.jpg?raw=true",
    "Date": "2023-04-01T18:25:43.511Z"
  }
]

Notez que pour afficher les images, nous utiliserons des liens qui renvoient aux adresses où les images sont stockées. Il est recommandé de stocker des images sur des serveurs cloud, car le stockage d’images dans l’application peut augmenter considérablement le temps de déploiement de l’application et n’est pas recommandé. Les images utilisées dans cet exemple sont uniquement à des fins éducatives. N’hésitez pas à utiliser vos propres images, modifiez simplement la valeur de la propriété pour ImageUrl.

Modifions maintenant le contrôleur de l’application afin que l’application reçoive les données du fichier JSON et les envoie à la page .cshtml que nous allons créer ensuite.

Ainsi, dans le dossier « Controllers » du fichier « HomeController.cs », remplacez le code du Index() méthode avec le code ci-dessous :

string pathData = "Data/collection.json";

using var jsonFile = System.IO.File.OpenRead(pathData);

var items = JsonSerializer.Deserialize<List<PlaceCollectionItem>>(jsonFile);

return View(items);

Notez que dans l’extrait de code ci-dessus, nous transmettons le répertoire où se trouve le fichier JSON au File.OpenRead() méthode qui lira les données, les reconvertira en JSON, les désérialisera, puis les renverra à la vue.

Ensuite, nous allons implémenter la couche visuelle de notre application. Dans le dossier « Vues » > « Accueil », remplacez le code existant par le code ci-dessous :

@model IEnumerable<MyFavoritePlaces.Models.PlaceCollectionItem>

@{
    ViewData["Title"] = "Home Page";
}

<div class="page-title">
    <PageTitle>My favorite places 🌄</PageTitle>
</div>
<div class="place-columns">
    @foreach (var item in Model)
    {
        @Html.Partial("_PlaceCard", item)
        ;
    }
</div>

Le code ci-dessus parcourt la liste des éléments provenant du fichier JSON, puis le code HTML de la carte est rendu à l’aide des données obtenues. L’étape suivante consiste à créer le code HTML de la carte.

Ainsi, dans le dossier « Partagé », faites un clic droit et choisissez l’option « Ajouter » -> « Afficher… » puis choisissez l’option « Razor View – Vide » et mettez le nom « _PlaceCard » puis cliquez sur « Ajouter ».

Ensuite, dans le fichier qui a été créé, remplacez le code existant par le code ci-dessous :

@model MyFavoritePlaces.Models.PlaceCollectionItem

<div class="card">
	<img src="@Model.ImageUrl" alt="Photo of a place" style="width:100%">
	<div class="container">
		<div class="card-description">@Model.Description</div>
		<div class="card-date">@Model.Date</div>
	</div>
</div>

Nous devons également personnaliser la mise en page par défaut pour afficher correctement les cartes. Dans le dossier « Partagé », remplacez le code du fichier « _Layout.cshtml » par le code ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - My Favorite Places 🌄</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Pacifico&family=Patrick+Hand&display=swap" rel="stylesheet">
</head>
<body>

    <div class="main">
        <div class="content px-4">
            @RenderBody()
        </div>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

Appliquer le CSS

La dernière partie consiste à appliquer le CSS qui organisera les fiches et améliorera l’apparence de notre application donc à l’intérieur du dossier « wwwroot » > « css » > dans le fichier « site.css », remplacez le code existant par le code ci-dessous :

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    margin-bottom: 30px;
    margin-right: 30px;
    max-width: 400px;
    min-width: 400px;
}

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

.container {
    padding: 2px 16px;
}

.place-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 15%;
}

.page-title {
    font-size: 40px;
    padding-bottom: 20px;
    padding-top: 20px;
    font-family: 'Pacifico', cursive;
    text-align: center;
}

.card-description {
    font-family: 'Pacifico', cursive;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.card-date {
    font-family: 'Pacifico', cursive;
    padding-bottom: 0.2rem;
    font-size: 13px;
}

Exécution de l’application

Si vous avez suivi les étapes précédentes, l’application est prête à démarrer. Dans Visual Studio, cliquez sur le bouton avec l’icône Play et une fenêtre de navigateur s’ouvrira sur la page d’accueil de l’application, et vous verrez le résultat comme indiqué dans l’image ci-dessous :

Conclusion

Comme démontré dans l’article, il est possible de créer de belles applications dans ASP.NET Core sans trop d’efforts en utilisant le modèle MVC.

MVC a tout ce qu’il faut pour implémenter des applications pour les types de besoins les plus variés, des applications complexes utilisant différentes ressources, ainsi que des applications simples comme celle que nous venons de créer.

Ainsi, chaque fois que vous devez créer un nouveau système Web, pensez à utiliser ASP.NET Core.

Ensuite :
Principes de base d’ASP.NET Core : meilleures pratiques pour la création d’un nouveau projet.