現在ログインしていません。
新規アカウント作成
ログイン

ASP.NET Core入門 簡単なページを作ってみる

ASP.NET Core Webアプリケーション 初体験の私が簡単な足し算・引き算ができるページを作ってみた過程をお伝えします。 初体験なので無駄があったり、よくない方法になっている可能性は否定できませんが、初めての人にはいろいろ参考になるのではないかと思います。

最終的には2つのテキストボックスにそれぞれ数字を入力して、足し算のボタンか引き算のボタンを押すことで計算を実行して答えを表示する画面を作ります。

aspcore0109-Calcurate

方針

ASP.NET Core Webアプリケーションにははじめから基本的な機能が組み込まれた Webアプリケーション というテンプレートが用意されていますが、できるだけ何もないところからはじめたほうが仕組みが理解できると思い、あえて 「空」 というテンプレートを使います。

この記事は、すべてが完成してから書いているので何の苦労もなく作っているように見えるかもしれませんが、実際にはいろいろ調べたり試したりしました。 その際特に参考になったサイトは公式のチュートリアルです。

ASP.NET Core での Razor ページの概要

https://docs.microsoft.com/ja-jp/aspnet/core/mvc/razor-pages/?tabs=visual-studio

この記事の作成に当たってはWindows 7上でVisual Studio 2017を使用しています。

プロジェクト作成

まずはVisual Studioで新規プロジェクトを作成します。 Visual C#のWEbから ASP.NET Webアプリケーションを選択します。

aspcore0101-CreateASPNETCore

次にテンプレートを選択する画面になるので、ここでは「空」を選択します。

aspcore0102-empty

これでひとまず空のASP.NET Core Webアプリケーションの完成です。 空と言っても必要最小限のファイルとプログラムが最初から入っています。

aspcore0103-initialSolution

実行するとブラウザーが起動してHello World!と表示されます。

aspcore0107-HelloWorld

この状態から2つの数字を入力して足し算・引き算ができる機能を追加します。

ページの作成

まずは、計算を操作・表示するページを作成しましょう。 プロジェクトを右クリックして 追加 - 新しいフォルダーから Pages という名前のフォルダーを追加してください。

このフォルダーの名前は規則によって決まっておりぴったり同じ名前にする必要があります。

Pagesフォルダーを作成したら、それを右クリックして、追加 - Razor ページをクリックしてください。

次のようなダイアログが表示されます。

aspcore0104-AddPage

Razor ページを選択して「追加」します。

追加するページの設定画面が表示されるので、Razorページ名を「Index」にして、オプションは「PageModel クラスの生成」のみをチェックしてください。

aspcore0105-NamePage

ここでも名前が重要で Index という名前のページはMVCを使用しているときにデフォルトで表示されるページ名なのです。デフォルトのページ名を変更する手段は何かあると思いますが今のところ私はわかりません。

PageModelクラスの生成オプションをチェックすると、ページを生成するときに同時にモデルクラス用のプログラムも生成し、2つが連動して動作するように構成されます。

ここまでの作業が終わるとPagesフォルダー配下にIndex.cshtmlとIndex.cshtml.csというファイルが生成されます。ソリューションエクスプローラーは次のようになります。

aspcore0106-Solution

Index.cshtmlファイルは画面がどのように表示されるかを定義するビューです。

とりあえず簡単な文字列を表示できるようにbodyの間にThis is the indexという1行追加してください。

@page
@model CoreEmpty.Pages.IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    This is the Index.
</body>
</html>
■リスト1:

MVCを使用する

この状態で実行してもあいかわらずHello World!が表示されるだけです。

Index.cshtmlを表示するようにするにはMVCを使用して表示するページが決定されるようにする必要があります。

そのためにStartup.csファイルに2行追加します。 追加するのは services.AddMvc(); の行と、 app.UseMvc(); の行です。

さらに、Hello, World!を表示している不要な app.Run(async (context) => の呼び出しは削除します。

結果、Startup.csは次のように成ります。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace CoreEmpty
{
    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.UseMvc();
        }
    }
}
■リスト2:MVCを使用するように構成

ASP.NET CoreではWebサーバーがどのようなパイプラインで処理を実行するのかもプログラムから指定できます。 上記のプログラムはパイプラインにMVCを組み込んでいます。

MVCをパイプラインに組み込んだだけでコントローラーもなく、ルートの定義もありませんが、最低限の動作はしてくれます。

また、ASP.NET CoreのMVCでは、コントローラーなしで直接モデルに要求を着信させて処理することができます。今回はこの方式を使用します。

もちろん、従来のASP.NET MVCのようにコントローラーを配置して処理を行うこともできます。

これで実行すると、さきほど組み込んだThis is the Indexが画面に表示されます。Index.cshtmlが実行された証拠ですね。

aspcore0108-ThisIsTheIndex

計算機能の作成

それでは、いよいよIndex.cshtmlに計算機能をつけましょう。

まずはモデルとしてX, Y, Answerの3つの項目を定義します。

Index.cshtml.csに次のように3つのプロパティを追加してください。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoreEmpty.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public int X { get; set; }

        [BindProperty]
        public int Y { get; set; }

        public int Answer { get; set; }

        public void OnGet()
        {

        }
    }
}
■リスト3:

XとYにはBindProperty属性をつけました。これを付けると自分で値を読み書きしなくても自動的にビュー(Index.cshtml)の指定した箇所の値を連動してくれるようになります。

ビュー(Index.cshtml)の方は次のようにします。

@page
@model CoreEmpty.Pages.IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    This is the Index.
    <form method="post">
        <div>X: <input asp-for="X"/></div>
        <div>Y: <input asp-for="Y"/></div>
        <div><span>@Model.Answer</span></div>
        <div>
            <button asp-page-handler="Add">Add</button>
            <button asp-page-handler="Subtract">Subtract</button>
        </div>
    </form>
</body>
</html>
■リスト4:

ポイントは4つあります。 まずは、3行目の@addTagHelperです。

この行によってこのファイル(Index.cshtml)内でタグヘルパーが使用できるようになります。タグヘルパーを使うとHTMLの構文でプログラムを呼び出してHTMLタグを生成できるようになります。たとえば、下の方のHTMLタグの中には「asp-」から始まる属性が登場します。この部分は実行時にタグヘルパーによってしかるべき処理が行われ、結果のHTMLに変換されます。

2つ目のポイントは<input asp-for="X"/>です。

これは、BindProperty属性がついているモデルのXプロパティと連動させるためのタグヘルパーです。 これが付いているとここにはモデルのXプロパティの値が自動的に表示されます。

3つ目のポイントは@Model.Answerです。

これはモデルのAnswerの項目の値を表します。

最後、4つ目のポイントは<button asp-page-handler="Add">Add</button>です。

ここにもタグヘルパーが使われており、asp-page-handlerは呼び出されるサーバー側のメソッドを指定できるようです。 ここではformのmethodがpostなので、Addのサーバー側はハンドラーはOnPostAddという名前になります。 つまり、このボタンをクリックするとサーバー側のOnPostAddメソッドが呼び出されるということです。

そこで、足し算用のメソッドと引き算用のメソッドもモデル(Index.cshtml.cs)に追加してしましょう。 次のようになります。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoreEmpty.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public int X { get; set; }

        [BindProperty]
        public int Y { get; set; }

        public int Answer { get; set; }

        public void OnPostAdd()
        {
            Answer = X + Y;
        }

        public void OnPostSubtract()
        {
            Answer = X - Y;
        }
    }
}
■リスト5:

これで完成です。

実行して画面を表示しXとYに好きな数字を入力してください。Addをクリックすると足し算の結果が表示され、Subtractをクリックすると引き算の結果が表示されます。

備考

タグヘルパーを全体で使用する

今回はタグヘルパーを使用するための@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpersをページ内に直接記述しましたが、Pagesフォルダー内に_ViewImports.cshtmlというファイルを追加し、次のように記述すると全ページでタグヘルパーが使用できるようになり個別のページ内では記述が不要になるようです。

@using CoreEmpty
@namespace CoreEmpty.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
■リスト6:_ViewImports.cshtml

構造体へのバインディング

今回はX, Yという個別の変数にBindProperty属性を適用させましたが、自作の構造体を型としたプロパティにBindProperty属性を適用することでデータをまとまりとして扱うこともできます。