Upgraden van ASP.NET MVC en web-API naar ASP.NET Core MVC

In dit artikel wordt beschreven hoe u een ASP.NET MVC-project migreert naar ASP.NET Core MVC-. Tijdens het proces worden gerelateerde wijzigingen van ASP.NET MVC uitgelicht.

Migreren vanuit ASP.NET MVC is een proces met meerdere stappen. In dit artikel wordt het volgende behandeld:

• Initial setup.
• Basiscontrollers en weergaves.
• Static content.
• Client-side dependencies.

Zie voor het migreren van configuratie- en Identity-code Configuratie migreren naar ASP.NET Core en Verificatie en Identity migreren naar ASP.NET Core.

Prerequisites

• Visual Studio 2019 16.4 of hoger met de ASP.NET- en webontwikkelingsworkload
• .NET Core 3.1 SDK

Het startersproject ASP.NET MVC maken

Maak een voorbeeld ASP.NET MVC-project in Visual Studio om te migreren:

1. From the File menu, select New>Project.
2. Selecteer ASP.NET Web Application (.NET Framework) en selecteer vervolgens Volgende.
3. Name the project WebApp1 so the namespace matches the ASP.NET Core project created in the next step. Select Create.
4. Select MVC, and then select Create.

Het ASP.NET Core-project maken

Maak een nieuwe oplossing met een nieuw ASP.NET Core-project om te migreren naar:

1. Start een tweede exemplaar van Visual Studio.
2. From the File menu, select New>Project.
3. Selecteer ASP.NET Core Web Application en selecteer vervolgens Volgende.
4. In het dialoogvenster Instellen van uw nieuwe project, noem het project WebApp1.
5. Stel de locatie in op een andere map dan het vorige project om dezelfde projectnaam te gebruiken. Door dezelfde naamruimte te gebruiken, is het eenvoudiger om code tussen de twee projecten te kopiëren. Select Create.
6. Controleer in het dialoogvenster Een nieuwe ASP.NET Core-webtoepassing maken of .NET Core- en ASP.NET Core 3.1 zijn geselecteerd. Selecteer de -webapplicatie-projectsjabloon (modelView-Controller) en klik op maken.

De ASP.NET Core-site configureren voor het gebruik van MVC

In ASP.NET Core 3.0- of latere projecten is .NET Framework geen ondersteund doelframework meer. Uw project moet zich richten op .NET Core. Het gedeelde ASP.NET Core-framework, dat MVC omvat, maakt deel uit van de .NET Core Runtime-installatie. Er wordt automatisch naar het gedeelde framework verwezen wanneer de Microsoft.NET.Sdk.Web SDK in het projectbestand wordt gebruikt:

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

For more information, see Framework reference.

In ASP.NET Core is de klasse Startup:

• Global.asaxVervangt .
• Verwerkt alle opstarttaken voor apps.

Zie App opstarten in ASP.NET Core voor meer informatie.

Open het Startup.cs-bestand in het ASP.NET Core-project:

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-apps moeten zich aanmelden voor frameworkfuncties met middleware. Met de vorige door de sjabloon gegenereerde code worden de volgende services en middleware toegevoegd:

• De AddControllersWithViews extensiemethode registreert MVC-serviceondersteuning voor controllers, API-gerelateerde functies en weergaven. Zie MVC-serviceregistratie voor meer informatie over opties voor MVC-serviceregistratie
• Met de UseStaticFiles-extensiemethode wordt de statische bestandshandler Microsoft.AspNetCore.StaticFilestoegevoegd. De UseStaticFiles-extensiemethode moet vóór UseRoutingworden aangeroepen. Zie Statische bestanden in ASP.NET Core voor meer informatie.
• De UseRouting-extensiemethode voegt routering toe. Zie Routering in ASP.NET Core voor meer informatie.

Deze bestaande configuratie bevat wat er nodig is om het voorbeeld ASP.NET MVC-project te migreren. Zie App opstarten in ASP.NET Corevoor meer informatie over ASP.NET Core middlewareopties.

Controllers en weergaven migreren

In het ASP.NET Core-project worden een nieuwe lege controllerklasse en viewklasse toegevoegd om als placeholders te fungeren met dezelfde namen als de controller- en viewklassen in elk ASP.NET MVC-project waarvandaan gemigreerd wordt.

The ASP.NET Core WebApp1 project already includes a minimal example controller and view by the same name as the ASP.NET MVC project. So those will serve as placeholders for the ASP.NET MVC controller and views to be migrated from the ASP.NET MVC WebApp1 project.

1. Kopieer de methoden uit de ASP.NET MVC-HomeController om de nieuwe ASP.NET Core HomeController-methoden te vervangen. U hoeft het retourtype van de actiemethoden niet te wijzigen. Het retourtype controlleractiemethode van de ASP.NET MVC-ingebouwde sjabloon is ActionResult; in ASP.NET Core MVC retourneren de actiemethoden in plaats daarvan IActionResult. ActionResult implementeert IActionResult.
2. In the ASP.NET Core project, right-click the Views/Home directory, select Add>Existing Item.
3. Navigeer in het dialoogvenster Bestaand item toevoegen naar de directory van het ASP.NET MVC WebApp1 project Views/Home.
4. Select the About.cshtml, Contact.cshtml, and Index.cshtmlRazor view files, then select Add, replacing the existing files.

Zie Aanvragen verwerken met controllers in ASP.NET Core MVC- en weergaven in ASP.NET Core MVC-voor meer informatie.

Elke methode testen

Elk controllereindpunt kan worden getest, maar de indeling en stijlen worden later in het document behandeld.

1. Voer de ASP.NET Core-app uit.
2. Roep de weergegeven weergaven vanuit de browser aan op de actieve ASP.NET Core-app door het huidige poortnummer te vervangen door het poortnummer dat wordt gebruikt in het ASP.NET Core-project. Bijvoorbeeld: https://localhost:44375/home/about.

Statische inhoud migreren

In ASP.NET MVC 5 of eerder werd statische inhoud gehost vanuit de hoofdmap van het webproject en werd deze gemixt met bestanden aan de serverzijde. In ASP.NET Core, static files are stored within the project's web root directory. De standaardmap is {content root}/wwwroot, maar kan worden gewijzigd. Zie Statische bestanden in ASP.NET Core voor meer informatie.

Copy the static content from the ASP.NET MVC WebApp1 project to the wwwroot directory in the ASP.NET Core WebApp1 project:

1. In the ASP.NET Core project, right-click the wwwroot directory, select Add>Existing Item.
2. Navigeer in het dialoogvenster Bestaand item toevoegen naar het ASP.NET MVC-project WebApp1.
3. Select the favicon.ico file, then select Add, replacing the existing file.

De indelingsbestanden migreren

Kopieer de ASP.NET MVC-projectindelingsbestanden naar het ASP.NET Core-project:

1. In the ASP.NET Core project, right-click the Views directory, select Add>Existing Item.
2. Navigeer in het dialoogvenster Bestaand item toevoegen naar de map van het ASP.NET MVC WebApp1-projectViews.
3. Select the _ViewStart.cshtml file then select Add.

Kopieer de gedeelde indelingsbestanden van het MVC-project ASP.NET naar het ASP.NET Core-project:

1. In the ASP.NET Core project, right-click the Views/Shared directory, select Add>Existing Item.
2. Navigeer in het dialoogvenster Bestaand item toevoegen naar de map van het ASP.NET MVC WebApp1-projectViews/Shared.
3. Select the _Layout.cshtml file, then select Add, replacing the existing file.

Open het _Layout.cshtml-bestand in het ASP.NET Core-project. Breng de volgende wijzigingen aan zodat deze overeenkomen met de voltooide code die hieronder wordt weergegeven:

Werk de Bootstrap CSS-opname bij zodat deze overeenkomt met de voltooide code hieronder:

1. Vervang @Styles.Render("~/Content/css") door een <link> element om bootstrap.css te laden (zie hieronder).
2. Verwijder @Scripts.Render("~/bundles/modernizr").

De voltooide vervangende markering voor de integratie van Bootstrap CSS:

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

Werk de opname van jQuery en Bootstrap JavaScript bij zodat deze overeenkomt met de voltooide code hieronder:

1. Vervang @Scripts.Render("~/bundles/jquery") door een <script> element (zie hieronder).
2. Vervang @Scripts.Render("~/bundles/bootstrap") door een <script> element (zie hieronder).

De voltooide vervangingscode voor de inclusie van jQuery en 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>

Hieronder ziet u het bijgewerkte bestand _Layout.cshtml:

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

Bekijk de site in de browser. Deze moet worden weergegeven met de verwachte stijlen.

Bundeling en minificatie configureren

ASP.NET Core is compatible with several open-source bundling and minification solutions such as WebOptimizer and other similar libraries. ASP.NET Core biedt geen systeemeigen bundelings- en minificatieoplossing. Zie bundelings- en minificatie-voor meer informatie over het configureren van bundeling en minificatie.

HTTP 500-fouten oplossen

Er zijn veel problemen die een HTTP 500-foutbericht kunnen veroorzaken dat geen informatie bevat over de bron van het probleem. Als het bestand Views/_ViewImports.cshtml bijvoorbeeld een naamruimte bevat die niet in het project bestaat, wordt er een HTTP 500-fout gegenereerd. By default in ASP.NET Core apps, the UseDeveloperExceptionPage extension is added to the IApplicationBuilder and executed when the environment is Development. Dit wordt beschreven in de volgende code:

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 converteert niet-verwerkte uitzonderingen naar HTTP 500-foutreacties. Normaal gesproken worden foutdetails niet opgenomen in deze antwoorden om openbaarmaking van mogelijk gevoelige informatie over de server te voorkomen. Zie Uitzonderingspagina voor ontwikkelaars voor meer informatie.

Next steps

• <identity.md>

Additional resources

• ASP.NET Core Blazor
• Tag Helpers in ASP.NET Core (Taghelpers in ASP.NET Core zijn hulpmiddelen die ontwikkeld zijn om het werken met HTML-tags eenvoudiger te maken binnen de .NET-omgeving)

In dit artikel wordt beschreven hoe u een ASP.NET MVC-project migreert naar ASP.NET Core MVC 2.2. Tijdens het proces worden veel van de aspecten belicht die zijn gewijzigd ten opzichte van ASP.NET MVC. Migreren vanuit ASP.NET MVC is een proces met meerdere stappen. In dit artikel wordt het volgende behandeld:

• Initial setup
• Basiscontrollers en weergaves
• Static content
• Client-side dependencies.

Zie Identityconfiguration.md< en >identity.md< voor informatie over het migreren van configuratie en > code.

Het startersproject ASP.NET MVC maken

Om de upgrade te demonstreren, beginnen we met het maken van een ASP.NET MVC-app. Create it with the name WebApp1 so the namespace matches the ASP.NET Core project created in the next step.

Optional: Change the name of the Solution from WebApp1 to Mvc5. Visual Studio displays the new solution name (Mvc5), which makes it easier to tell this project from the next project.

Het ASP.NET Core-project maken

Create a new empty ASP.NET Core web app with the same name as the previous project (WebApp1) so the namespaces in the two projects match. Als u dezelfde naamruimte hebt, is het eenvoudiger om code tussen de twee projecten te kopiëren. Maak dit project in een andere map dan het vorige project om dezelfde naam te gebruiken.

• Optional: Create a new ASP.NET Core app using the Web Application project template. Name the project WebApp1, and select an authentication option of Individual User Accounts. Rename this app to FullAspNetCore. Het maken van dit project bespaart tijd in de conversie. Het eindresultaat kan worden weergegeven in de door de sjabloon gegenereerde code, code kan worden gekopieerd naar het conversieproject of vergeleken met het door de sjabloon gegenereerde project.

De site configureren voor het gebruik van MVC

• When targeting .NET Core, the Microsoft.AspNetCore.App metapackage is referenced by default. Dit pakket bevat pakketten die vaak worden gebruikt door MVC-apps. Als u zich richt op .NET Framework, moeten pakketverwijzingen afzonderlijk worden vermeld in het projectbestand.

Microsoft.AspNetCore.Mvc is het ASP.NET Core MVC-framework. Microsoft.AspNetCore.StaticFiles is de statische bestandshandler. ASP.NET Core-apps kiezen expliciet voor middleware, zoals voor het leveren van statische bestanden. For more information, see Static files.

• Open het bestand Startup.cs en wijzig de code zodat deze overeenkomt met het volgende:

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

Met de UseStaticFiles-extensiemethode wordt de statische bestandshandler toegevoegd. For more information, see Application Startup and Routing.

Een controller en view toevoegen

In deze sectie worden een minimale controller en view toegevoegd om als tijdelijke aanduidingen te fungeren voor de ASP.NET MVC-controller en views die in de volgende sectie zijn gemigreerd.

• Voeg een Controllers map toe.

• Voeg een controllerklasse toe met de naam HomeController.cs aan de Controllers map.

• Voeg een Views map toe.

• Voeg een Views/Home map toe.

• Voeg een Razor weergave toe met de naam Index.cshtml aan de Views/Home map.

De projectstructuur wordt hieronder weergegeven:

Vervang de inhoud van het Views/Home/Index.cshtml bestand door de volgende markeringen:

<h1>Hello world!</h1>

Voer de app uit.

For more information, see Controllers and Views.

Voor de volgende functionaliteit is migratie van het voorbeeld ASP.NET MVC-project naar het ASP.NET Core-project vereist:

• inhoud aan clientzijde (CSS, lettertypen en scripts)

• controllers

• views

• models

• bundling

• filters

• In-/uitloggen, Identity (dit wordt gedaan in de volgende tutorial.)

Controllers en weergaven

• Kopieer elk van de methoden van de ASP.NET MVC-HomeController naar de nieuwe HomeController. In ASP.NET MVC is het retourtype controlleractiemethode van de ingebouwde sjabloon ActionResult; in ASP.NET Core MVC retourneren de actiemethoden in plaats daarvan IActionResult. ActionResult implementeert IActionResult, dus u hoeft het retourtype van de actiemethoden niet te wijzigen.

• Kopieer de About.cshtml, Contact.cshtmlen Index.cshtmlRazor view-bestanden van het ASP.NET MVC-project naar het ASP.NET Core-project.

Elke methode testen

Het indelingsbestand en de stijlen zijn nog niet gemigreerd, dus de weergegeven weergaven bevatten alleen de inhoud in de weergavebestanden. De door het indelingsbestand gegenereerde links voor de About- en Contact-weergaven zullen nog niet beschikbaar zijn.

Roep de weergegeven weergaven vanuit de browser aan in de actieve ASP.NET kern-app door het huidige poortnummer te vervangen door het poortnummer dat wordt gebruikt in het ASP.NET kernproject. Voorbeeld: https://localhost:44375/home/about.

Let op het gebrek aan stijl- en menu-items. De stijl zal in de volgende sectie worden aangepast.

Static content

In ASP.NET MVC 5 of eerder werd statische inhoud gehost vanuit de hoofdmap van het webproject en werd deze gemixt met bestanden aan de serverzijde. In ASP.NET Core wordt statische inhoud gehost in de wwwroot map. Kopieer de statische inhoud van de ASP.NET MVC-app naar de wwwroot map in het ASP.NET Core-project. In deze voorbeeldconversie:

• Kopieer het favicon.ico bestand van het ASP.NET MVC-project naar de wwwroot map in het ASP.NET Core-project.

The ASP.NET MVC project uses Bootstrap for its styling and stores the Bootstrap files in the Content and Scripts directories. De sjabloon, die het ASP.NET MVC-project heeft gegenereerd, verwijst naar Bootstrap in het indelingsbestand (Views/Shared/_Layout.cshtml). De bootstrap.js bestanden en bootstrap.css bestanden kunnen worden gekopieerd van het ASP.NET MVC-project naar de wwwroot map in het nieuwe project. In plaats daarvan voegt dit document ondersteuning toe voor Bootstrap (en andere bibliotheken aan de clientzijde) met behulp van CDN's in de volgende sectie.

Het indelingsbestand migreren

• Kopieer het _ViewStart.cshtml bestand uit de map van het ASP.NET MVC-project Views naar de map van het ASP.NET Core-project Views . Het bestand _ViewStart.cshtml is niet gewijzigd in ASP.NET Core MVC.

• Maak een Views/Shared map.

• Optional: Copy _ViewImports.cshtml from the FullAspNetCore MVC project's Views directory into the ASP.NET Core project's Views directory. Verwijder een naamruimtedeclaratie in het _ViewImports.cshtml-bestand. The _ViewImports.cshtml file provides namespaces for all the view files and brings in Tag Helpers. Tag Helpers worden gebruikt in het nieuwe lay-out bestand. Het bestand _ViewImports.cshtml is nieuw voor ASP.NET Core.

• Kopieer het _Layout.cshtml bestand uit de map van het ASP.NET MVC-project Views/Shared naar de map van het ASP.NET Core-project Views/Shared .

Open _Layout.cshtml bestand en breng de volgende wijzigingen aan (de voltooide code wordt hieronder weergegeven):

• Vervang @Styles.Render("~/Content/css") door een <link> element om bootstrap.css te laden (zie hieronder).

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

• Markeer de @Html.Partial("_LoginPartial") lijn als commentaar (plaats de lijn tussen @*...*@). Zie Verificatie migreren en Identity migreren naar ASP.NET Core voor meer informatie

• Vervang @Scripts.Render("~/bundles/jquery") door een <script> element (zie hieronder).

• Vervang @Scripts.Render("~/bundles/bootstrap") door een <script> element (zie hieronder).

De vervangende markup voor de inclusie van Bootstrap CSS:

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

De vervangende markup voor de integratie van jQuery en 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>

Hieronder ziet u het bijgewerkte bestand _Layout.cshtml:

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

Bekijk de site in de browser. Het zou nu correct moeten laden, met de verwachte stijlen op hun plaats.

• Optional: Try using the new layout file. Copy the layout file from the FullAspNetCore project. The new layout file uses Tag Helpers and has other improvements.

Bundeling en minificatie configureren

Zie Bundling and Minificationvoor meer informatie over het configureren van bundeling en minificatie.

HTTP 500-fouten oplossen

Er zijn veel problemen die een HTTP 500-foutbericht kunnen veroorzaken die geen informatie bevatten over de bron van het probleem. Als het bestand Views/_ViewImports.cshtml bijvoorbeeld een naamruimte bevat die niet in het project bestaat, wordt er een HTTP 500-fout gegenereerd. By default in ASP.NET Core apps, the UseDeveloperExceptionPage extension is added to the IApplicationBuilder and executed when the configuration is Development. Bekijk een voorbeeld in de volgende code:

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 converteert niet-verwerkte uitzonderingen naar HTTP 500-foutreacties. Normaal gesproken worden foutdetails niet opgenomen in deze antwoorden om openbaarmaking van mogelijk gevoelige informatie over de server te voorkomen. Zie Uitzonderingspagina voor ontwikkelaars voor meer informatie.

Additional resources

• ASP.NET Core Blazor
• Tag Helpers in ASP.NET Core (Taghelpers in ASP.NET Core zijn hulpmiddelen die ontwikkeld zijn om het werken met HTML-tags eenvoudiger te maken binnen de .NET-omgeving)

In dit artikel wordt beschreven hoe u een ASP.NET MVC-project migreert naar ASP.NET Core MVC 2.1. Tijdens het proces worden veel van de aspecten belicht die zijn gewijzigd ten opzichte van ASP.NET MVC. Migreren vanuit ASP.NET MVC is een proces met meerdere stappen. In dit artikel wordt het volgende behandeld:

• Initial setup
• Basiscontrollers en weergaves
• Static content
• Client-side dependencies.

Zie voor het migreren van configuratie- en Identity-code Configuratie migreren naar ASP.NET Core en Verificatie en Identity migreren naar ASP.NET Core.

Het startersproject ASP.NET MVC maken

Om de upgrade te demonstreren, beginnen we met het maken van een ASP.NET MVC-app. Create it with the name WebApp1 so the namespace matches the ASP.NET Core project created in the next step.

Optional: Change the name of the Solution from WebApp1 to Mvc5. Visual Studio displays the new solution name (Mvc5), which makes it easier to tell this project from the next project.

Het ASP.NET Core-project maken

Create a new empty ASP.NET Core web app with the same name as the previous project (WebApp1) so the namespaces in the two projects match. Als u dezelfde naamruimte hebt, is het eenvoudiger om code tussen de twee projecten te kopiëren. Maak dit project in een andere map dan het vorige project om dezelfde naam te gebruiken.

• Optional: Create a new ASP.NET Core app using the Web Application project template. Name the project WebApp1, and select an authentication option of Individual User Accounts. Rename this app to FullAspNetCore. Het maken van dit project bespaart tijd in de conversie. Het eindresultaat kan worden weergegeven in de door de sjabloon gegenereerde code, code kan worden gekopieerd naar het conversieproject of vergeleken met het door de sjabloon gegenereerde project.

De site configureren voor het gebruik van MVC

• When targeting .NET Core, the Microsoft.AspNetCore.App metapackage is referenced by default. Dit pakket bevat pakketten die vaak worden gebruikt door MVC-apps. Als u zich richt op .NET Framework, moeten pakketverwijzingen afzonderlijk worden vermeld in het projectbestand.

Microsoft.AspNetCore.Mvc is het ASP.NET Core MVC-framework. Microsoft.AspNetCore.StaticFiles is de statische bestandshandler. ASP.NET Core-apps kiezen expliciet voor middleware, zoals voor het leveren van statische bestanden. For more information, see Static files.

• Open het bestand Startup.cs en wijzig de code zodat deze overeenkomt met het volgende:

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

Met de UseStaticFiles-extensiemethode wordt de statische bestandshandler toegevoegd. De UseMvc-extensiemethode voegt routering toe. For more information, see Application Startup and Routing.

Een controller en view toevoegen

In deze sectie worden een minimale controller en view toegevoegd om als tijdelijke aanduidingen te fungeren voor de ASP.NET MVC-controller en views die in de volgende sectie zijn gemigreerd.

• Voeg een Controllers map toe.

• Add a Controller Class named HomeController.cs to the Controllers directory.

• Voeg een Views map toe.

• Voeg een Views/Home map toe.

• Voeg een Razor weergave toe met de naam Index.cshtml aan de Views/Home map.

De projectstructuur wordt hieronder weergegeven:

Vervang de inhoud van het Views/Home/Index.cshtml bestand door de volgende markeringen:

<h1>Hello world!</h1>

Voer de app uit.

For more information, see Controllers and Views.

Voor de volgende functionaliteit is migratie van het voorbeeld ASP.NET MVC-project naar het ASP.NET Core-project vereist:

• inhoud aan clientzijde (CSS, lettertypen en scripts)

• controllers

• views

• models

• bundling

• filters

• In-/uitloggen, Identity (dit wordt gedaan in de volgende tutorial.)

Controllers en weergaven

• Kopieer elk van de methoden van de ASP.NET MVC-HomeController naar de nieuwe HomeController. In ASP.NET MVC is het retourtype controlleractiemethode van de ingebouwde sjabloon ActionResult; in ASP.NET Core MVC retourneren de actiemethoden in plaats daarvan IActionResult. ActionResult implementeert IActionResult, dus u hoeft het retourtype van de actiemethoden niet te wijzigen.

• Kopieer de About.cshtml, Contact.cshtmlen Index.cshtmlRazor view-bestanden van het ASP.NET MVC-project naar het ASP.NET Core-project.

Elke methode testen

Het indelingsbestand en de stijlen zijn nog niet gemigreerd, dus de weergegeven weergaven bevatten alleen de inhoud in de weergavebestanden. De door het indelingsbestand gegenereerde links voor de About- en Contact-weergaven zullen nog niet beschikbaar zijn.

• Roep de weergegeven weergaven vanuit de browser aan in de actieve ASP.NET kern-app door het huidige poortnummer te vervangen door het poortnummer dat wordt gebruikt in het ASP.NET kernproject. Voorbeeld: https://localhost:44375/home/about.

Let op het gebrek aan stijl- en menu-items. De stijl zal in de volgende sectie worden aangepast.

Static content

In ASP.NET MVC 5 of eerder werd statische inhoud gehost vanuit de hoofdmap van het webproject en werd deze gemixt met bestanden aan de serverzijde. In ASP.NET Core wordt statische inhoud gehost in de wwwroot map. Kopieer de statische inhoud van de ASP.NET MVC-app naar de wwwroot map in het ASP.NET Core-project. In deze voorbeeldconversie:

• Kopieer het favicon.ico bestand van het ASP.NET MVC-project naar de wwwroot map in het ASP.NET Core-project.

The ASP.NET MVC project uses Bootstrap for its styling and stores the Bootstrap files in the Content and Scripts directories. De sjabloon, die het ASP.NET MVC-project heeft gegenereerd, verwijst naar Bootstrap in het indelingsbestand (Views/Shared/_Layout.cshtml). De bootstrap.js bestanden en bootstrap.css bestanden kunnen worden gekopieerd van het ASP.NET MVC-project naar de wwwroot map in het nieuwe project. In plaats daarvan voegt dit document ondersteuning toe voor Bootstrap (en andere bibliotheken aan de clientzijde) met behulp van CDN's in de volgende sectie.

Het indelingsbestand migreren

• Kopieer het _ViewStart.cshtml bestand uit de map van het ASP.NET MVC-project Views naar de map van het ASP.NET Core-project Views . Het bestand _ViewStart.cshtml is niet gewijzigd in ASP.NET Core MVC.

• Maak een Views/Shared map.

• Optional: Copy _ViewImports.cshtml from the FullAspNetCore MVC project's Views directory into the ASP.NET Core project's Views directory. Verwijder een naamruimtedeclaratie in het _ViewImports.cshtml-bestand. The _ViewImports.cshtml file provides namespaces for all the view files and brings in Tag Helpers. Tag Helpers worden gebruikt in het nieuwe lay-out bestand. Het bestand _ViewImports.cshtml is nieuw voor ASP.NET Core.

• Kopieer het _Layout.cshtml bestand uit de map van het ASP.NET MVC-project Views/Shared naar de map van het ASP.NET Core-project Views/Shared .

Open _Layout.cshtml bestand en breng de volgende wijzigingen aan (de voltooide code wordt hieronder weergegeven):

• Vervang @Styles.Render("~/Content/css") door een <link> element om bootstrap.css te laden (zie hieronder).

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

• Markeer de @Html.Partial("_LoginPartial") lijn als commentaar (plaats de lijn tussen @*...*@). Zie Verificatie migreren en Identity migreren naar ASP.NET Core voor meer informatie

• Vervang @Scripts.Render("~/bundles/jquery") door een <script> element (zie hieronder).

• Vervang @Scripts.Render("~/bundles/bootstrap") door een <script> element (zie hieronder).

De vervangende markup voor de inclusie van Bootstrap CSS:

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

De vervangende markup voor de integratie van jQuery en 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>

Hieronder ziet u het bijgewerkte bestand _Layout.cshtml:

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

Bekijk de site in de browser. Het zou nu correct moeten laden, met de verwachte stijlen op hun plaats.

• Optional: Try using the new layout file. Copy the layout file from the FullAspNetCore project. The new layout file uses Tag Helpers and has other improvements.

Bundeling en minificatie configureren

Zie Bundling and Minificationvoor meer informatie over het configureren van bundeling en minificatie.

HTTP 500-fouten oplossen

Er zijn veel problemen die een HTTP 500-foutbericht kunnen veroorzaken die geen informatie bevatten over de bron van het probleem. Als het bestand Views/_ViewImports.cshtml bijvoorbeeld een naamruimte bevat die niet in het project bestaat, wordt er een HTTP 500-fout gegenereerd. By default in ASP.NET Core apps, the UseDeveloperExceptionPage extension is added to the IApplicationBuilder and executed when the configuration is Development. Bekijk een voorbeeld in de volgende code:

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 converteert niet-verwerkte uitzonderingen naar HTTP 500-foutreacties. Normaal gesproken worden foutdetails niet opgenomen in deze antwoorden om openbaarmaking van mogelijk gevoelige informatie over de server te voorkomen. Zie Uitzonderingspagina voor ontwikkelaars voor meer informatie.

Additional resources

• ASP.NET Core Blazor
• Tag Helpers in ASP.NET Core (Taghelpers in ASP.NET Core zijn hulpmiddelen die ontwikkeld zijn om het werken met HTML-tags eenvoudiger te maken binnen de .NET-omgeving)