Partager via

Mettre à niveau à partir de ASP.NET MVC et de l’API web vers ASP.NET Core MVC

Cet article explique comment commencer à migrer un projet MVC ASP.NET vers ASP.NET Core MVC. Dans le processus, il met en évidence les modifications associées de ASP.NET MVC.

La migration à partir de ASP.NET MVC est un processus en plusieurs étapes. Cet article traite des sujets suivants :

  • Configuration initiale.
  • Contrôleurs et vues de base.
  • Contenu statique.
  • Dépendances côté client.

Pour migrer la configuration et Identity le code, consultez Migrer la configuration vers ASP.NET Core et Migrer l’authentification et Identity vers ASP.NET Core.

Prerequisites

Créer le projet de démarrage ASP.NET MVC

Créez un exemple ASP.NET projet MVC dans Visual Studio pour migrer :

  1. Dans le menu Fichier, sélectionnez Nouveau>Projet.
  2. Sélectionnez ASP.NET application web (.NET Framework), puis sélectionnez Suivant.
  3. Nommez le projet WebApp1 afin que l’espace de noms corresponde au projet ASP.NET Core créé à l’étape suivante. Cliquez sur Créer.
  4. Sélectionnez MVC, puis sélectionnez Créer.

Créer le projet ASP.NET Core

Créez une nouvelle solution avec un nouveau projet ASP.NET Core pour migrer vers :

  1. Lancez une deuxième instance de Visual Studio.
  2. Dans le menu Fichier, sélectionnez Nouveau>Projet.
  3. Sélectionnez ASP.NET Application web principale , puis sélectionnez Suivant.
  4. Dans la boîte de dialogue Configurer votre nouveau projet , nommez le projet WebApp1.
  5. Définissez l’emplacement sur un répertoire différent du projet précédent pour utiliser le même nom de projet. L’utilisation du même espace de noms facilite la copie du code entre les deux projets. Cliquez sur Créer.
  6. Dans la boîte de dialogue Créer une application web ASP.NET Core , vérifiez que .NET Core et ASP.NET Core 3.1 sont sélectionnés. Sélectionnez le modèle de projet Application web (Modèle-View-Controller), puis sélectionnez Créer.

Configurer le site ASP.NET Core pour utiliser MVC

Dans les projets ASP.NET Core 3.0 ou ultérieurs, .NET Framework n’est plus un cadre cible pris en charge. Votre projet doit cibler .NET Core. L’infrastructure partagée ASP.NET Core, qui inclut MVC, fait partie de l’installation du runtime .NET Core. L’infrastructure partagée est automatiquement référencée lors de l’utilisation du Microsoft.NET.Sdk.Web Kit de développement logiciel (SDK) dans le fichier projet :

<Project Sdk="Microsoft.NET.Sdk.Web">

Pour plus d’informations, consultez référence du cadre.

Dans ASP.NET Core, la Startup classe :

  • Remplace Global.asax.
  • Gère toutes les tâches de démarrage d’application.

Pour plus d’informations, consultez Start-up de l’application dans ASP.NET Core.

Dans le projet ASP.NET Core, ouvrez le Startup.cs fichier :

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

Les applications ASP.NET Core doivent activer les fonctionnalités du framework avec des intergiciels. Le code généré par le modèle précédent ajoute les services et les intergiciels suivants :

  • La méthode d’extension AddControllersWithViews enregistre la prise en charge des services MVC pour les contrôleurs, les fonctionnalités liées aux API et les vues. Pour plus d’informations sur les options d’inscription de service MVC, consultez inscription de service MVC
  • La UseStaticFiles méthode d’extension ajoute le gestionnaire Microsoft.AspNetCore.StaticFilesde fichiers statique . La UseStaticFiles méthode d’extension doit être appelée avant UseRouting. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.
  • La méthode d'extension UseRouting ajoute le routage. Pour plus d’informations, consultez Routage dans ASP.NET Core.

Cette configuration existante inclut ce qui est nécessaire pour migrer l’exemple ASP.NET projet MVC. Pour plus d’informations sur les options d'intergiciel dans ASP.NET Core, consultez Démarrage de l'application dans ASP.NET Core.

Migrer des contrôleurs et des vues

Dans le projet ASP.NET Core, une nouvelle classe de contrôleur vide ainsi qu'une classe de vue vide seront ajoutées en tant que modèles, en utilisant les mêmes noms que les classes de contrôleur et de vue du projet ASP.NET MVC à migrer.

Le projet ASP.NET Core WebApp1 inclut déjà un exemple minimal de contrôleur et d’affichage par le même nom que le projet ASP.NET MVC. Ils serviront donc d’espaces réservés pour le contrôleur ASP.NET MVC et les vues à migrer à partir du projet ASP.NET MVC WebApp1.

  1. Copiez les méthodes du ASP.NET MVC HomeController pour remplacer les nouvelles méthodes ASP.NET Core HomeController . Il n’est pas nécessaire de modifier le type de retour des méthodes d’action. Le type de retour de méthode d’action du contrôleur intégré du modèle MVC ASP.NET est ActionResult; dans ASP.NET Core MVC, les méthodes d’action retournent IActionResult à la place. L'objet ActionResult implémente l'objet IActionResult.
  2. Dans le projet ASP.NET Core, cliquez avec le bouton droit sur le répertoire Vues/Home Répertoires, puis sélectionnez Ajouter un>élément existant.
  3. Dans la boîte de dialogue Ajouter un élément existant, accédez au ASP.NET MVC WebApp1 projet Vues/Home répertoire.
  4. Sélectionnez les About.cshtmlfichiers, Contact.cshtmlpuis Index.cshtmlRazor affichez les fichiers, puis sélectionnez Ajouter, en remplaçant les fichiers existants.

Pour plus d’informations, consultez Gérer les requêtes avec des contrôleurs dans ASP.NET Core MVC et les vues dans ASP.NET Core MVC.

Tester chaque méthode

Toutefois, chaque point de terminaison du contrôleur peut être testé, la disposition et les styles sont abordés plus loin dans le document.

  1. Exécutez l’application ASP.NET Core.
  2. Depuis le navigateur, invoquez les vues rendues de l'application ASP.NET Core en remplaçant le numéro de port actuel par celui utilisé dans le projet ASP.NET Core. Par exemple : https://localhost:44375/home/about.

Migrer du contenu statique

Dans ASP.NET MVC 5 ou version antérieure, le contenu statique a été hébergé à partir du répertoire racine du projet web et a été mélangé avec des fichiers côté serveur. Dans ASP.NET Core, les fichiers statiques sont stockés dans le répertoire racine web du projet. Le répertoire par défaut est {content root}/wwwroot, mais il peut être modifié. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

Copiez le contenu statique du projet ASP.NET MVC WebApp1 dans le wwwroot répertoire du projet ASP.NET Core WebApp1 :

  1. Dans le projet ASP.NET Core, cliquez avec le bouton droit sur le wwwroot répertoire, puis sélectionnez Ajouter un>élément existant.
  2. Dans la boîte de dialogue Ajouter un élément existant , accédez au projet ASP.NET WebApp1 MVC.
  3. Sélectionnez le favicon.ico fichier, puis sélectionnez Ajouter, en remplaçant le fichier existant.

Migrer les fichiers de disposition

Copiez les fichiers de disposition de projet MVC ASP.NET dans le projet ASP.NET Core :

  1. Dans le projet ASP.NET Core, cliquez avec le bouton droit sur le Views répertoire, puis sélectionnez Ajouter un>élément existant.
  2. Dans la boîte de dialogue Ajouter un élément existant, accédez au répertoire du projet MVC Views ASP.NET.
  3. Sélectionnez le _ViewStart.cshtml fichier, puis sélectionnez Ajouter.

Copiez les fichiers de disposition partagés du projet ASP.NET MVC vers le projet ASP.NET Core :

  1. Dans le projet ASP.NET Core, cliquez avec le bouton droit sur le Views/Shared répertoire, puis sélectionnez Ajouter un>élément existant.
  2. Dans la boîte de dialogue Ajouter un élément existant, accédez au répertoire du projet MVC Views/Shared ASP.NET.
  3. Sélectionnez le _Layout.cshtml fichier, puis sélectionnez Ajouter, en remplaçant le fichier existant.

Dans le projet ASP.NET Core, ouvrez le _Layout.cshtml fichier. Apportez les modifications suivantes pour correspondre au code terminé indiqué ci-dessous :

Mettez à jour l’inclusion CSS Bootstrap pour qu’elle corresponde au code terminé ci-dessous :

  1. Remplacez @Styles.Render("~/Content/css") par un élément <link> afin de charger bootstrap.css (voir ci-dessous).
  2. Supprimez @Scripts.Render("~/bundles/modernizr").

Le balisage final de remplacement pour l’inclusion de Bootstrap CSS :

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

Mettez à jour l’inclusion JavaScript jQuery et Bootstrap pour qu’elle corresponde au code terminé ci-dessous :

  1. Remplacez @Scripts.Render("~/bundles/jquery") par un élément <script> (voir ci-dessous).
  2. Remplacez @Scripts.Render("~/bundles/bootstrap") par un élément <script> (voir ci-dessous).

Le balisage final de remplacement pour l’inclusion de jQuery et de Bootstrap JavaScript :

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Le fichier mis à jour _Layout.cshtml est illustré ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Affichez le site dans le navigateur. Il doit s’afficher avec les styles attendus en place.

Configurer le regroupement et la minification

ASP.NET Core est compatible avec plusieurs solutions de regroupement et de minification open source telles que WebOptimizer et d’autres bibliothèques similaires. ASP.NET Core ne propose pas de solution native pour la concaténation et la minification des fichiers. Pour plus d’informations sur la configuration du regroupement et de la minification, consultez Regroupement et minification.

Résoudre les erreurs HTTP 500

Il existe de nombreux problèmes qui peuvent entraîner un message d’erreur HTTP 500 qui ne contient aucune information sur la source du problème. Par exemple, si le Views/_ViewImports.cshtml fichier contient un espace de noms qui n’existe pas dans le projet, une erreur HTTP 500 est générée. Par défaut, dans les applications ASP.NET Core, l'extension UseDeveloperExceptionPage est ajoutée au IApplicationBuilder et est exécutée lorsque l'environnement est en mode Développement. Ceci est détaillé dans le code suivant :

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

ASP.NET Core convertit les exceptions non gérées en réponses d’erreur HTTP 500. Normalement, les détails d’erreur ne sont pas inclus dans ces réponses pour empêcher la divulgation d’informations potentiellement sensibles sur le serveur. Pour plus d’informations, consultez la page d’exception du développeur.

Étapes suivantes

  • <identity.md>

Ressources supplémentaires

Cet article explique comment commencer à migrer un projet MVC ASP.NET vers ASP.NET Core MVC 2.2. Dans le processus, il met en évidence de nombreuses choses qui ont changé de ASP.NET MVC. La migration à partir de ASP.NET MVC est un processus en plusieurs étapes. Cet article traite des sujets suivants :

  • Configuration initiale
  • Contrôleurs et vues de base
  • Contenu statique
  • Dépendances côté client.

Pour migrer la configuration et le code Identity, consultez <configuration.md> et <identity.md>.

Note

Les numéros de version dans les exemples peuvent ne pas être actuels, mettez à jour les projets en conséquence.

Créer le projet de démarrage ASP.NET MVC

Pour illustrer la mise à niveau, nous allons commencer par créer une application MVC ASP.NET. Créez-le avec le nom WebApp1 afin que l’espace de noms corresponde au projet ASP.NET Core créé à l’étape suivante.

Visual Studio : boîte de dialogue Nouveau projet

Boîte de dialogue Nouvelle application web : modèle de projet MVC sélectionné dans le panneau de modèles ASP.NET

Optionnel: Remplacez le nom de la solution de WebApp1 par Mvc5. Visual Studio affiche le nouveau nom de solution (Mvc5), ce qui facilite l’identification de ce projet à partir du projet suivant.

Créer le projet ASP.NET Core

Créez une application web ASP.NET Core vide portant le même nom que le projet précédent (WebApp1) afin que les espaces de noms dans les deux projets correspondent. Le fait d’avoir le même espace de noms facilite la copie du code entre les deux projets. Créez ce projet dans un répertoire différent du projet précédent pour utiliser le même nom.

boîte de dialogue Nouveau projet Boîte de dialogue Nouveau projet

Boîte de dialogue Nouvelle application web ASP.NET : modèle de projet vide sélectionné dans le panneau Modèles ASP.NET Core

  • Optionnel: Créez une application ASP.NET Core à l’aide du modèle de projet Application web . Nommez le projet WebApp1, puis sélectionnez une option d’authentification de comptes d’utilisateur individuels. Renommez cette application en FullAspNetCore. La création de ce projet permet de gagner du temps dans la conversion. Le résultat final peut être consulté dans le code généré par le modèle, le code peut être copié dans le projet de conversion ou comparé au projet généré par le modèle.

Configurer le site pour utiliser MVC

  • Lorsque vous ciblez .NET Core, le métapackage Microsoft.AspNetCore.App est référencé par défaut. Ce package contient des packages couramment utilisés par les applications MVC. Si vous ciblez .NET Framework, les références de package doivent être répertoriées individuellement dans le fichier projet.

Microsoft.AspNetCore.Mvc est l’infrastructure ASP.NET Core MVC. Microsoft.AspNetCore.StaticFiles est le gestionnaire de fichiers statique. ASP.NET applications Core optent explicitement pour les intergiciels, par exemple pour servir des fichiers statiques. Pour plus d’informations, consultez Fichiers statiques.

  • Ouvrez le Startup.cs fichier et modifiez le code pour qu’il corresponde à ce qui suit :
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

La UseStaticFiles méthode d’extension ajoute le gestionnaire de fichiers statique. Pour plus d’informations, consultez Démarrage et routage des applications.

Ajouter un contrôleur et une vue

Dans cette section, un contrôleur minimal et une vue sont ajoutés en tant que modèles pour les contrôleurs et vues ASP.NET MVC qui seront migrés dans la section suivante.

  • Ajoutez un Controllers répertoire.

  • Ajoutez une classe de contrôleur nommée HomeController.cs au Controllers répertoire.

Boîte de dialogue Ajouter un nouvel élément avec la classe de contrôleur MVC sélectionnée

  • Ajoutez un Views répertoire.

  • Ajoutez un Views/Home répertoire.

  • Ajoutez un Razor affichage nommé Index.cshtml au Views/Home répertoire.

Boîte de dialogue Ajouter un nouvel élément avec la page d’affichage MVC sélectionnée

La structure du projet est illustrée ci-dessous :

Explorateur de solutions affichant des fichiers et des répertoires de WebApp1

Remplacez le contenu du Views/Home/Index.cshtml fichier par le balisage suivant :

<h1>Hello world!</h1>

Exécutez l’application.

Application web ouverte dans Microsoft Edge

Pour plus d’informations, consultez Contrôleurs et vues.

La fonctionnalité suivante nécessite la migration de l’exemple ASP.NET projet MVC vers le projet ASP.NET Core :

  • contenu côté client (CSS, polices et scripts)

  • controllers

  • views

  • models

  • bundling

  • filters

  • Connectez-vous/sortez, Identity (Cette opération est effectuée dans le didacticiel suivant.)

Contrôleurs et vues

  • Copiez chacune des méthodes de l’ASP.NET MVC HomeController vers la nouvelle HomeController. Dans ASP.NET MVC, le type de retour de méthode d’action du contrôleur intégré du modèle est ActionResult; dans ASP.NET Core MVC, les méthodes d’action retournent IActionResult à la place. ActionResult implémente IActionResult, il n’est donc pas nécessaire de modifier le type de retour des méthodes d’action.

  • Copiez les fichiers About.cshtml, Contact.cshtml, Index.cshtml et Razor du projet ASP.NET MVC vers le projet ASP.NET Core.

Tester chaque méthode

Le fichier de disposition et les styles n’ont pas encore été migrés, de sorte que les vues rendues contiennent uniquement le contenu dans les fichiers d’affichage. Les liens générés par le fichier de disposition pour les vues About et Contact ne seront pas encore disponibles.

Accédez aux vues rendues depuis le navigateur sur l'application ASP.NET core en cours d'exécution, en remplaçant le numéro de port actuel par celui utilisé dans le projet ASP.NET core. Par exemple : https://localhost:44375/home/about.

Page de contact

Notez l’absence de style et d’éléments de menu. Le style sera corrigé dans la section suivante.

Contenu statique

Dans ASP.NET MVC 5 ou version antérieure, le contenu statique a été hébergé à partir de la racine du projet web et a été mélangé avec des fichiers côté serveur. Dans ASP.NET Core, le contenu statique est hébergé dans le wwwroot répertoire. Copiez le contenu statique de l’application ASP.NET MVC dans le wwwroot répertoire du projet ASP.NET Core. Dans cet exemple de conversion :

  • Copiez le favicon.ico fichier du projet ASP.NET MVC dans le wwwroot répertoire du projet ASP.NET Core.

Le projet ASP.NET MVC utilise Bootstrap pour sa mise en forme et stocke les fichiers Bootstrap dans les répertoires Content et Scripts. Le modèle, qui a généré le projet ASP.NET MVC, fait référence à Bootstrap dans le fichier de disposition (Views/Shared/_Layout.cshtml). Les fichiers bootstrap.js et bootstrap.css peuvent être copiés à partir du projet MVC ASP.NET vers le répertoire wwwroot du nouveau projet. Au lieu de cela, ce document ajoute la prise en charge de Bootstrap (et d’autres bibliothèques côté client) à l’aide de CDN, dans la section suivante.

Migrer le fichier de disposition

  • Copiez le _ViewStart.cshtml fichier à partir du répertoire du Views projet ASP.NET MVC dans le répertoire du Views projet ASP.NET Core. Le _ViewStart.cshtml fichier n’a pas changé dans ASP.NET Core MVC.

  • Créez un répertoire Views/Shared.

  • Optionnel: Copiez _ViewImports.cshtml à partir du répertoire du projet Views dans le répertoire du Views projet ASP.NET Core. Supprimez toute déclaration d’espace de noms dans le _ViewImports.cshtml fichier. Le fichier _ViewImports.cshtml fournit des espaces de noms à tous les fichiers de vue et inclut les Tag Helpers. Les tag Helpers sont utilisés dans le nouveau fichier de disposition. Le _ViewImports.cshtml fichier est nouveau pour ASP.NET Core.

  • Copiez le _Layout.cshtml fichier à partir du répertoire du Views/Shared projet ASP.NET MVC dans le répertoire du Views/Shared projet ASP.NET Core.

Ouvrez _Layout.cshtml le fichier et apportez les modifications suivantes (le code terminé est illustré ci-dessous) :

  • Remplacez @Styles.Render("~/Content/css") par un élément <link> afin de charger bootstrap.css (voir ci-dessous).

  • Supprimez @Scripts.Render("~/bundles/modernizr").

  • Commentez la @Html.Partial("_LoginPartial") ligne (entourez la ligne avec @*...*@). Pour plus d’informations, consultez Migrer l’authentification et Identity vers ASP.NET Core

  • Remplacez @Scripts.Render("~/bundles/jquery") par un élément <script> (voir ci-dessous).

  • Remplacez @Scripts.Render("~/bundles/bootstrap") par un élément <script> (voir ci-dessous).

Le balisage de remplacement pour l’inclusion de Bootstrap CSS :

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

Le balisage de remplacement pour l'inclusion de JavaScript dans jQuery et Bootstrap :

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Le fichier mis à jour _Layout.cshtml est illustré ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @*@Html.Partial("_LoginPartial")*@
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Affichez le site dans le navigateur. Il doit maintenant se charger correctement, avec les styles attendus en place.

  • Optionnel: Essayez d’utiliser le nouveau fichier de disposition. Copiez le fichier de disposition à partir du projet FullAspNetCore . Le nouveau fichier de disposition utilise Tag Helpers et présente d’autres améliorations.

Configurer le regroupement et la minification

Pour plus d’informations sur la configuration du regroupement et de la minification, consultez Regroupement et minification.

Résoudre les erreurs HTTP 500

Il existe de nombreux problèmes qui peuvent entraîner des messages d’erreur HTTP 500 qui ne contiennent aucune information sur la source du problème. Par exemple, si le Views/_ViewImports.cshtml fichier contient un espace de noms qui n’existe pas dans le projet, une erreur HTTP 500 est générée. Par défaut, dans les applications ASP.NET Core, l'extension UseDeveloperExceptionPage est ajoutée à IApplicationBuilder et exécutée lorsque la configuration est Développement. Consultez un exemple dans le code suivant :

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

ASP.NET Core convertit les exceptions non gérées en réponses d’erreur HTTP 500. Normalement, les détails d’erreur ne sont pas inclus dans ces réponses pour empêcher la divulgation d’informations potentiellement sensibles sur le serveur. Pour plus d’informations, consultez la page d’exception du développeur.

Ressources supplémentaires

Cet article explique comment commencer à migrer un projet MVC ASP.NET vers ASP.NET Core MVC 2.1. Dans le processus, il met en évidence de nombreuses choses qui ont changé de ASP.NET MVC. La migration à partir de ASP.NET MVC est un processus en plusieurs étapes. Cet article traite des sujets suivants :

  • Configuration initiale
  • Contrôleurs et vues de base
  • Contenu statique
  • Dépendances côté client.

Pour migrer la configuration et Identity le code, consultez Migrer la configuration vers ASP.NET Core et Migrer l’authentification et Identity vers ASP.NET Core.

Note

Les numéros de version dans les exemples peuvent ne pas être actuels, mettez à jour les projets en conséquence.

Créer le projet de démarrage ASP.NET MVC

Pour illustrer la mise à niveau, nous allons commencer par créer une application MVC ASP.NET. Créez-le avec le nom WebApp1 afin que l’espace de noms corresponde au projet ASP.NET Core créé à l’étape suivante.

Visual Studio : boîte de dialogue Nouveau projet

Boîte de dialogue Nouvelle application web : modèle de projet MVC sélectionné dans le panneau de modèles ASP.NET

Optionnel: Remplacez le nom de la solution de WebApp1 par Mvc5. Visual Studio affiche le nouveau nom de solution (Mvc5), ce qui facilite l’identification de ce projet à partir du projet suivant.

Créer le projet ASP.NET Core

Créez une application web ASP.NET Core vide portant le même nom que le projet précédent (WebApp1) afin que les espaces de noms dans les deux projets correspondent. Le fait d’avoir le même espace de noms facilite la copie du code entre les deux projets. Créez ce projet dans un répertoire différent du projet précédent pour utiliser le même nom.

boîte de dialogue Nouveau projet Boîte de dialogue Nouveau projet

Boîte de dialogue Nouvelle application web ASP.NET : modèle de projet vide sélectionné dans le panneau Modèles ASP.NET Core

  • Optionnel: Créez une application ASP.NET Core à l’aide du modèle de projet Application web . Nommez le projet WebApp1, puis sélectionnez une option d’authentification de comptes d’utilisateur individuels. Renommez cette application en FullAspNetCore. La création de ce projet permet de gagner du temps dans la conversion. Le résultat final peut être consulté dans le code généré par le modèle, le code peut être copié dans le projet de conversion ou comparé au projet généré par le modèle.

Configurer le site pour utiliser MVC

  • Lorsque vous ciblez .NET Core, le métapackage Microsoft.AspNetCore.App est référencé par défaut. Ce package contient des packages couramment utilisés par les applications MVC. Si vous ciblez .NET Framework, les références de package doivent être répertoriées individuellement dans le fichier projet.

Microsoft.AspNetCore.Mvc est l’infrastructure ASP.NET Core MVC. Microsoft.AspNetCore.StaticFiles est le gestionnaire de fichiers statique. ASP.NET applications Core optent explicitement pour les intergiciels, par exemple pour servir des fichiers statiques. Pour plus d’informations, consultez Fichiers statiques.

  • Ouvrez le Startup.cs fichier et modifiez le code pour qu’il corresponde à ce qui suit :
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

La UseStaticFiles méthode d’extension ajoute le gestionnaire de fichiers statique. La méthode d'extension UseMvc ajoute le routage. Pour plus d’informations, consultez Démarrage et routage des applications.

Ajouter un contrôleur et une vue

Dans cette section, un contrôleur minimal et une vue sont ajoutés en tant que modèles pour les contrôleurs et vues ASP.NET MVC qui seront migrés dans la section suivante.

  • Ajoutez un Controllers répertoire.

  • Ajoutez une classe de contrôleur nommée HomeController.cs au Controllers répertoire.

Boîte de dialogue Ajouter un nouvel élément avec la classe de contrôleur MVC sélectionnée (avant la publication de ASP.NET Core 2.1)

  • Ajoutez un Views répertoire.

  • Ajoutez un Views/Home répertoire.

  • Ajoutez un Razor affichage nommé Index.cshtml au Views/Home répertoire.

Boîte de dialogue Ajouter un nouvel élément avec la page d’affichage MVC sélectionnée (avant la publication de ASP.NET Core 2.1)

La structure du projet est illustrée ci-dessous :

Explorateur de solutions affichant des fichiers et des répertoires de WebApp1

Remplacez le contenu du Views/Home/Index.cshtml fichier par le balisage suivant :

<h1>Hello world!</h1>

Exécutez l’application.

Application web ouverte dans Microsoft Edge

Pour plus d’informations, consultez Contrôleurs et vues.

La fonctionnalité suivante nécessite la migration de l’exemple ASP.NET projet MVC vers le projet ASP.NET Core :

  • contenu côté client (CSS, polices et scripts)

  • controllers

  • views

  • models

  • bundling

  • filters

  • Connectez-vous/sortez, Identity (Cette opération est effectuée dans le didacticiel suivant.)

Contrôleurs et vues

  • Copiez chacune des méthodes de l’ASP.NET MVC HomeController vers la nouvelle HomeController. Dans ASP.NET MVC, le type de retour de méthode d’action du contrôleur intégré du modèle est ActionResult; dans ASP.NET Core MVC, les méthodes d’action retournent IActionResult à la place. ActionResult implémente IActionResult, il n’est donc pas nécessaire de modifier le type de retour des méthodes d’action.

  • Copiez les fichiers About.cshtml, Contact.cshtml, Index.cshtml et Razor du projet ASP.NET MVC vers le projet ASP.NET Core.

Tester chaque méthode

Le fichier de disposition et les styles n’ont pas encore été migrés, de sorte que les vues rendues contiennent uniquement le contenu dans les fichiers d’affichage. Les liens générés par le fichier de disposition pour les vues About et Contact ne seront pas encore disponibles.

  • Accédez aux vues rendues depuis le navigateur sur l'application ASP.NET core en cours d'exécution, en remplaçant le numéro de port actuel par celui utilisé dans le projet ASP.NET core. Par exemple : https://localhost:44375/home/about.

Page de contact

Notez l’absence de style et d’éléments de menu. Le style sera corrigé dans la section suivante.

Contenu statique

Dans ASP.NET MVC 5 ou version antérieure, le contenu statique a été hébergé à partir de la racine du projet web et a été mélangé avec des fichiers côté serveur. Dans ASP.NET Core, le contenu statique est hébergé dans le wwwroot répertoire. Copiez le contenu statique de l’application ASP.NET MVC dans le wwwroot répertoire du projet ASP.NET Core. Dans cet exemple de conversion :

  • Copiez le favicon.ico fichier du projet ASP.NET MVC dans le wwwroot répertoire du projet ASP.NET Core.

Le projet ASP.NET MVC utilise Bootstrap pour sa mise en forme et stocke les fichiers Bootstrap dans les répertoires Content et Scripts. Le modèle, qui a généré le projet ASP.NET MVC, fait référence à Bootstrap dans le fichier de disposition (Views/Shared/_Layout.cshtml). Les fichiers bootstrap.js et bootstrap.css peuvent être copiés à partir du projet MVC ASP.NET vers le répertoire wwwroot du nouveau projet. Au lieu de cela, ce document ajoute la prise en charge de Bootstrap (et d’autres bibliothèques côté client) à l’aide de CDN, dans la section suivante.

Migrer le fichier de disposition

  • Copiez le _ViewStart.cshtml fichier à partir du répertoire du Views projet ASP.NET MVC dans le répertoire du Views projet ASP.NET Core. Le _ViewStart.cshtml fichier n’a pas changé dans ASP.NET Core MVC.

  • Créez un répertoire Views/Shared.

  • Optionnel: Copiez _ViewImports.cshtml à partir du répertoire du projet Views dans le répertoire du Views projet ASP.NET Core. Supprimez toute déclaration d’espace de noms dans le _ViewImports.cshtml fichier. Le fichier _ViewImports.cshtml fournit des espaces de noms à tous les fichiers de vue et inclut les Tag Helpers. Les tag Helpers sont utilisés dans le nouveau fichier de disposition. Le _ViewImports.cshtml fichier est nouveau pour ASP.NET Core.

  • Copiez le _Layout.cshtml fichier à partir du répertoire du Views/Shared projet ASP.NET MVC dans le répertoire du Views/Shared projet ASP.NET Core.

Ouvrez _Layout.cshtml le fichier et apportez les modifications suivantes (le code terminé est illustré ci-dessous) :

  • Remplacez @Styles.Render("~/Content/css") par un élément <link> afin de charger bootstrap.css (voir ci-dessous).

  • Supprimez @Scripts.Render("~/bundles/modernizr").

  • Commentez la @Html.Partial("_LoginPartial") ligne (entourez la ligne avec @*...*@). Pour plus d’informations, consultez Migrer l’authentification et Identity vers ASP.NET Core

  • Remplacez @Scripts.Render("~/bundles/jquery") par un élément <script> (voir ci-dessous).

  • Remplacez @Scripts.Render("~/bundles/bootstrap") par un élément <script> (voir ci-dessous).

Le balisage de remplacement pour l’inclusion de Bootstrap CSS :

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

Le balisage de remplacement pour l'inclusion de JavaScript dans jQuery et Bootstrap :

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Le fichier mis à jour _Layout.cshtml est illustré ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @*@Html.Partial("_LoginPartial")*@
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Affichez le site dans le navigateur. Il doit maintenant se charger correctement, avec les styles attendus en place.

  • Optionnel: Essayez d’utiliser le nouveau fichier de disposition. Copiez le fichier de disposition à partir du projet FullAspNetCore . Le nouveau fichier de disposition utilise Tag Helpers et présente d’autres améliorations.

Configurer le regroupement et la minification

Pour plus d’informations sur la configuration du regroupement et de la minification, consultez Regroupement et minification.

Résoudre les erreurs HTTP 500

Il existe de nombreux problèmes qui peuvent entraîner des messages d’erreur HTTP 500 qui ne contiennent aucune information sur la source du problème. Par exemple, si le Views/_ViewImports.cshtml fichier contient un espace de noms qui n’existe pas dans le projet, une erreur HTTP 500 est générée. Par défaut, dans les applications ASP.NET Core, l'extension UseDeveloperExceptionPage est ajoutée à IApplicationBuilder et exécutée lorsque la configuration est Développement. Consultez un exemple dans le code suivant :

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

ASP.NET Core convertit les exceptions non gérées en réponses d’erreur HTTP 500. Normalement, les détails d’erreur ne sont pas inclus dans ces réponses pour empêcher la divulgation d’informations potentiellement sensibles sur le serveur. Pour plus d’informations, consultez la page d’exception du développeur.

Ressources supplémentaires

  • Last updated on