Sol_Ajax_Spa_MVC_Core

? Avis important : ce référentiel est archivé

Merci de votre intérêt pour ce projet ! Depuis le 10 août 2024, nous avons décidé d'archiver ce référentiel. Qu'est-ce que cela signifie?

• Pas de nouveau développement : nous ne développerons pas activement de nouvelles fonctionnalités ni ne résoudrons les problèmes.
• Lecture seule : le référentiel est désormais en lecture seule. Vous pouvez toujours le cloner, mais aucune autre modification ne sera acceptée.
• Solutions alternatives : si vous recherchez des solutions alternatives ou des projets similaires, envisagez d'explorer le lien suivant : Article moyen : Transformer les applications ASP.NET Core MVC en applications à page unique à l'aide d'AppRun.

Application d'une seule page dans le noyau Asp.net (Spa MVC Core)

Meilleure approche pour transformer une application ASP.NET Core en application à page unique à l’aide de la méthodologie Ajax. La devise principale est de réduire les efforts des développeurs tout en travaillant à la création d'un SPA et en améliorant les performances de l'application Web, tant côté serveur que côté client.

Point clé

• Pas besoin d'écrire du code Jquery pour créer une application sur une seule page.
• La bibliothèque Ajax Spa a une fonction ajax intégrée qui sera appelée automatiquement.
• Utilisez le routage côté serveur par défaut.
• Le développeur peut également utiliser côte à côte d’autres frameworks javascript.

Note

Cette bibliothèque s'appliquera à la solution Asp.net core 3.1 à 6.0.

Installation

Étape 1 :

Installez le package nuget suivant dans votre solution.

Utilisation du gestionnaire de packages Nuget :

 PM> Install-Package AjaxSpaMvcCore -Version 1.0.1

Utilisation de la CLI .Net :

 > dotnet add package AjaxSpaMvcCore --version 1.0.1

Étape 2 :

Accédez au fichier Startup.cs , ajoutez le middleware suivant sur la méthode Configure .

 app . UseAjaxSpa ( ) ;

Étape 3 :

Ajoutez la référence d’assistance Ajax spa Tag sur le fichier _ViewImports.cshtml dans le dossier View.

 @addTagHelper * , AjaxSpaMvcCore

Remarque : Générez la solution.

Étape 4 :

Accédez au fichier _Layout.cshtml , effectuez le processus suivant.

1. Ajoutez la référence côté client suivante avant la balise body de fermeture

 < script src =" ~/AjaxSpaResource/js/core.js " > </ script >
< script src =" ~/AjaxSpaResource/js/spa.js " > </ script >

2. Remplacez la méthode RenderBody() par l'assistant de balise spa ajax suivant, comme celui-ci

< main role = " main " class = " pb-3 " >
    @* @RenderBody() *@
    < ajax-spa render-body = " @RenderBody() " ></ ajax-spa >
 </ main >

Étape 5 :

Appliquez la page de mise en page à l’aide de la méthode d’extension ApplyLayoutAsync() dans le fichier _ViewStart.cshtml .

 @ using AjaxSpaMvcCore
@{
    // Layout = "_Layout";
    Layout = await Context . Request . ApplyLayoutAsync ( " ~/Views/Shared/_Layout.cshtml " );
}

Créez la solution et lancez l'application Web sur le navigateur. Vous serez averti que les vues de vos enfants ne s'actualisent pas dans le navigateur.

Nous convertissons l’intégralité de la solution MVC de base Asp.net en application à page unique en utilisant cette bibliothèque.