ASP.NET MVC と Web API から ASP.NET Core MVC へのアップグレード

この記事では、Visual Studio .NET アップグレード アシスタント と 増分更新 アプローチを使用して、ASP.NET Framework MVC または Web API アプリを core MVC を ASP.NET にアップグレードする方法について説明します。

.NET アップグレード アシスタントを使用したアップグレード

.NET Framework プロジェクトに必要なサポート ライブラリがソリューションに含まれている場合は、可能であれば.NET Standard 2.0 にアップグレードする必要があります。 詳細については、「 サポート ライブラリのアップグレード」を参照してください。

1. .NET Upgrade Assistant Visual Studio 拡張機能をインストールします。
2. Visual Studio で ASP.NET MVC または Web API ソリューションを開きます。
3. ソリューション エクスプローラーで、アップグレードするプロジェクトを右クリックし、[アップグレード] を選択します。 唯一のアップグレード オプションである段階的なプロジェクトのアップグレードを選択します。
4. アップグレード ターゲットの場合は、[ 新しいプロジェクト] を選択します。
5. プロジェクトに名前を付け、テンプレートを選択します。 移行するプロジェクトが API プロジェクトの場合は、 Core Web API ASP.NET 選択します。 MVC プロジェクトまたは MVC と Web API の場合は、 Core MVC ASP.NET 選択します。
6. [次へ] を選択します
7. ターゲット フレームワークのバージョンを選択し、[ 次へ] を選択します。 詳細については、「 .NET と .NET Core サポート ポリシー」を参照してください。
8. 変更の概要を確認し、[完了] を選択します。
9. 概要ステップには、Yarp プロキシ経由で<Framework Project>に接続されている<Framework ProjectCore>と、移行されたエンドポイントを示す円グラフが表示されます。 [ アップグレード コントローラー ] を選択し、アップグレードするコントローラーを選択します。
10. アップグレードするコンポーネントを選択し、[ アップグレードの選択] を選択します。

増分更新

「増分的な ASP.NET から ASP.NET Core への移行を始める」 の手順に従って、更新プロセスを続行してください。

この記事では、ASP.NET MVC プロジェクトを ASP.NET Core MVC に移行し始める方法について説明します。 このプロセスでは、ASP.NET MVC からの関連する変更が強調表示されます。

ASP.NET MVC からの移行は、複数ステップのプロセスです。 この記事では、次について説明します。

• 初期セットアップ。
• 基本的なコントローラーとビュー。
• 静的コンテンツ。
• クライアント側の依存関係。

構成と Identity コードの移行については、「ASP.NET Core への構成の移行 」および「 認証と Identity を ASP.NET Core に移行する」を参照してください。

[前提条件]

• ASP.NET および Web 開発ワークロードを使用する Visual Studio 2019 16.4 以降のバージョン
• .NET Core 3.1 SDK

MVC プロジェクト ASP.NET スターターを作成する

Visual Studio で MVC プロジェクト ASP.NET 例を作成して移行します。

1. [ ファイル ] メニューの [ 新規>プロジェクト] を選択します。
2. ASP.NET Web アプリケーション (.NET Framework) を選択し、[次へ] を選択します。
3. 名前空間が次の手順で作成した ASP.NET Core プロジェクトと一致するように、プロジェクトに WebApp1 という名前を付けます。 を選択してを作成します。
4. [MVC] を選択し、[作成] を選択します。

ASP.NET Core プロジェクトを作成する

移行先の新しい ASP.NET Core プロジェクトを使用して新しいソリューションを作成します。

1. Visual Studio の 2 つ目のインスタンスを起動します。
2. [ ファイル ] メニューの [ 新規>プロジェクト] を選択します。
3. [ コア Web アプリケーション ASP.NET 選択し、[ 次へ] を選択します。
4. [ 新しいプロジェクトの構成 ] ダイアログで、プロジェクトに WebApp1 という名前を付けます。
5. 同じプロジェクト名を使用するには、前のプロジェクトとは別のディレクトリに場所を設定します。 同じ名前空間を使用すると、2 つのプロジェクト間でコードを簡単にコピーできます。 を選択してを作成します。
6. [新しい ASP.NET Core Web アプリケーション の作成] ダイアログで、.NET Core と ASP.NET Core 3.1 が選択されていることを確認します。 Web アプリケーション (モデル-View-Controller) プロジェクト テンプレートを選択し、[作成] を選択します。

MVC を使用するように ASP.NET Core サイトを構成する

ASP.NET Core 3.0 以降のプロジェクトでは、.NET Framework はサポート対象のターゲット フレームワークではなくなりました。 プロジェクトは .NET Core を対象とする必要があります。 MVC を含む ASP.NET Core 共有フレームワークは、.NET Core ランタイム インストールの一部です。 プロジェクト ファイルで Microsoft.NET.Sdk.Web SDK を使用すると、共有フレームワークが自動的に参照されます。

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

詳細については、「 フレームワーク リファレンス」を参照してください。

ASP.NET Core では、 Startup クラスは次のとおりです。

• Global.asax を置き換えます。
• すべてのアプリのスタートアップ タスクを処理します。

詳細については、「ASP.NET Core でのアプリの起動」を参照してください。

ASP.NET Core プロジェクトで、 Startup.cs ファイルを開きます。

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 アプリでは、ミドルウェアを使用してフレームワーク機能をオプトインする必要があります。 前のテンプレートで生成されたコードでは、次のサービスとミドルウェアが追加されています。

• AddControllersWithViews拡張メソッドは、コントローラー、API 関連の機能、およびビューに対する MVC サービスのサポートを登録します。 MVC サービス登録オプションの詳細については、MVC サービスの登録に関するセクションを参照してください。
• UseStaticFiles拡張メソッドは、静的ファイル ハンドラーMicrosoft.AspNetCore.StaticFilesを追加します。 UseStaticFilesする前に、UseRouting拡張メソッドを呼び出す必要があります。 詳細については、「ASP.NET Core の静的ファイル」をご覧ください。
• UseRouting拡張メソッドはルーティングを追加します。 詳細については、「ASP.NET Core のルーティング」を参照してください。

この既存の構成には、MVC プロジェクト ASP.NET 例を移行するために必要なものが含まれています。 ASP.NET Core ミドルウェア オプションの詳細については、「 ASP.NET Core でのアプリの起動」を参照してください。

コントローラーとビューを移行する

ASP.NET Core プロジェクトでは、新しい空のコントローラー クラスとビュー クラスが追加され、コントローラーと同じ名前を使用してプレースホルダーとして機能し、移行元の任意の ASP.NET MVC プロジェクトのクラスを表示します。

ASP.NET Core WebApp1 プロジェクトには、ASP.NET MVC プロジェクトと同じ名前の最小限のコントローラーとビューが既に含まれています。 そのため、これらは、ASP.NET MVC WebApp1 プロジェクトから移行される ASP.NET MVC コントローラーとビューのプレースホルダーとして機能します。

1. 新しい ASP.NET Core HomeController メソッドを置き換えるには、ASP.NET MVC HomeControllerからメソッドをコピーします。 アクション メソッドの戻り値の型を変更する必要はありません。 ASP.NET MVC 組み込みテンプレートのコントローラー アクション メソッドの戻り値の型は ActionResult。core MVC ASP.NET では、アクション メソッドは代わりに IActionResult を返します。 ActionResult は、IActionResult を実装します。
2. ASP.NET Core プロジェクトで、 Views/Home ディレクトリを右クリックし、 追加>Existing Item を選択します。
3. [既存の項目の追加] ダイアログで、ASP.NET MVC WebApp1 プロジェクトの Views/Home ディレクトリに移動します。
4. About.cshtml、Contact.cshtml、およびビュー ファイルIndex.cshtmlRazor選択し、[追加] を選択して既存のファイルを置き換えます。

詳細については、「 ASP.NET Core MVC のコントローラーを使用した要求の処理」および「ASP.NET Core MVCのビュー」を参照してください。

各メソッドをテストする

各コントローラー エンドポイントはテストできますが、レイアウトとスタイルについては、ドキュメントの後半で説明します。

1. ASP.NET Core アプリを実行します。
2. 現在のポート番号を ASP.NET Core プロジェクトで使用されているポート番号に置き換えて、実行中の ASP.NET Core アプリでブラウザーからレンダリングされたビューを呼び出します。 たとえば、https://localhost:44375/home/about のようにします。

静的コンテンツを移行する

ASP.NET MVC 5 以前では、静的コンテンツは Web プロジェクトのルート ディレクトリからホストされ、サーバー側のファイルと混在していました。 ASP.NET Core では、静的ファイルはプロジェクトの Web ルート ディレクトリ内に格納されます。 既定のディレクトリは {content root}/wwwroot ですが、変更できます。 詳細については、「ASP.NET Core の静的ファイル」をご覧ください。

ASP.NET MVC WebApp1 プロジェクトから ASP.NET Core WebApp1 プロジェクトの wwwroot ディレクトリに静的コンテンツをコピーします。

1. ASP.NET Core プロジェクトで、 wwwroot ディレクトリを右クリックし、[ 追加>Existing Item] を選択します。
2. [ 既存の項目の追加] ダイアログで、mvc WebApp1 プロジェクト ASP.NET に移動します。
3. favicon.icoファイルを選択し、[追加] を選択し、既存のファイルを置き換えます。

レイアウト ファイルを移行する

ASP.NET MVC プロジェクト レイアウト ファイルを ASP.NET Core プロジェクトにコピーします。

1. ASP.NET Core プロジェクトで、 Views ディレクトリを右クリックし、 追加>Existing Item を選択します。
2. [ 既存の項目の追加] ダイアログで、mvc WebApp1 プロジェクトの Views ディレクトリ ASP.NET に移動します。
3. _ViewStart.cshtml ファイルを選択し、[追加] を選択します。

ASP.NET MVC プロジェクトの共有レイアウト ファイルを ASP.NET Core プロジェクトにコピーします。

1. ASP.NET Core プロジェクトで、 Views/Shared ディレクトリを右クリックし、[ 追加>Existing Item] を選択します。
2. [ 既存の項目の追加 ] ダイアログで、ASP.NET MVC WebApp1 プロジェクトの Views/Shared ディレクトリに移動します。
3. _Layout.cshtml ファイルを選択し、[追加] を選択し、既存のファイルを置き換えます。

ASP.NET Core プロジェクトで、 _Layout.cshtml ファイルを開きます。 以下に示す完成したコードと一致するように、次の変更を行います。

以下の完成したコードと一致するようにブートストラップ CSS インクルージョンを更新します。

1. @Styles.Render("~/Content/css")を<link>要素に置き換えて、bootstrap.cssを読み込みます (下記参照)。
2. @Scripts.Render("~/bundles/modernizr") を削除します。

ブートストラップ CSS インクルージョンの完成した置換マークアップ:

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

以下の完成したコードと一致するように、jQuery と Bootstrap JavaScript のインクルードを更新します。

1. @Scripts.Render("~/bundles/jquery")を<script>要素に置き換えます (下記参照)。
2. @Scripts.Render("~/bundles/bootstrap")を<script>要素に置き換えます (下記参照)。

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

更新された _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>

ブラウザーでサイトを表示します。 必要なスタイルを配置してレンダリングする必要があります。

バンドルと最適化の設定

ASP.NET Core は、 WebOptimizer やその他の同様のライブラリなど、いくつかのオープンソースのバンドルおよび縮小ソリューションと互換性があります。 ASP.NET Core には、ネイティブのバンドルと縮小ソリューションはありません。 バンドルと縮小の構成については、「 バンドルと縮小」を参照してください。

HTTP 500 エラーの解決

問題の原因に関する情報を含まない HTTP 500 エラー メッセージを引き起こす可能性がある多くの問題があります。 たとえば、 Views/_ViewImports.cshtml ファイルにプロジェクトに存在しない名前空間が含まれている場合、HTTP 500 エラーが生成されます。 ASP.NET Core アプリでは、 UseDeveloperExceptionPage 拡張機能が既定で IApplicationBuilder に追加され、環境が 開発時に実行されます。 これについては、次のコードで詳しく説明します。

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 は、未処理の例外を HTTP 500 エラー応答に変換します。 通常、サーバーに関する機密情報の漏えいを防ぐため、これらの応答にはエラーの詳細は含まれません。 詳細については、「 開発者例外ページ」を参照してください。

次のステップ

• ASP.NET Core への認証と Identity の移行

その他のリソース

• ASP.NET Core Blazor
• ASP.NET Core のタグ ヘルパー

この記事では、ASP.NET MVC プロジェクトの ASP.NET Core MVC 2.2 への移行を開始する方法について説明します。 このプロセスでは、ASP.NET MVC から変更された多くのものが強調表示されています。 ASP.NET MVC からの移行は、複数ステップのプロセスです。 この記事では、次について説明します。

• 初期設定
• 基本コントローラーとビュー
• 静的コンテンツ
• クライアント側の依存関係。

構成と Identity コードの移行については、「ASP.NET Core への構成の移行 」および「 認証と Identity を ASP.NET Core に移行する」を参照してください。

MVC プロジェクト ASP.NET スターターを作成する

アップグレードのデモンストレーションを行うために、まず ASP.NET MVC アプリを作成します。 名前空間が次の手順で作成した ASP.NET Core プロジェクトと一致するように、 WebApp1 という名前で作成します。

随意： ソリューションの名前を WebApp1 から Mvc5 に変更します。 Visual Studio に新しいソリューション名 (Mvc5) が表示されるため、次のプロジェクトからこのプロジェクトを簡単に見分けられます。

ASP.NET Core プロジェクトを作成する

2 つのプロジェクトの名前空間が一致するように、前のプロジェクト (WebApp1) と同じ名前の新しい空の ASP.NET Core Web アプリを作成します。 同じ名前空間を使用すると、2 つのプロジェクト間でコードを簡単にコピーできます。 同じ名前を使用するために、前のプロジェクトとは異なるディレクトリにこのプロジェクトを作成します。

[新しいプロジェクトの

• 随意：Web アプリケーション プロジェクト テンプレートを使用して、新しい ASP.NET Core アプリを作成します。 プロジェクトに WebApp1 という名前を付け、個々の ユーザー アカウントの認証オプションを選択します。 このアプリの名前を FullAspNetCore に変更します。 このプロジェクトを作成すると、変換に時間が節約されます。 最終的な結果は、テンプレートで生成されたコードで表示したり、コードを変換プロジェクトにコピーしたり、テンプレートで生成されたプロジェクトと比較したりすることができます。

MVC を使用するようにサイトを構成する

• .NET Core をターゲットにすると、 Microsoft.AspNetCore.App メタパッケージ が既定で参照されます。 このパッケージには、MVC アプリでよく使用されるパッケージが含まれています。 .NET Framework を対象とする場合は、パッケージ参照をプロジェクト ファイルに個別に一覧表示する必要があります。

Microsoft.AspNetCore.Mvc は、ASP.NET Core MVC フレームワークです。 Microsoft.AspNetCore.StaticFiles は静的ファイル ハンドラーです。 ASP.NET Core アプリは、静的ファイルの提供など、ミドルウェアを明示的に選択します。 詳細については、「 静的ファイル」を参照してください。

• Startup.cs ファイルを開き、次のようにコードを変更します。

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

UseStaticFiles拡張メソッドは、静的ファイル ハンドラーを追加します。 詳細については、「 アプリケーションの起動 と ルーティング」を参照してください。

コントローラーとビューを追加する

このセクションでは、最小限のコントローラーとビューを追加して、次のセクションで移行した ASP.NET MVC コントローラーとビューのプレースホルダーとして機能します。

• Controllers ディレクトリを追加します。

• という名前のHomeController.csを Controllers ディレクトリに追加します。

• Views ディレクトリを追加します。

• Views/Home ディレクトリを追加します。

• Razorという名前のIndex.cshtmlを Views/Home ディレクトリに追加します。

プロジェクト構造を次に示します。

Views/Home/Index.cshtml ファイルの内容を次のマークアップに置き換えます。

<h1>Hello world!</h1>

アプリを実行します。

詳細については、「コントローラーとビュー 」 を 参照してください。

次の機能では、MVC プロジェクト ASP.NET 例から ASP.NET Core プロジェクトへの移行が必要です。

• クライアント側のコンテンツ (CSS、フォント、スクリプト)

• コントローラー

• ビュー

• モデル

• バンドル

• フィルター

• ログイン/ログアウト Identity (これは次のチュートリアルで行います)。

コントローラーとビュー

• ASP.NET MVC HomeController の各メソッドを新しい HomeControllerにコピーします。 ASP.NET MVC では、組み込みのテンプレートのコントローラー アクション メソッドの戻り値の型は ActionResult。ASP.NET Core MVC では、アクション メソッドは代わりに IActionResult を返します。 ActionResult は IActionResultを実装するため、アクション メソッドの戻り値の型を変更する必要はありません。

• ASP.NET MVC プロジェクトから ASP.NET Core プロジェクトに About.cshtml、 Contact.cshtml、および Index.cshtmlRazor ビュー ファイルをコピーします。

各メソッドをテストする

レイアウト ファイルとスタイルはまだ移行されていないため、レンダリングされたビューにはビュー ファイル内のコンテンツのみが含まれます。 AboutビューとContact ビューに対して生成されたレイアウト ファイルのリンクはまだ使用できません。

現在のポート番号を、ASP.NET コア プロジェクトで使用されているポート番号に置き換えて、実行中の ASP.NET コア アプリでブラウザーからレンダリングされたビューを呼び出します。 たとえば、 https://localhost:44375/home/aboutと指定します。

スタイル設定とメニュー項目がないことに注意してください。 スタイルは次のセクションで修正されます。

静的コンテンツ

ASP.NET MVC 5 以前では、静的コンテンツは Web プロジェクトのルートからホストされ、サーバー側ファイルと混在していました。 ASP.NET Core では、静的コンテンツは wwwroot ディレクトリでホストされます。 ASP.NET MVC アプリから ASP.NET Core プロジェクトの wwwroot ディレクトリに静的コンテンツをコピーします。 このサンプル変換では、次の操作を行います。

• favicon.ico ファイルを ASP.NET MVC プロジェクトから ASP.NET Core プロジェクトの wwwroot ディレクトリにコピーします。

ASP.NET MVC プロジェクトでは、スタイル設定に Bootstrap を使用し、Bootstrap ファイルを Content ディレクトリと Scripts ディレクトリに格納します。 ASP.NET MVC プロジェクトを生成したテンプレートは、レイアウト ファイル (Views/Shared/_Layout.cshtml) で Bootstrap を参照します。 bootstrap.jsファイルとbootstrap.css ファイルは、ASP.NET MVC プロジェクトから新しいプロジェクトの wwwroot ディレクトリにコピーできます。 代わりに、このドキュメントでは、次のセクションで CDN を使用したブートストラップ (およびその他のクライアント側ライブラリ) のサポートを追加します。

レイアウト ファイルを移行する

• ASP.NET MVC プロジェクトの Views ディレクトリから ASP.NET Core プロジェクトの _ViewStart.cshtml ディレクトリに ファイルをコピーします。 _ViewStart.cshtml ファイルは、ASP.NET Core MVC では変更されていません。

• Views/Shared ディレクトリを作成します。

• 随意：_ViewImports.cshtml MVC プロジェクトの Views ディレクトリから ASP.NET Core プロジェクトの Views ディレクトリにをコピーします。 _ViewImports.cshtml ファイル内の名前空間宣言を削除します。 _ViewImports.cshtml ファイルは、すべてのビュー ファイルの名前空間を提供し、タグ ヘルパーを取り込みます。 タグ ヘルパーは、新しいレイアウト ファイルで使用されます。 _ViewImports.cshtml ファイルは、ASP.NET Core の新機能です。

• ASP.NET MVC プロジェクトの _Layout.cshtml ディレクトリから ASP.NET Core プロジェクトの Views/Shared ディレクトリに ファイルをコピーします。

ファイル _Layout.cshtml 開き、次の変更を行います (完成したコードを次に示します)。

• @Styles.Render("~/Content/css")を<link>要素に置き換えて、bootstrap.cssを読み込みます (下記参照)。

• @Scripts.Render("~/bundles/modernizr") を削除します。

• @Html.Partial("_LoginPartial")行をコメント アウトします (行を@*...*@で囲む)。 詳細については、「認証とIdentityを ASP.NET Core に移行する」を参照してください。

• @Scripts.Render("~/bundles/jquery")を<script>要素に置き換えます (下記参照)。

• @Scripts.Render("~/bundles/bootstrap")を<script>要素に置き換えます (下記参照)。

ブートストラップ CSS インクルージョンの置換マークアップ:

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

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

更新された _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>

ブラウザーでサイトを表示します。 これで、想定されるスタイルが設定された状態で、正しく読み込まれるはずです。

• 随意： 新しいレイアウト ファイルを使用してみてください。 FullAspNetCore プロジェクトからレイアウト ファイルをコピーします。 新しいレイアウト ファイルでは タグ ヘルパーが 使用され、その他の機能強化が行われました。

バンドルと最適化の設定

バンドルと縮小を構成する方法については、「 バンドルと縮小」を参照してください。

HTTP 500 エラーの解決

問題の原因に関する情報を含まない HTTP 500 エラー メッセージを引き起こす可能性がある多くの問題があります。 たとえば、 Views/_ViewImports.cshtml ファイルにプロジェクトに存在しない名前空間が含まれている場合、HTTP 500 エラーが生成されます。 ASP.NET Core アプリでは、既定では、 UseDeveloperExceptionPage 拡張機能が IApplicationBuilder に追加され、構成が 開発時に実行されます。 次のコードの例を参照してください。

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 は、未処理の例外を HTTP 500 エラー応答に変換します。 通常、サーバーに関する機密情報の漏えいを防ぐため、これらの応答にはエラーの詳細は含まれません。 詳細については、「 開発者例外ページ」を参照してください。

その他のリソース

• ASP.NET Core Blazor
• ASP.NET Core のタグ ヘルパー

この記事では、ASP.NET MVC プロジェクトの ASP.NET Core MVC 2.1 への移行を開始する方法について説明します。 このプロセスでは、ASP.NET MVC から変更された多くのものが強調表示されています。 ASP.NET MVC からの移行は、複数ステップのプロセスです。 この記事では、次について説明します。

• 初期設定
• 基本コントローラーとビュー
• 静的コンテンツ
• クライアント側の依存関係。

構成と Identity コードの移行については、「ASP.NET Core への構成の移行 」および「 認証と Identity を ASP.NET Core に移行する」を参照してください。

MVC プロジェクト ASP.NET スターターを作成する

アップグレードのデモンストレーションを行うために、まず ASP.NET MVC アプリを作成します。 名前空間が次の手順で作成した ASP.NET Core プロジェクトと一致するように、 WebApp1 という名前で作成します。

随意： ソリューションの名前を WebApp1 から Mvc5 に変更します。 Visual Studio に新しいソリューション名 (Mvc5) が表示されるため、次のプロジェクトからこのプロジェクトを簡単に見分けられます。

ASP.NET Core プロジェクトを作成する

2 つのプロジェクトの名前空間が一致するように、前のプロジェクト (WebApp1) と同じ名前の新しい空の ASP.NET Core Web アプリを作成します。 同じ名前空間を使用すると、2 つのプロジェクト間でコードを簡単にコピーできます。 同じ名前を使用するために、前のプロジェクトとは異なるディレクトリにこのプロジェクトを作成します。

[新しいプロジェクトの

• 随意：Web アプリケーション プロジェクト テンプレートを使用して、新しい ASP.NET Core アプリを作成します。 プロジェクトに WebApp1 という名前を付け、個々の ユーザー アカウントの認証オプションを選択します。 このアプリの名前を FullAspNetCore に変更します。 このプロジェクトを作成すると、変換に時間が節約されます。 最終的な結果は、テンプレートで生成されたコードで表示したり、コードを変換プロジェクトにコピーしたり、テンプレートで生成されたプロジェクトと比較したりすることができます。

MVC を使用するようにサイトを構成する

• .NET Core をターゲットにすると、 Microsoft.AspNetCore.App メタパッケージ が既定で参照されます。 このパッケージには、MVC アプリでよく使用されるパッケージが含まれています。 .NET Framework を対象とする場合は、パッケージ参照をプロジェクト ファイルに個別に一覧表示する必要があります。

Microsoft.AspNetCore.Mvc は、ASP.NET Core MVC フレームワークです。 Microsoft.AspNetCore.StaticFiles は静的ファイル ハンドラーです。 ASP.NET Core アプリは、静的ファイルの提供など、ミドルウェアを明示的に選択します。 詳細については、「 静的ファイル」を参照してください。

• Startup.cs ファイルを開き、次のようにコードを変更します。

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

UseStaticFiles拡張メソッドは、静的ファイル ハンドラーを追加します。 UseMvc拡張メソッドはルーティングを追加します。 詳細については、「 アプリケーションの起動 と ルーティング」を参照してください。

コントローラーとビューを追加する

このセクションでは、最小限のコントローラーとビューを追加して、次のセクションで移行した ASP.NET MVC コントローラーとビューのプレースホルダーとして機能します。

• Controllers ディレクトリを追加します。

• という名前のHomeController.csを Controllers ディレクトリに追加します。

• Views ディレクトリを追加します。

• Views/Home ディレクトリを追加します。

• Razorという名前のIndex.cshtmlを Views/Home ディレクトリに追加します。

プロジェクト構造を次に示します。

Views/Home/Index.cshtml ファイルの内容を次のマークアップに置き換えます。

<h1>Hello world!</h1>

アプリを実行します。

詳細については、「コントローラーとビュー 」 を 参照してください。

次の機能では、MVC プロジェクト ASP.NET 例から ASP.NET Core プロジェクトへの移行が必要です。

• クライアント側のコンテンツ (CSS、フォント、スクリプト)

• コントローラー

• ビュー

• モデル

• バンドル

• フィルター

• ログイン/ログアウト Identity (これは次のチュートリアルで行います)。

コントローラーとビュー

• ASP.NET MVC HomeController の各メソッドを新しい HomeControllerにコピーします。 ASP.NET MVC では、組み込みのテンプレートのコントローラー アクション メソッドの戻り値の型は ActionResult。ASP.NET Core MVC では、アクション メソッドは代わりに IActionResult を返します。 ActionResult は IActionResultを実装するため、アクション メソッドの戻り値の型を変更する必要はありません。

• ASP.NET MVC プロジェクトから ASP.NET Core プロジェクトに About.cshtml、 Contact.cshtml、および Index.cshtmlRazor ビュー ファイルをコピーします。

各メソッドをテストする

レイアウト ファイルとスタイルはまだ移行されていないため、レンダリングされたビューにはビュー ファイル内のコンテンツのみが含まれます。 AboutビューとContact ビューに対して生成されたレイアウト ファイルのリンクはまだ使用できません。

• 現在のポート番号を、ASP.NET コア プロジェクトで使用されているポート番号に置き換えて、実行中の ASP.NET コア アプリでブラウザーからレンダリングされたビューを呼び出します。 たとえば、 https://localhost:44375/home/aboutと指定します。

スタイル設定とメニュー項目がないことに注意してください。 スタイルは次のセクションで修正されます。

静的コンテンツ

ASP.NET MVC 5 以前では、静的コンテンツは Web プロジェクトのルートからホストされ、サーバー側ファイルと混在していました。 ASP.NET Core では、静的コンテンツは wwwroot ディレクトリでホストされます。 ASP.NET MVC アプリから ASP.NET Core プロジェクトの wwwroot ディレクトリに静的コンテンツをコピーします。 このサンプル変換では、次の操作を行います。

• favicon.ico ファイルを ASP.NET MVC プロジェクトから ASP.NET Core プロジェクトの wwwroot ディレクトリにコピーします。

ASP.NET MVC プロジェクトでは、スタイル設定に Bootstrap を使用し、Bootstrap ファイルを Content ディレクトリと Scripts ディレクトリに格納します。 ASP.NET MVC プロジェクトを生成したテンプレートは、レイアウト ファイル (Views/Shared/_Layout.cshtml) で Bootstrap を参照します。 bootstrap.jsファイルとbootstrap.css ファイルは、ASP.NET MVC プロジェクトから新しいプロジェクトの wwwroot ディレクトリにコピーできます。 代わりに、このドキュメントでは、次のセクションで CDN を使用したブートストラップ (およびその他のクライアント側ライブラリ) のサポートを追加します。

レイアウト ファイルを移行する

• ASP.NET MVC プロジェクトの Views ディレクトリから ASP.NET Core プロジェクトの _ViewStart.cshtml ディレクトリに ファイルをコピーします。 _ViewStart.cshtml ファイルは、ASP.NET Core MVC では変更されていません。

• Views/Shared ディレクトリを作成します。

• 随意：_ViewImports.cshtml MVC プロジェクトの Views ディレクトリから ASP.NET Core プロジェクトの Views ディレクトリにをコピーします。 _ViewImports.cshtml ファイル内の名前空間宣言を削除します。 _ViewImports.cshtml ファイルは、すべてのビュー ファイルの名前空間を提供し、タグ ヘルパーを取り込みます。 タグ ヘルパーは、新しいレイアウト ファイルで使用されます。 _ViewImports.cshtml ファイルは、ASP.NET Core の新機能です。

• ASP.NET MVC プロジェクトの _Layout.cshtml ディレクトリから ASP.NET Core プロジェクトの Views/Shared ディレクトリに ファイルをコピーします。

ファイル _Layout.cshtml 開き、次の変更を行います (完成したコードを次に示します)。

• @Styles.Render("~/Content/css")を<link>要素に置き換えて、bootstrap.cssを読み込みます (下記参照)。

• @Scripts.Render("~/bundles/modernizr") を削除します。

• @Html.Partial("_LoginPartial")行をコメント アウトします (行を@*...*@で囲む)。 詳細については、「認証とIdentityを ASP.NET Core に移行する」を参照してください。

• @Scripts.Render("~/bundles/jquery")を<script>要素に置き換えます (下記参照)。

• @Scripts.Render("~/bundles/bootstrap")を<script>要素に置き換えます (下記参照)。

ブートストラップ CSS インクルージョンの置換マークアップ:

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

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

更新された _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>

ブラウザーでサイトを表示します。 これで、想定されるスタイルが設定された状態で、正しく読み込まれるはずです。

• 随意： 新しいレイアウト ファイルを使用してみてください。 FullAspNetCore プロジェクトからレイアウト ファイルをコピーします。 新しいレイアウト ファイルでは タグ ヘルパーが 使用され、その他の機能強化が行われました。

バンドルと最適化の設定

バンドルと縮小を構成する方法については、「 バンドルと縮小」を参照してください。

HTTP 500 エラーの解決

問題の原因に関する情報を含まない HTTP 500 エラー メッセージを引き起こす可能性がある多くの問題があります。 たとえば、 Views/_ViewImports.cshtml ファイルにプロジェクトに存在しない名前空間が含まれている場合、HTTP 500 エラーが生成されます。 ASP.NET Core アプリでは、既定では、 UseDeveloperExceptionPage 拡張機能が IApplicationBuilder に追加され、構成が 開発時に実行されます。 次のコードの例を参照してください。

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 は、未処理の例外を HTTP 500 エラー応答に変換します。 通常、サーバーに関する機密情報の漏えいを防ぐため、これらの応答にはエラーの詳細は含まれません。 詳細については、「 開発者例外ページ」を参照してください。

その他のリソース

• ASP.NET Core Blazor
• ASP.NET Core のタグ ヘルパー