ASP.NET CoreのWebアプリケーションを空のテンプレートから作成してみた

samatsu 6/12/2016 10142 N/A Dot NET Core

ASP.NET CoreのWebサイトを空のテンプレートを使用して作成する手順のメモを記載します。ASP.NET Coreはプレリリース段階なので、ここで記載されている方法が参考情報になりみあす。

ASP.NET Coreを勉強するのであれば組み込みで用意されている WebサイトとWeb APIプロジェクトテンプレートからWebサイトを構築するのが一番勉強になるし簡単だと思います。個人的に空の状態でプロジェクトを作成するのが好きなので、今回は空のテンプレートからASP.NET CoreのWebサイトを動作させてみました。

Visual Studio 2015 Community
.NET Core 1.0 RC2

Visual Studio 2015で.NET Coreを開発するためのSDKのダウンロードとインストール方法はこのページを参照してください。

1. Visual Studioでプロジェクトを作成する

Visual Studio を起動し、 ASP.NET Core Web Application(.NET Core)プロジェクトテンプレートを選択して、プロジェクトを作成します。

ASP.NET Coreのテンプレートを選択するダイアログが表示されます。ASP.NET CoreでのWeb APIやWebアプリケーションの作成方法を勉強したい場合は、Web API,Web アプリケーションテンプレートを選択してサンプルを確認するのが簡単です。今回は空の状態でプロジェクトを構築したいので、空(empty)を選択します。[OK]ボタンをクリックします。

これでASP.NET Core用の空のWebアプリケーションの準備ができました。今実行すると、Startup.cs内の次のコードが実行されてHello Worldというメッセージがブラウザーに表示されます。

 app.Run(async (context) =>
{
     await context.Response.WriteAsync("Hello World!");
});

2. Webサイトを動作させるための変更を行う

空のプロジェクトテンプレートを選択すると、今の段階ではMVCを利用することもできません。そのため、NuGetパッケージ管理画面を表示して、Microsoft.AspNetCore.Mvc パッケージをインストールします。

MVCを使えるようにするために、Startup.csのConfigureServicesメソッドに services.AddMvc() という拡張メソッドを呼び出すコードを追加します。

 public void ConfigureServices(IServiceCollection services)
{
     services.AddMvc();
}

次にMVCルートのマッピング定義を追加します。同じく Startup.cs ファイルのConfigureメソッドを次のように変更してルートを登録しています。また、Hello Worldと出力しているコードをコメントアウトしました。

public void Configure(IApplicationBuilder app)
{
    // コメントアウト
    //app.Run(async (context) =>
    //{
    //    await context.Response.WriteAsync("Hello World!");
    //});

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Book}/{action=Index}/{id?}");
    });

}

あとは通常の MVCの開発と同じようにコントローラーとビューを定義していくだけです。

下図のように Controllers フォルダーを作成し、その配下にMVCコントローラーを作成しました。

今回は BookController という名前でControllerを作成しました。

アクションメソッドは下記サンプルのように適当に編集します。特に大した意味はないです。

 public IActionResult Index()
 {
      return View(DateTime.Now);
}

今度は Viewを作成します。Viewsフォルダーを作成し、さらに、Bookフォルダーを作成した後に、Bookフォルダーはいかに、 Index.cshtmlを作成します(ファイルのテンプレートはMVC ビューページを選択しています)。

下図のようにcshtmlファイルが作成されたので、あとはマークアップを編集します。￥

今回は次のように非常に簡単ですが、cshtmlを記載しました。BookControllerからのモデルはDateTime型になっていたことを思い出してください。

@model System.DateTime
@{
}
<html>
<head>

</head>
<body>
    <h1>Hello World!よろしくです!</h1>
    @Model.ToString()
</body>
</html>

F5ボタンでWebアプリケーションを実行するとページがきちんと表示されました。

ASP.NET Coreの開発をするにあたり、次のページ参考になると思います。

Getting started with ASP.NET Core MVC and Visual Studio
https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html

// Net planet-es V2