Eseguire l'aggiornamento da ASP.NET MVC e API Web a ASP.NET Core MVC

Questo articolo illustra come avviare la migrazione di un progetto MVC ASP.NET a ASP.NET Core MVC. Durante il processo, vengono evidenziate le modifiche correlate di ASP.NET MVC.

La migrazione da ASP.NET MVC è un processo in più passaggi. Questo articolo tratta:

• Configurazione iniziale.
• Controller e viste di base.
• Contenuto statico.
• Dipendenze lato client.

Per la migrazione della configurazione e Identity del codice, vedere Eseguire la migrazione della configurazione a ASP.NET Core ed eseguire la migrazione dell'autenticazione e Identity a ASP.NET Core.

Prerequisites

• Visual Studio 2019 16.4 o versione successiva con il carico di lavoro di sviluppo ASP.NET e Web
• .NET Core 3.1 SDK

Creare un progetto iniziale di ASP.NET MVC

Creare un esempio ASP.NET progetto MVC in Visual Studio per eseguire la migrazione:

1. Dal menu File, scegliere Nuovo>Progetto.
2. Selezionare ASP.NET'applicazione Web (.NET Framework) e quindi selezionare Avanti.
3. Assegnare al progetto il nome WebApp1 in modo che lo spazio dei nomi corrisponda al ASP.NET progetto Core creato nel passaggio successivo. Fare clic su Crea.
4. Selezionare MVC e quindi Crea.

Creare il progetto ASP.NET Core

Creare una nuova soluzione con un nuovo progetto ASP.NET Core per eseguire la migrazione a:

1. Avviare una seconda istanza di Visual Studio.
2. Dal menu File, scegliere Nuovo>Progetto.
3. Selezionare ASP.NET Core Web Application (Applicazione Web principale ) e quindi selezionare Avanti.
4. Nella finestra di dialogo Configura il nuovo progetto denominare il progetto WebApp1.
5. Impostare il percorso su una directory diversa rispetto al progetto precedente per usare lo stesso nome di progetto. L'uso dello stesso spazio dei nomi semplifica la copia del codice tra i due progetti. Fare clic su Crea.
6. Nella finestra di dialogo Crea una nuova applicazione Web ASP.NET Core verificare che siano selezionati .NET Core e ASP.NET Core 3.1. Selezionare il modello di progetto Applicazione Web (Modello-View-Controller) e selezionare Crea.

Configurare il sito ASP.NET Core per l'uso di MVC

In ASP.NET core 3.0 o versioni successive, .NET Framework non è più un framework di destinazione supportato. Il progetto deve avere come destinazione .NET Core. Il framework condiviso ASP.NET Core, che include MVC, fa parte dell'installazione del runtime di .NET Core. Il framework condiviso viene fatto automaticamente riferimento quando si usa l'SDK Microsoft.NET.Sdk.Web nel file di progetto:

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

Per altre informazioni, vedere Informazioni di riferimento sul framework.

In ASP.NET Core, la classe Startup:

• Sostituisce Global.asax.
• Gestisce tutte le attività di avvio dell'app.

Per altre informazioni, vedere Avvio dell'app in ASP.NET Core.

Nel progetto ASP.NET Core aprire il Startup.cs file:

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?}");
        });
    }
}

Le app ASP.NET Core devono abilitare esplicitamente le funzionalità del framework con il middleware. Il codice precedente generato dal modello aggiunge i servizi e il middleware seguenti:

• Il AddControllersWithViews metodo di estensione registra il supporto del servizio MVC per controller, funzionalità e visualizzazioni correlate all'API. Per altre informazioni sulle opzioni di registrazione del servizio MVC, vedere Registrazione del servizio MVC
• Il UseStaticFiles metodo di estensione aggiunge il gestore Microsoft.AspNetCore.StaticFilesdi file statico . Il metodo di estensione UseStaticFiles deve essere chiamato prima UseRouting. Per altre informazioni, vedere File statici in ASP.NET Core.
• Il UseRouting metodo di estensione aggiunge il routing. Per altre informazioni, vedere Routing in ASP.NET Core.

Questa configurazione esistente include ciò che è necessario per eseguire la migrazione dell'esempio ASP.NET progetto MVC. Per altre informazioni sulle opzioni middleware di ASP.NET Core, vedere Avvio dell'app in ASP.NET Core.

Eseguire la migrazione di controller e viste

Nel progetto ASP.NET Core, verrà aggiunta una nuova classe controller vuota e una nuova classe di visualizzazione per fungere da segnaposto usando gli stessi nomi delle classi controller e di visualizzazione in qualsiasi progetto MVC ASP.NET da cui eseguire la migrazione.

Il progetto ASP.NET Core WebApp1 include già un controller di esempio minimo e una visualizzazione con lo stesso nome del progetto MVC ASP.NET. Tali valori fungeranno quindi da segnaposto per il controller e le visualizzazioni MVC ASP.NET di cui eseguire la migrazione dal progetto MVC WebApp1 ASP.NET.

1. Copiare i metodi dal ASP.NET MVC HomeController per sostituire i nuovi metodi ASP.NET Core HomeController . Non è necessario modificare il tipo restituito dei metodi di azione. Il tipo restituito del metodo di azione controller del modello predefinito MVC ASP.NET è ActionResult; in ASP.NET Core MVC i metodi di azione restituiscono IActionResult invece. ActionResult implementa IActionResult.
2. Nel progetto ASP.NET Core fare clic con il pulsante destro del mouse sulla directory Views/Home , selezionare Aggiungi>elemento esistente.
3. Nella finestra di dialogo Aggiungi elemento esistente passare alla directory del progetto MVC Home ASP.NET.
4. Selezionare i file About.cshtml, Contact.cshtml e Index.cshtmlRazor di visualizzazione, quindi selezionare Aggiungi, sostituendo i file esistenti.

Per altre informazioni, vedere Gestire le richieste con i controller in ASP.NET Core MVC e viste in ASP.NET Core MVC.

Testare ogni metodo

Ogni endpoint controller può essere testato, tuttavia, il layout e gli stili vengono trattati più avanti nel documento.

1. Eseguire l'app ASP.NET Core.
2. Richiamare dal browser le viste renderizzate nell'app ASP.NET Core in esecuzione sostituendo il numero di porta attuale con quello utilizzato nel progetto ASP.NET Core. Ad esempio: https://localhost:44375/home/about.

Eseguire la migrazione del contenuto statico

In ASP.NET MVC 5 o versioni precedenti, il contenuto statico è stato ospitato dalla directory radice del progetto Web ed è stato mescolato con i file lato server. In ASP.NET Core i file statici vengono archiviati nella directory radice Web del progetto. La directory predefinita è {content root}/wwwroot, ma può essere modificata. Per altre informazioni, vedere File statici in ASP.NET Core.

Copiare il contenuto statico dal progetto ASP.NET MVC WebApp1 alla wwwroot directory nel progetto ASP.NET Core WebApp1 :

1. Nel progetto ASP.NET Core fare clic con il pulsante destro del mouse sulla wwwroot directory, scegliere Aggiungi>elemento esistente.
2. Nella finestra di dialogo Aggiungi elemento esistente passare al progetto ASP.NET MVC WebApp1 .
3. Selezionare il favicon.ico file, quindi selezionare Aggiungi, sostituendo il file esistente.

Eseguire la migrazione dei file di layout

Copiare i file di layout del progetto MVC ASP.NET nel progetto ASP.NET Core:

1. Nel progetto ASP.NET Core fare clic con il pulsante destro del mouse sulla Views directory, scegliere Aggiungi>elemento esistente.
2. Nella finestra di dialogo Aggiungi elemento esistente passare alla directory del progetto ASP.NET Views.
3. Selezionare il _ViewStart.cshtml file e quindi Aggiungi.

Copiare i file di layout condivisi del progetto MVC ASP.NET nel progetto ASP.NET Core:

1. Nel progetto ASP.NET Core fare clic con il pulsante destro del mouse sulla Views/Shared directory, scegliere Aggiungi>elemento esistente.
2. Nella finestra di dialogo Aggiungi elemento esistente passare alla directory del progetto ASP.NET Views/Shared.
3. Selezionare il _Layout.cshtml file, quindi selezionare Aggiungi, sostituendo il file esistente.

Nel progetto ASP.NET Core aprire il _Layout.cshtml file. Apportare le modifiche seguenti in modo che corrispondano al codice completato illustrato di seguito:

Aggiornare l'inclusione CSS bootstrap in modo che corrisponda al codice completato seguente:

1. Sostituire @Styles.Render("~/Content/css") con un <link> elemento da caricare bootstrap.css (vedere di seguito).
2. Rimuovere @Scripts.Render("~/bundles/modernizr").

Il markup di sostituzione completato per l'inclusione di Bootstrap CSS:

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

Aggiornare l'inclusione JavaScript jQuery e Bootstrap in modo che corrisponda al codice completato seguente:

1. Sostituire @Scripts.Render("~/bundles/jquery") con un <script> elemento (vedere di seguito).
2. Sostituire @Scripts.Render("~/bundles/bootstrap") con un <script> elemento (vedere di seguito).

Markup sostitutivo completato per l'inclusione JavaScript di jQuery e 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>

Il file aggiornato _Layout.cshtml è illustrato di seguito:

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

Visualizzare il sito nel browser. Dovrebbe visualizzarsi con gli stili previsti in posizione.

Configurare la creazione di bundle e la minimizzazione

ASP.NET Core è compatibile con diverse soluzioni di creazione di bundle e minification open source, ad esempio WebOptimizer e altre librerie simili. ASP.NET Core non offre una soluzione nativa di aggregazione e minimizzazione. Per informazioni sulla configurazione della creazione di bundle e della minimizzazione, vedere Bundling e Minification.

Risolvere gli errori HTTP 500

Esistono molti problemi che possono causare un messaggio di errore HTTP 500 che non contiene informazioni sull'origine del problema. Ad esempio, se il Views/_ViewImports.cshtml file contiene uno spazio dei nomi che non esiste nel progetto, viene generato un errore HTTP 500. Per impostazione predefinita nelle app ASP.NET Core, l'estensione UseDeveloperExceptionPage viene aggiunta a IApplicationBuilder ed eseguita quando l'ambiente è Sviluppo. Questo codice è dettagliato nel codice seguente:

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 converte le eccezioni non gestite in risposte di errore HTTP 500. In genere, i dettagli degli errori non sono inclusi in queste risposte per impedire la divulgazione di informazioni potenzialmente riservate sul server. Per altre informazioni, vedere Pagina eccezioni per sviluppatori.

Passaggi successivi

• <identity.md>

Risorse aggiuntive

• ASP.NET Core Blazor
• Helper tag in ASP.NET Core