Dela via


Uppgradera från ASP.NET MVC och webb-API till ASP.NET Core MVC

Den här artikeln visar hur du börjar migrera ett ASP.NET MVC-projekt till ASP.NET Core MVC-. I processen markeras relaterade ändringar från ASP.NET MVC.

Att migrera från ASP.NET MVC är en process i flera steg. Denna artikel omfattar:

  • Initial setup.
  • Grundläggande styrenheter och vyer.
  • Static content.
  • Client-side dependencies.

Information om hur du migrerar konfiguration och Identity kod finns i Migrera konfiguration till ASP.NET Core och Migrera autentisering och Identity till ASP.NET Core.

Prerequisites

Skapa startprojektet för ASP.NET MVC

Skapa ett exempel ASP.NET MVC-projekt i Visual Studio för migrering:

  1. From the File menu, select New>Project.
  2. Välj ASP.NET Web Application (.NET Framework) och välj sedan Nästa.
  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.

Skapa ASP.NET Core-projektet

Skapa en ny lösning med ett nytt ASP.NET Core-projekt att migrera till:

  1. Starta en andra instans av Visual Studio.
  2. From the File menu, select New>Project.
  3. Välj ASP.NET Core Web Application och välj sedan Nästa.
  4. I dialogrutan Konfigurera ditt nya projekt namnger du projektet WebApp1.
  5. Ange platsen till en annan katalog än det tidigare projektet för att använda samma projektnamn. Med samma namnområde blir det enklare att kopiera kod mellan de två projekten. Select Create.
  6. I dialogrutan Skapa ett nytt ASP.NET Core-webbprogram kontrollerar du att .NET Core och ASP.NET Core 3.1 är markerade. Välj -webbprogrammet (modell-View-Controller) projektmall och välj Skapa.

Konfigurera ASP.NET Core-webbplatsen så att den använder MVC

I ASP.NET Core 3.0-projekt eller senare projekt är .NET Framework inte längre ett målramverk som stöds. Ditt projekt måste rikta in sig på .NET Core. Det delade ASP.NET Core-ramverket, som innehåller MVC, är en del av .NET Core-körningsinstallationen. Det delade ramverket refereras automatiskt när du använder Microsoft.NET.Sdk.Web SDK i projektfilen:

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

For more information, see Framework reference.

I ASP.NET Core-klassen Startup:

  • Global.asaxErsätter .
  • Hanterar alla startuppgifter för appar.

Mer information finns i Appstart i ASP.NET Core.

Öppna Startup.cs-filen i ASP.NET Core-projektet:

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-appar måste välja att använda ramverksfunktioner med mellanprogram. Den tidigare mallgenererade koden lägger till följande tjänster och mellanprogram:

Den här befintliga konfigurationen innehåller vad som behövs för att migrera exemplet ASP.NET MVC-projekt. Mer information om alternativ för ASP.NET Core-mellanprogram finns i appstart i ASP.NET Core.

Migrera kontroller och vyer

I projektet ASP.NET Core läggs en ny tom kontrollantklass och vyklass till för att fungera som platshållare med samma namn som kontrollanten och visa klasser i alla ASP.NET MVC-projekt att migrera från.

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. Kopiera metoderna från ASP.NET MVC-HomeController för att ersätta de nya metoderna ASP.NET Core HomeController. Du behöver inte ändra returtypen för åtgärdsmetoderna. Den ASP.NET inbyggda MVC-mallens returtyp för kontrollantåtgärdsmetoden är ActionResult; i ASP.NET Core MVC returnerar åtgärdsmetoderna i stället IActionResult. ActionResult implementerar IActionResult.
  2. In the ASP.NET Core project, right-click the Views/Home directory, select Add>Existing Item.
  3. I dialogrutan Lägg till befintligt objekt navigerar du till katalogen ASP.NET MVC WebApp1 projektets katalog Views/Home.
  4. Select the About.cshtml, Contact.cshtml, and Index.cshtmlRazor view files, then select Add, replacing the existing files.

Mer information finns i Hantera begäranden med kontrollanter i ASP.NET Core MVC och Views i ASP.NET Core MVC.

Testa varje metod

Varje kontrollantslutpunkt kan testas, men layout och format beskrivs senare i dokumentet.

  1. Kör ASP.NET Core-appen.
  2. Anropa de renderade vyerna från webbläsaren i ASP.NET Core-appen som körs genom att ersätta det aktuella portnumret med det portnummer som används i ASP.NET Core-projektet. Till exempel https://localhost:44375/home/about.

Migrera statiskt innehåll

I ASP.NET MVC 5 eller tidigare fanns statiskt innehåll från webbprojektets rotkatalog och blandades med filer på serversidan. In ASP.NET Core, static files are stored within the project's web root directory. Standardkatalogen är {content root}/wwwroot, men den kan ändras. Mer information finns i Statiska filer i ASP.NET Core.

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. I dialogrutan Lägg till befintligt objekt navigerar du till projektet ASP.NET MVC WebApp1.
  3. Select the favicon.ico file, then select Add, replacing the existing file.

Migrera layoutfilerna

Kopiera ASP.NET MVC-projektlayoutfilerna till ASP.NET Core-projektet:

  1. In the ASP.NET Core project, right-click the Views directory, select Add>Existing Item.
  2. I dialogrutan Lägg till befintligt objekt navigerar du till ASP.NET MVC WebApp1-projektetsViews katalog.
  3. Select the _ViewStart.cshtml file then select Add.

Kopiera ASP.NET delade MVC-projektlayoutfiler till ASP.NET Core-projektet:

  1. In the ASP.NET Core project, right-click the Views/Shared directory, select Add>Existing Item.
  2. I dialogrutan Lägg till befintligt objekt navigerar du till ASP.NET MVC WebApp1-projektetsViews/Shared katalog.
  3. Select the _Layout.cshtml file, then select Add, replacing the existing file.

Öppna filen _Layout.cshtml i ASP.NET Core-projektet. Gör följande ändringar för att matcha den ifyllda koden som visas nedan:

Uppdatera Bootstrap CSS-inkluderingen så att den matchar den färdiga koden nedan:

  1. Ersätt @Styles.Render("~/Content/css") med ett <link> element för att läsa in bootstrap.css (se nedan).
  2. Ta bort @Scripts.Render("~/bundles/modernizr").

Den färdiga ersättningsmarkeringen för Bootstrap CSS-inkludering:

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

Uppdatera jQuery- och Bootstrap JavaScript-inkluderingen så att de matchar den färdiga koden nedan:

  1. Ersätt @Scripts.Render("~/bundles/jquery") med ett <script>-element (se nedan).
  2. Ersätt @Scripts.Render("~/bundles/bootstrap") med ett <script>-element (se nedan).

Den slutförda ersättningsmarkeringen för jQuery och Bootstrap JavaScript-inkludering:

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

Den uppdaterade _Layout.cshtml-filen visas nedan:

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

Visa webbplatsen i webbläsaren. Den bör återges med förväntade formatmallar på plats.

Konfigurera paketering och minifiering

ASP.NET Core is compatible with several open-source bundling and minification solutions such as WebOptimizer and other similar libraries. ASP.NET Core tillhandahåller inte någon intern paketerings- och minifieringslösning. Information om hur du konfigurerar paketering och minifiering finns i Bundling och Minification.

Lösa HTTP 500-fel

Det finns många problem som kan orsaka ett HTTP 500-felmeddelande som inte innehåller någon information om orsaken till problemet. Om den Views/_ViewImports.cshtml filen till exempel innehåller ett namnområde som inte finns i projektet genereras ett HTTP 500-fel. By default in ASP.NET Core apps, the UseDeveloperExceptionPage extension is added to the IApplicationBuilder and executed when the environment is Development. Detta beskrivs i följande kod:

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 konverterar ohanterade undantag till HTTP 500-felsvar. Normalt ingår inte felinformation i dessa svar för att förhindra att potentiellt känslig information om servern avslöjas. Mer information finns i undantagssida för utvecklare.

Next steps

  • <identity.md>

Additional resources

Den här artikeln visar hur du börjar migrera ett ASP.NET MVC-projekt till ASP.NET Core MVC 2.2. I processen framhävs många av de saker som har ändrats från ASP.NET MVC. Att migrera från ASP.NET MVC är en process i flera steg. Denna artikel omfattar:

  • Initial setup
  • Grundläggande kontroller och vyer
  • Static content
  • Client-side dependencies.

Information om hur du migrerar konfiguration och Identity kod <finns i configuration.md> och <identity.md>.

Note

Versionsnumren i exemplen kanske inte är aktuella och uppdaterar projekten i enlighet med detta.

Skapa startprojektet för ASP.NET MVC

För att demonstrera uppgraderingen börjar vi med att skapa en ASP.NET MVC-app. Create it with the name WebApp1 so the namespace matches the ASP.NET Core project created in the next step.

Visual Studio-dialogrutan Nytt projekt

Nytt Webbprogram-dialogrutan: MVC-projektmall vald i ASP.NET-mallpanelen

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.

Skapa ASP.NET Core-projektet

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. Om du har samma namnområde blir det enklare att kopiera kod mellan de två projekten. Skapa det här projektet i en annan katalog än föregående projekt om du vill använda samma namn.

dialogrutan Nytt projekt

dialogrutan för Nytt ASP.NET-webbprogram: Tom projektmall markerad i panelen ASP.NET Core-mallar

  • 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. När du skapar det här projektet sparas tid i konverteringen. Slutresultatet kan visas i den mallgenererade koden, koden kan kopieras till konverteringsprojektet eller jämföras med det mallgenererade projektet.

Konfigurera platsen så att den använder MVC

  • When targeting .NET Core, the Microsoft.AspNetCore.App metapackage is referenced by default. Det här paketet innehåller paket som ofta används av MVC-appar. Om du riktar in dig på .NET Framework måste paketreferenser anges individuellt i projektfilen.

Microsoft.AspNetCore.Mvc är ASP.NET Core MVC-ramverket. Microsoft.AspNetCore.StaticFiles är den statiska filhanteraren. ASP.NET Core-appar väljer uttryckligen mellanprogram, till exempel för att hantera statiska filer. For more information, see Static files.

  • Öppna filen Startup.cs och ändra koden så att den matchar följande:
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?}");
        });
    }
}

Metoden UseStaticFiles-utökning lägger till den statiska filhanteraren. For more information, see Application Startup and Routing.

Lägg till en kontroller och en vy

I det här avsnittet läggs en minimal kontrollant och vy till för att fungera som platshållare för ASP.NET MVC-styrenhet och vyer som migreras i nästa avsnitt.

  • Lägg till en Controllers katalog.

  • Lägg till en kontrollantklass med namnet HomeController.cs i Controllers katalogen.

dialogrutan Lägg till nytt objekt med MVC-styrenhetsklass markerad

  • Lägg till en Views katalog.

  • Lägg till en Views/Home katalog.

  • Lägg till en Razor vy med namnet Index.cshtml i Views/Home katalogen.

dialogrutan Lägg till nytt objekt, med vald MVC-vysida

Projektstrukturen visas nedan:

Solution Explorer som visar filer och kataloger för WebApp1

Ersätt innehållet i Views/Home/Index.cshtml-filen med följande markering:

<h1>Hello world!</h1>

Kör appen.

webbapp öppen i Microsoft Edge

For more information, see Controllers and Views.

Följande funktioner kräver migrering från exemplet ASP.NET MVC-projekt till ASP.NET Core-projektet:

  • innehåll på klientsidan (CSS, teckensnitt och skript)

  • controllers

  • views

  • models

  • bundling

  • filters

  • Logga in/ut, Identity (detta görs i nästa handledning.)

Kontrollanter och vyer

  • Kopiera var och en av metoderna från ASP.NET MVC-HomeController till den nya HomeController. I ASP.NET MVC är den inbyggda mallens returtyp för kontrollantåtgärd ActionResult; i ASP.NET Core MVC returnerar åtgärdsmetoderna i stället IActionResult. ActionResult implementerar IActionResult, så du behöver inte ändra returtypen för åtgärdsmetoderna.

  • Kopiera About.cshtml, Contact.cshtmloch Index.cshtmlRazor visa filer från ASP.NET MVC-projektet till projektet ASP.NET Core.

Testa varje metod

Layoutfilen och formatmallarna har inte migrerats ännu, så de renderade vyerna innehåller bara innehållet i vyfilerna. Layoutfilens genererade länkar för About- och Contact-vyerna kommer inte att vara tillgängliga ännu.

Anropa de renderade vyerna från webbläsaren på den ASP.NET kärnapp som körs genom att ersätta det aktuella portnumret med det portnummer som används i ASP.NET kärnprojektet. Till exempel: https://localhost:44375/home/about.

Contact page

Observera bristen på styling och menyalternativ. Stylingen kommer att åtgärdas i nästa avsnitt.

Static content

I ASP.NET MVC 5 eller tidigare fanns statiskt innehåll från roten i webbprojektet och blandades med filer på serversidan. I ASP.NET Core finns statiskt innehåll i wwwroot katalogen. Kopiera det statiska innehållet från ASP.NET MVC-appen till wwwroot katalogen i ASP.NET Core-projektet. I den här exempelkonverteringen:

  • favicon.ico Kopiera filen från ASP.NET MVC-projektet till wwwroot katalogen i ASP.NET Core-projektet.

The ASP.NET MVC project uses Bootstrap for its styling and stores the Bootstrap files in the Content and Scripts directories. Mallen, som genererade ASP.NET MVC-projektet, refererar till Bootstrap i layoutfilen (Views/Shared/_Layout.cshtml). Filerna bootstrap.js och bootstrap.css kan kopieras från ASP.NET MVC-projektet till wwwroot katalogen i det nya projektet. I stället lägger det här dokumentet till stöd för Bootstrap (och andra bibliotek på klientsidan) med hjälp av CDN i nästa avsnitt.

Migrera layoutfilen

  • _ViewStart.cshtml Kopiera filen från ASP.NET MVC-projektets Views katalog till ASP.NET Core-projektets Views katalog. Filen _ViewStart.cshtml har inte ändrats i ASP.NET Core MVC.

  • Skapa en Views/Shared katalog.

  • Optional: Copy _ViewImports.cshtml from the FullAspNetCore MVC project's Views directory into the ASP.NET Core project's Views directory. Ta bort en namnområdesdeklaration i filen _ViewImports.cshtml. The _ViewImports.cshtml file provides namespaces for all the view files and brings in Tag Helpers. Tag Helpers används i den nya layoutfilen. Filen _ViewImports.cshtml är ny för ASP.NET Core.

  • _Layout.cshtml Kopiera filen från ASP.NET MVC-projektets Views/Shared katalog till ASP.NET Core-projektets Views/Shared katalog.

Öppna _Layout.cshtml fil och gör följande ändringar (den färdiga koden visas nedan):

  • Ersätt @Styles.Render("~/Content/css") med ett <link> element för att läsa in bootstrap.css (se nedan).

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

  • Kommentera ut @Html.Partial("_LoginPartial")-raden (omslut raden med @*...*@). Mer information finns i Migrera autentisering och Identity till ASP.NET Core

  • Ersätt @Scripts.Render("~/bundles/jquery") med ett <script>-element (se nedan).

  • Ersätt @Scripts.Render("~/bundles/bootstrap") med ett <script>-element (se nedan).

Ersättningsmarkeringen för Bootstrap CSS-inkludering:

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

Ersättningsmarkering för jQuery och Bootstrap JavaScript-inkludering:

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

Den uppdaterade _Layout.cshtml-filen visas nedan:

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

Visa webbplatsen i webbläsaren. Den bör nu läsas in korrekt med de förväntade formaten på plats.

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

Konfigurera paketering och minifiering

Information om hur du konfigurerar paketering och minifiering finns i Bundling och Minification.

Lösa HTTP 500-fel

Det finns många problem som kan orsaka ett HTTP 500-felmeddelande som inte innehåller någon information om orsaken till problemet. Om den Views/_ViewImports.cshtml filen till exempel innehåller ett namnområde som inte finns i projektet genereras ett HTTP 500-fel. By default in ASP.NET Core apps, the UseDeveloperExceptionPage extension is added to the IApplicationBuilder and executed when the configuration is Development. Se ett exempel i följande kod:

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 konverterar ohanterade undantag till HTTP 500-felsvar. Normalt ingår inte felinformation i dessa svar för att förhindra att potentiellt känslig information om servern avslöjas. Mer information finns i undantagssida för utvecklare.

Additional resources

Den här artikeln visar hur du börjar migrera ett ASP.NET MVC-projekt till ASP.NET Core MVC 2.1. I processen framhävs många av de saker som har ändrats från ASP.NET MVC. Att migrera från ASP.NET MVC är en process i flera steg. Denna artikel omfattar:

  • Initial setup
  • Grundläggande kontroller och vyer
  • Static content
  • Client-side dependencies.

Information om hur du migrerar konfiguration och Identity kod finns i Migrera konfiguration till ASP.NET Core och Migrera autentisering och Identity till ASP.NET Core.

Note

Versionsnumren i exemplen kanske inte är aktuella och uppdaterar projekten i enlighet med detta.

Skapa startprojektet för ASP.NET MVC

För att demonstrera uppgraderingen börjar vi med att skapa en ASP.NET MVC-app. Create it with the name WebApp1 so the namespace matches the ASP.NET Core project created in the next step.

Visual Studio-dialogrutan Nytt projekt

Nytt Webbprogram-dialogrutan: MVC-projektmall vald i ASP.NET-mallpanelen

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.

Skapa ASP.NET Core-projektet

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. Om du har samma namnområde blir det enklare att kopiera kod mellan de två projekten. Skapa det här projektet i en annan katalog än föregående projekt om du vill använda samma namn.

dialogrutan Nytt projekt

dialogrutan för Nytt ASP.NET-webbprogram: Tom projektmall markerad i panelen ASP.NET Core-mallar

  • 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. När du skapar det här projektet sparas tid i konverteringen. Slutresultatet kan visas i den mallgenererade koden, koden kan kopieras till konverteringsprojektet eller jämföras med det mallgenererade projektet.

Konfigurera platsen så att den använder MVC

  • When targeting .NET Core, the Microsoft.AspNetCore.App metapackage is referenced by default. Det här paketet innehåller paket som ofta används av MVC-appar. Om du riktar in dig på .NET Framework måste paketreferenser anges individuellt i projektfilen.

Microsoft.AspNetCore.Mvc är ASP.NET Core MVC-ramverket. Microsoft.AspNetCore.StaticFiles är den statiska filhanteraren. ASP.NET Core-appar väljer uttryckligen mellanprogram, till exempel för att hantera statiska filer. For more information, see Static files.

  • Öppna filen Startup.cs och ändra koden så att den matchar följande:
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?}");
        });
    }
}

Metoden UseStaticFiles-utökning lägger till den statiska filhanteraren. Utvidgningsmetoden UseMvc lägger till dirigering. For more information, see Application Startup and Routing.

Lägg till en kontroller och en vy

I det här avsnittet läggs en minimal kontrollant och vy till för att fungera som platshållare för ASP.NET MVC-styrenhet och vyer som migreras i nästa avsnitt.

  • Lägg till en Controllers katalog.

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

dialogrutan Lägg till nytt objekt med MVC-styrenhetsklass vald (före lanseringen av ASP.NET Core 2.1)

  • Lägg till en Views katalog.

  • Lägg till en Views/Home katalog.

  • Lägg till en Razor vy med namnet Index.cshtml i Views/Home katalogen.

Dialogrutan Lägg till nytt objekt med MVC-vysidan markerad (innan ASP.NET Core 2.1) släpps)

Projektstrukturen visas nedan:

Solution Explorer som visar filer och kataloger för WebApp1

Ersätt innehållet i Views/Home/Index.cshtml-filen med följande markering:

<h1>Hello world!</h1>

Kör appen.

webbapp öppen i Microsoft Edge

For more information, see Controllers and Views.

Följande funktioner kräver migrering från exemplet ASP.NET MVC-projekt till ASP.NET Core-projektet:

  • innehåll på klientsidan (CSS, teckensnitt och skript)

  • controllers

  • views

  • models

  • bundling

  • filters

  • Logga in/ut, Identity (detta görs i nästa handledning.)

Kontrollanter och vyer

  • Kopiera var och en av metoderna från ASP.NET MVC-HomeController till den nya HomeController. I ASP.NET MVC är den inbyggda mallens returtyp för kontrollantåtgärd ActionResult; i ASP.NET Core MVC returnerar åtgärdsmetoderna i stället IActionResult. ActionResult implementerar IActionResult, så du behöver inte ändra returtypen för åtgärdsmetoderna.

  • Kopiera About.cshtml, Contact.cshtmloch Index.cshtmlRazor visa filer från ASP.NET MVC-projektet till projektet ASP.NET Core.

Testa varje metod

Layoutfilen och formatmallarna har inte migrerats ännu, så de renderade vyerna innehåller bara innehållet i vyfilerna. Layoutfilens genererade länkar för About- och Contact-vyerna kommer inte att vara tillgängliga ännu.

  • Anropa de renderade vyerna från webbläsaren på den ASP.NET kärnapp som körs genom att ersätta det aktuella portnumret med det portnummer som används i ASP.NET kärnprojektet. Till exempel: https://localhost:44375/home/about.

Contact page

Observera bristen på styling och menyalternativ. Stylingen kommer att åtgärdas i nästa avsnitt.

Static content

I ASP.NET MVC 5 eller tidigare fanns statiskt innehåll från roten i webbprojektet och blandades med filer på serversidan. I ASP.NET Core finns statiskt innehåll i wwwroot katalogen. Kopiera det statiska innehållet från ASP.NET MVC-appen till wwwroot katalogen i ASP.NET Core-projektet. I den här exempelkonverteringen:

  • favicon.ico Kopiera filen från ASP.NET MVC-projektet till wwwroot katalogen i ASP.NET Core-projektet.

The ASP.NET MVC project uses Bootstrap for its styling and stores the Bootstrap files in the Content and Scripts directories. Mallen, som genererade ASP.NET MVC-projektet, refererar till Bootstrap i layoutfilen (Views/Shared/_Layout.cshtml). Filerna bootstrap.js och bootstrap.css kan kopieras från ASP.NET MVC-projektet till wwwroot katalogen i det nya projektet. I stället lägger det här dokumentet till stöd för Bootstrap (och andra bibliotek på klientsidan) med hjälp av CDN i nästa avsnitt.

Migrera layoutfilen

  • _ViewStart.cshtml Kopiera filen från ASP.NET MVC-projektets Views katalog till ASP.NET Core-projektets Views katalog. Filen _ViewStart.cshtml har inte ändrats i ASP.NET Core MVC.

  • Skapa en Views/Shared katalog.

  • Optional: Copy _ViewImports.cshtml from the FullAspNetCore MVC project's Views directory into the ASP.NET Core project's Views directory. Ta bort en namnområdesdeklaration i filen _ViewImports.cshtml. The _ViewImports.cshtml file provides namespaces for all the view files and brings in Tag Helpers. Tag Helpers används i den nya layoutfilen. Filen _ViewImports.cshtml är ny för ASP.NET Core.

  • _Layout.cshtml Kopiera filen från ASP.NET MVC-projektets Views/Shared katalog till ASP.NET Core-projektets Views/Shared katalog.

Öppna _Layout.cshtml fil och gör följande ändringar (den färdiga koden visas nedan):

  • Ersätt @Styles.Render("~/Content/css") med ett <link> element för att läsa in bootstrap.css (se nedan).

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

  • Kommentera ut @Html.Partial("_LoginPartial")-raden (omslut raden med @*...*@). Mer information finns i Migrera autentisering och Identity till ASP.NET Core

  • Ersätt @Scripts.Render("~/bundles/jquery") med ett <script>-element (se nedan).

  • Ersätt @Scripts.Render("~/bundles/bootstrap") med ett <script>-element (se nedan).

Ersättningsmarkeringen för Bootstrap CSS-inkludering:

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

Ersättningsmarkering för jQuery och Bootstrap JavaScript-inkludering:

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

Den uppdaterade _Layout.cshtml-filen visas nedan:

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

Visa webbplatsen i webbläsaren. Den bör nu läsas in korrekt med de förväntade formaten på plats.

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

Konfigurera paketering och minifiering

Information om hur du konfigurerar paketering och minifiering finns i Bundling och Minification.

Lösa HTTP 500-fel

Det finns många problem som kan orsaka ett HTTP 500-felmeddelande som inte innehåller någon information om orsaken till problemet. Om den Views/_ViewImports.cshtml filen till exempel innehåller ett namnområde som inte finns i projektet genereras ett HTTP 500-fel. By default in ASP.NET Core apps, the UseDeveloperExceptionPage extension is added to the IApplicationBuilder and executed when the configuration is Development. Se ett exempel i följande kod:

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 konverterar ohanterade undantag till HTTP 500-felsvar. Normalt ingår inte felinformation i dessa svar för att förhindra att potentiellt känslig information om servern avslöjas. Mer information finns i undantagssida för utvecklare.

Additional resources