ASP.NET Core/ASP.NET MVC/ComponentOne/編集部ピックアップ

ASP.NET MVCからASP.NET Core MVCへの移行を試してみた

by MESCIUS-dev
普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はASP.NET MVCからASP.NET Core MVCへの移行についてお届けします。

「ASP.NET MVC」は従来のASP.NETを基盤に開発されたフレームワークです。「ASP.NET Web Forms」と比べて、イベントドリブンやポストバック、ビューステートという概念がなく、サーバーコントロールも利用しない点や、単体テストを自動化しやすいといった特徴があり、Webアプリを作成するフレームワークとして人気です。

しかし、ASP.NET MVCが動作する「.NET Framework」はバージョン4.8を最後にメジャーバージョンアップが行われないことが発表されており、その移行先として「.NET 5」上で動作する「ASP.NET Core MVC」が現在利用可能です。

今回の記事では、ASP.NET MVCからASP.NET Core MVCへの移行手順について説明していきたいと思います。

ASP.NET Core MVCへの移行方法

ASP.NET MVCをASP.NET Core MVCに移行する場合、現状移行ツールのようなものがなく、手作業での移行が必要となります。詳しい手順がマイクロソフト社の以下のページに公開されています。

今回はこちらの手順をもとに、ASP.NET Core MVCへの移行を試してみたいと思います。

ASP.NET MVCプロジェクトを作成

まずは移行元となるASP.NET MVCプロジェクトを作成します。

  1. Visual Studioの[ファイル]メニューで、［新規作成］＞［プロジェクト］の順に選択します。
  2. ［ASP.NET Web アプリケーション］を選択し、［次へ］を選択します。
  3. ［新しい ASP.NET Web アプリケーションの作成］ダイアログで、［MVC］プロジェクトテンプレートを選択し、［作成］を選択します。

ASP.NET MVCプロジェクトの作成

ASP.NET Core MVCプロジェクトの作成

次に、ASP.NET Coreプロジェクトで移行先となる新しいソリューションを作成します。

  1. Visual Studioの［ファイル］メニューで、［新規作成］＞［プロジェクト］の順に選択します。
  2. ［ASP.NET Core Web アプリケーション］を選択し、［次へ］を選択します。
  3. ［新しいプロジェクトの構成］ダイアログで、プロジェクト名を設定し、［作成］を選択します。このとき、移行元となるASP.NET MVCプロジェクトで指定したプロジェクト名と同じ名前を使用し、場所を移行元のプロジェクトとは別のディレクトリを設定します。同じ名前空間を使用することで、２つのプロジェクト間でのコピーを簡単に行うことができます。
    今回は移行元となるASP.NET MVCプロジェクトにて「WebApp1」として作成したため、「WebApp1」という名前で作成します。
  4. ［新しい ASP.NET Core Web アプリケーションの作成］ダイアログで、［.NET Core］と［ASP.NET Core 5.0］が選択されていることを確認します。［ASP.NET Core Web アプリ (Model-View-Controller)］プロジェクトテンプレートを選択し、［作成］を選択します。

プロジェクトテンプレートの選択

コントローラーとビューの移行

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

  1. ASP.NET MVCのWebApp1\ControllersフォルダにあるHomeController.csをコピーして、新しいASP.NET CoreのWebApp1\ControllersフォルダにあるHomeController.csを置き換えます。
  2. ASP.NET Coreプロジェクトで、Views\Homeディレクトリを右クリックし、[既存項目の追加]を選択します。
  3. [既存項目の追加]ダイアログで、ASP.NET MVCのWebApp1プロジェクトのViews\Homeディレクトリに移動し、About.cshtml、Contact.cshtml、Index.cshtmlを追加します。
  4. 先ほど移行したHomeController.csをASP.NET Coreプロジェクト上で展開し、参照先のモジュールをSystem.Web.MvcからMicrosoft.AspNetCore.Mvcに変更します。

参照モジュールの変更

各メソッドのテスト

ビルドを行うことで各コントローラーのテストを行うことができます。
この時点では、レイアウトとスタイルの移行がまだのため、HTMLの実行のみが反映されます。

各メソッドのテスト

静的コンテンツとレイアウトファイルの移行

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

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

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

  1. ASP.NET Core プロジェクトで、Views\Sharedディレクトリを右クリックし、［既存項目の追加］を選択します。
  2. ［既存項目の追加］ダイアログで、ASP.NET MVCのWebApp1プロジェクトのViews\Sharedディレクトリに移動し、_Layout.cshtmlの追加を行って、既存のファイルを置き換えます。
  3. 追加した_Layout.cshtmlを展開し、bootstrap.cssのインクルードを変更します。
    @Styles.Render("~/Content/css")をBootstrapとして読み込み要素に置き換え、@Scripts.Render("~/bundles/modernizr")を削除します。

<変更前>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<変更後>

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

jQueryとBootstrapのJavaScriptインクルードを変更します。@Scripts.Render("~/bundles/jquery")と@Scripts.Render("~/bundles/bootstrap")を置き換えます。

<変更前>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<変更後>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

ここまでの変更を行った上でASP.NET CoreのWebApp1プロジェクトを実行します。レイアウトやスタイルが反映されていれば成功です。

ASP.NET Core MVCで実行

グレープシティのASP.NET Core MVC対応コンポーネント

グレープシティでは、今回紹介したASP.NET Core MVCのほか、ASP.NET Core Blazorなど最新のWebアプリケーションフレームワークに対応したコンポーネントを提供しています。

製品サイトでは、手軽に試せるデモアプリケーションなども公開していますので、ぜひご覧ください。

＼  この記事をシェアする  ／