Een ASP.NET Framework Web Forms-app upgraden naar ASP.NET Core

Artikel
03/05/2025

In dit artikel wordt beschreven hoe u een ASP.NET Framework Web Forms bijwerkt naar ASP.NET Core met behulp van de Visual Studio .NET Upgrade Assistant en de incrementele update benadering.

Als uw .NET Framework-project ondersteuningsbibliotheken bevat in de vereiste oplossing, moeten ze indien mogelijk worden bijgewerkt naar .NET Standard 2.0. Voor meer informatie, zie Ondersteunende bibliotheken upgraden.

Installeer de .NET Upgrade Assistant Visual Studio-extensie.
Open de oplossing ASP.NET Web Forms in Visual Studio.
Klik in Solution Explorermet de rechtermuisknop op het project om een upgrade uit te voeren en selecteer Upgrade. Selecteer de incrementele projectupgrade naast elkaar, wat de enige upgrade-optie is.
Selecteer voor het upgradedoel Nieuw project.
Geef het project een naam en selecteer de sjabloon ASP.NET Core en selecteer vervolgens Volgende
Selecteer de doelframeworkversie en selecteer vervolgens Volgende. Zie .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie.
Selecteer Gereeden selecteer voltooien.
In de stap Samenvatting wordt <Framework Project> is nu verbonden met <Framework ProjectCore> via Yarp-proxy weergegeven..

Incrementele update

Volg de stappen in Beginnen met de incrementele migratie van ASP.NET naar ASP.NET Core om verder te gaan met het updateproces.

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

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

Eerste installatie.
Basiscontrollers en weergaven.
Statische inhoud.
Afhankelijkheden aan de clientzijde.

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

Voorwaarden

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:

In het menu Bestand, selecteer Nieuw>Project.
Selecteer ASP.NET Web Application (.NET Framework) en selecteer vervolgens Volgende.
Geef het project een naam WebApp1 zodat de naamruimte overeenkomt met het ASP.NET Core-project dat in de volgende stap is gemaakt. Selecteer Maakaan.
Selecteer MVCen selecteer vervolgens Maken.

Het ASP.NET Core-project maken

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

Start een tweede exemplaar van Visual Studio.
Selecteer Nieuw>Projectin het Bestand menu.
Selecteer ASP.NET Core Web Application en selecteer vervolgens Volgende.
In het dialoogvenster Instellen van uw nieuwe project, noem het project WebApp1.
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. Selecteer maken.
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- en 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">

Zie Framework-referentiemateriaalvoor meer informatie.

In ASP.NET Core is de klasse Startup:

Vervangt Global.asax.
Verwerkt alle opstarttaken voor apps.

Zie App opstarten in ASP.NET Corevoor 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 Corevoor meer informatie.
De UseRouting-extensiemethode voegt routering toe. Zie Routering in ASP.NET Corevoor 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.

Het ASP.NET Core WebApp1-project bevat al een minimale voorbeeldcontroller en weergave met dezelfde naam als het ASP.NET MVC-project. Deze dienen dus als tijdelijke aanduidingen voor de ASP.NET MVC-controller en weergaven die moeten worden gemigreerd vanuit het ASP.NET MVC-WebApp1--project.

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.
Klik in het ASP.NET Core-project met de rechtermuisknop op de map Weergaven/Home en selecteer Bestaand item toevoegen>.
Navigeer in het dialoogvenster Bestaand item toevoegen naar de directory van het ASP.NET MVC WebApp1 project Views/Home.
Selecteer de About.cshtml, Contact.cshtmlen Index.cshtmlRazor bestanden weergeven en selecteer vervolgens Toevoegen, waarbij u de bestaande bestanden vervangt.

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.

Voer de ASP.NET Core-app uit.
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 en eerder werd statische inhoud gehost vanuit de hoofdmap van het webproject en werd deze gemixt met bestanden aan de serverzijde. In ASP.NET Core worden statische bestanden opgeslagen in de hoofdmap van het project map. De standaardmap is {content root}/wwwroot, maar kan worden gewijzigd. Zie Statische bestanden in ASP.NET Corevoor meer informatie.

Kopieer de statische inhoud van het project ASP.NET MVC WebApp1 naar de map wwwroot in het ASP.NET Core WebApp1-project:

Klik in het ASP.NET Core-project met de rechtermuisknop op de map wwwroot en selecteer Item toevoegen>Bestaand Item.
Navigeer in het dialoogvenster Bestaand item toevoegen naar het ASP.NET MVC-project WebApp1.
Selecteer het favicon.ico-bestand en selecteer vervolgens Toevoegenen vervang het bestaande bestand.

De indelingsbestanden migreren

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

Klik in het ASP.NET Core-project met de rechtermuisknop op de map Weergaven en selecteer Bestaande item>toevoegen.
Navigeer in het dialoogvenster Bestaand item toevoegen naar de map ASP.NET MVC WebApp1 project Weergaven.
Selecteer het _ViewStart.cshtml bestand en selecteer vervolgens Toevoegen.

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

Klik in het ASP.NET Core-project met de rechtermuisknop op de map Weergaven/Gedeelde en selecteer Bestaand item>toevoegen.
Navigeer in het dialoogvenster Bestaand item toevoegen naar de map ASP.NET MVC WebApp1 project Views/Shared.
Selecteer het _Layout.cshtml bestand en selecteer vervolgens Toevoegenen vervang het bestaande bestand.

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:

Vervang @Styles.Render("~/Content/css") door een <link> element om bootstrap.css te laden (zie hieronder).
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:

Vervang @Scripts.Render("~/bundles/jquery") door een <script> element (zie hieronder).
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 compatibel met verschillende opensource-bundelings- en minificatieoplossingen zoals WebOptimizer- en andere vergelijkbare bibliotheken. 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. In ASP.NET Core-apps wordt de UseDeveloperExceptionPage-extensie standaard toegevoegd aan de IApplicationBuilder en uitgevoerd wanneer de omgeving Developmentis. 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.

Volgende stappen

Verificatie en Identity migreren naar ASP.NET Core-

Aanvullende informatiebronnen

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

Eerste installatie
Basiscontrollers en weergaves
Statische inhoud
Afhankelijkheden aan de clientzijde.

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

Notitie

De versienummers in de voorbeelden zijn mogelijk niet actueel en werken de projecten dienovereenkomstig bij.

Het startersproject ASP.NET MVC maken

Om de upgrade te demonstreren, beginnen we met het maken van een ASP.NET MVC-app. Maak deze met de naam WebApp1 zodat de naamruimte overeenkomt met het ASP.NET Core-project dat in de volgende stap is gemaakt.

Visual Studio Nieuw Project-dialoogvenster

dialoogvenster Nieuwe webtoepassing: MVC-projectsjabloon geselecteerd in het sjablonendeelvenster van ASP.NET

Optioneel: wijzig de naam van de oplossing van WebApp1- in Mvc5-. Visual Studio geeft de naam van de nieuwe oplossing (Mvc5-) weer, waardoor u dit project gemakkelijker kunt zien vanaf het volgende project.

Het ASP.NET Core-project maken

Maak een nieuwe lege ASP.NET Core-web-app met dezelfde naam als het vorige project (WebApp1) zodat de naamruimten in de twee projecten overeenkomen. 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.

Dialoogvenster Nieuw Project

dialoogvenster Nieuwe ASP.NET-webtoepassing: Lege projectsjabloon geselecteerd in ASP.NET Core-sjablonen paneel

Optioneel: Een nieuwe ASP.NET Core-app maken met behulp van de projectsjabloon Web Application. Noem het project WebApp1en selecteer een authenticatieoptie van afzonderlijke gebruikersaccounts. Wijzig de naam van deze app in 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

Bij het richten op .NET Core wordt standaard verwezen naar het Microsoft.AspNetCore.App metapakket. 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. Zie Statische bestandenvoor meer informatie.

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. Zie application startup en Routingvoor meer informatie.

Een controller en view toevoegen

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

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

Dialoogvenster Nieuw item toevoegen met MVC-controllerklasse geselecteerd

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

Dialoogvenster Nieuw item toevoegen met MVC-weergavepagina geselecteerd

De projectstructuur wordt hieronder weergegeven:

Solution Explorer met bestanden en mappen van WebApp1-

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

<h1>Hello world!</h1>

Voer de app uit.

Webapp geopend in Microsoft Edge

Zie controllers en weergavenvoor meer informatie.

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
Weergaven
Modellen
Bundeling
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-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. Het gegenereerde indelingsbestand voor de About en Contact weergaven zal 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. Bijvoorbeeld: https://localhost:44375/home/about.

contactpagina

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

Statische inhoud

In ASP.NET MVC 5 en 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 map wwwroot. Kopieer de statische inhoud van de ASP.NET MVC-app naar de map wwwroot in het ASP.NET Core-project. In deze voorbeeldconversie:

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

Het ASP.NET MVC-project maakt gebruik van Bootstrap- voor de stijl en slaat de Bootstrap-bestanden op in de mappen Content en Scripts. De sjabloon, die het ASP.NET MVC-project heeft gegenereerd, verwijst naar Bootstrap in het indelingsbestand (Views/Shared/_Layout.cshtml). De bootstrap.js- en bootstrap.css-bestanden kunnen worden gekopieerd van het ASP.NET MVC-project naar de map wwwroot 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 Views van het ASP.NET MVC-project naar de map Views van het ASP.NET Core-project. Het bestand _ViewStart.cshtml is niet gewijzigd in ASP.NET Core MVC.
Maak een map Views/Shared.
Optioneel: Kopieer _ViewImports.cshtml van de map Views van het FullAspNetCore MVC-project naar de map Views van het ASP.NET Core-project. Verwijder een naamruimtedeclaratie in het _ViewImports.cshtml-bestand. Het _ViewImports.cshtml-bestand biedt namespaces voor alle weergavebestanden en bevat 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 Views/Shared van het ASP.NET MVC-project in de map Views/Shared van het ASP.NET Core-project.

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 vervangingsmarkering voor Bootstrap CSS-insluiting.

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

Optioneel: Gebruik het nieuwe indelingsbestand. Kopieer het indelingsbestand uit het FullAspNetCore project. Het nieuwe indelingsbestand maakt gebruik van Tag Helpers en heeft andere verbeteringen.

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. Standaard wordt in ASP.NET Core-apps de UseDeveloperExceptionPage-extensie toegevoegd aan de IApplicationBuilder en uitgevoerd wanneer de configuratie Developmentis. 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?}");
        });
    }
}

Aanvullende informatiebronnen

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 dingen benadrukt die zijn gewijzigd van ASP.NET MVC. Migreren vanuit ASP.NET MVC is een proces met meerdere stappen. In dit artikel wordt het volgende behandeld:

Eerste installatie
Basiscontrollers en weergaven
Statische inhoud
Afhankelijkheden aan de clientzijde.

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

Notitie

De versienummers in de voorbeelden zijn mogelijk niet actueel en werken de projecten dienovereenkomstig bij.

Het startersproject ASP.NET MVC maken

Nieuw project in Visual Studio dialoogvenster

dialoogvenster Nieuwe webtoepassing: MVC-projectsjabloon geselecteerd in ASP.NET sjabloonvenster

Het ASP.NET Core-project maken

dialoogvenster Nieuw project

dialoogvenster Nieuwe ASP.NET-webtoepassing: Lege projectsjabloon geselecteerd in ASP.NET deelvenster Basissjablonen

Optioneel: Een nieuwe ASP.NET Core-app maken met behulp van de projectsjabloon Web Application. Noem het project WebApp1en selecteer een verificatieoptie voor afzonderlijke gebruikersaccounts. Wijzig de naam van deze app in 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

Wanneer er wordt gericht op .NET Core, wordt standaard verwezen naar de Microsoft.AspNetCore.App metapackage. 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.

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. Zie application startup en Routingvoor meer informatie.

Een controller en view toevoegen

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

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

Dialoogvenster Nieuw item toevoegen met MVC-controllerklasse geselecteerd (vóór de release van ASP.NET Core 2.1)

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

Dialoogvenster Nieuw Item toevoegen met geselecteerde MVC-weergavepagina (vóór de release van ASP.NET Core 2.1)

De projectstructuur wordt hieronder weergegeven:

Solution Explorer met bestanden en mappen van WebApp1-

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

<h1>Hello world!</h1>

Voer de app uit.

Webapp geopend in Microsoft Edge

Zie controllers en weergavenvoor meer informatie.

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
Weergaven
Modellen
Bundeling
Filters
Meld u aan/uit, Identity (dit wordt gedaan in de volgende handleiding.)

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 bestanden van het ASP.NET MVC-project weergeven 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. Het lay-outbestand met gegenereerde links voor de About en Contact weergaven zal 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. Bijvoorbeeld: https://localhost:44375/home/about.

contactpagina

Let op het gebrek aan stijl- en menu-items. De styling wordt aangepast in de volgende paragraaf.

Statische inhoud

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

Het indelingsbestand migreren

Kopieer het _ViewStart.cshtml bestand uit de map Views van het ASP.NET MVC-project naar de map Views van het ASP.NET Core-project. Het bestand _ViewStart.cshtml is niet gewijzigd in ASP.NET Core MVC.
Maak een map Views/Shared.
Optioneel: Kopieer _ViewImports.cshtml van de map Weergaven van het FullAspNetCore MVC-project naar de map Weergaven van het ASP.NET Core-project. Verwijder een naamruimtedeclaratie in het _ViewImports.cshtml-bestand. Het _ViewImports.cshtml-bestand biedt naamruimten voor alle weergavebestanden en bevat de Tag Helpers. Tag Helpers worden gebruikt in het nieuwe lay-outbestand. Het bestand _ViewImports.cshtml is nieuw voor ASP.NET Core.
Kopieer het _Layout.cshtml bestand uit de map Views/Shared van het ASP.NET MVC-project in de map Views/Shared van het ASP.NET Core-project.

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 vervangingsmarkering voor Bootstrap CSS-opname:

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

De vervangingscode voor het opnemen 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. Nu zou het correct moeten laden, met de verwachte stijlen op hun plaats.

Optioneel: Gebruik het nieuwe indelingsbestand. Kopieer het indelingsbestand uit het FullAspNetCore project. Het nieuwe indelingsbestand maakt gebruik van Tag Helpers en heeft andere verbeteringen.

Bundeling en minificatie configureren

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

HTTP 500-fouten oplossen

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

Delen via

Een ASP.NET Framework Web Forms-app upgraden naar ASP.NET Core

Incrementele update

Voorwaarden

Het startersproject ASP.NET MVC maken

Het ASP.NET Core-project maken

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

Controllers en weergaven migreren

Elke methode testen

Statische inhoud migreren

De indelingsbestanden migreren

Bundeling en minificatie configureren

HTTP 500-fouten oplossen

Volgende stappen

Aanvullende informatiebronnen

Het startersproject ASP.NET MVC maken

Het ASP.NET Core-project maken

De site configureren voor het gebruik van MVC

Een controller en view toevoegen

Controllers en weergaven

Elke methode testen

Statische inhoud

Het indelingsbestand migreren

Bundeling en minificatie configureren

HTTP 500-fouten oplossen

Aanvullende informatiebronnen

Het startersproject ASP.NET MVC maken

Het ASP.NET Core-project maken

De site configureren voor het gebruik van MVC

Een controller en view toevoegen

Controllers en weergaven

Elke methode testen

Statische inhoud

Het indelingsbestand migreren

Bundeling en minificatie configureren

HTTP 500-fouten oplossen

Aanvullende informatiebronnen

Aanvullende resources