Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ASP.NET Core 2.0でRazor Pagesアプリケーションを作ろう

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/11/21 14:00

 2017年8月14日、「ASP.NET Core 2.0」が公開されました。今回は新たに登場した「Razor Pages」を使ったWebアプリケーションの作成を通してRazor Pagesの構成要素や基本的な実装方法、データバインディングの仕組みについて説明します。

目次

対象読者

  • 新しいASP.NET Coreの機能について知りたい方
  • MacやLinuxなどでASP.NET Coreアプリケーションを動かしたい方

検証環境

 本稿では、以下の環境で動作を確認しています。

  • Windows 10
  • macOS Sierra 10.12.6

Razor Pagesアプリケーションを作成しよう(1)

 前回も簡単に触れましたが、Razor PagesはASP.NET Core 2.0から導入された新機能です。ページコーディングの多いアプリケーションで重用されるように設計されており、ASP.NET Core MVCとは異なるアーキテクチャ/手法でWebアプリケーションを作成することができます。

Razor Pagesの構成要素

 Razor Pagesにおける主要なコンポーネントは「ページ」と「ページモデル」です。アプリケーションのプレゼンテーション層にあたるのがページで、ページの中で使用するデータを保持しているのがページモデルです。ページとページモデルはお互いにデータを共有しており、片方のアクションによってデータが変更されるともう片方に変更が反映される仕組みとなっています。これはMVVMデザインパターンのViewとViewModel間で行われる2方向データバインディングと同じものであるため、Razor PagesはASP.NET CoreにおけるMVVMパターンのWebアプリケーションフレームワークと位置づけることができます。

 図1はMVVMパターンとRazor Pagesの対応図です。ページとページモデルは前述の通りです。モデルに関してはページに依存しないビジネスロジックやデータベースアクセス等を行うレイヤで、MVCパターンのモデルとほぼ同じ責務を有しています。

図1 MVVMパターンとRazor Pagesの構成要素の対応図
図1 MVVMパターンとRazor Pagesの構成要素の対応図

Razor Pagesプロジェクトの作成

 ここからは、実際にプロジェクトの作成からRazor Pagesアプリケーションの起動までを行います。Razor Pagesに必要なコンポーネントを確認するために、空のWebアプリケーション用のプロジェクトテンプレートで、プロジェクトを作成していきます。

 .NET Core 2.0で使用可能なプロジェクトテンプレートを確認するには、コマンドラインで「dotnet new --help」と入力します。

図2 用意されているテンプレートの一覧
図2 用意されているテンプレートの一覧

 ここでは一からRazor Pagesアプリケーションを作成するため、「ASP.NET Core Empty」テンプレートを使います。「dotnet new」の後にプロジェクトテンプレートの短縮名(図中の「短い名前の列」)を、-oオプションの後にプロジェクト名を入力します。

リスト1 emptyテンプレートからプロジェクトを新規作成
$ dotnet new web -o razor-web-sample
テンプレート "ASP.NET Core Empty" が正常に作成されました。
・・・中略・・・
正常に復元されました。
$

 リスト1のように、エラーなくコマンドが実行されればプロジェクトの作成は成功です。

アプリケーションでのRazor Pagesの有効化

 次は、アプリケーション全体でRazor Pagesを使用可能とするための最小設定を追加していきます。プロジェクトのルートディレクトリにある「Starup.cs」を編集します。

リスト2 アプリケーションでRazor Pagesを有効にする設定(Startup.cs)
namespace Sample.RazorPages
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            // 以下を追加する(これでRazor Pagesが有効化される)
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            // 他の記述を削除して以下を追加する
            app.UseMvc();
        }
    }
}

 編集内容を保存し、一度アプリケーションを起動してみましょう。プロジェクトのルートディレクトリで「dotnet run」とコマンドを実行します。実行後に表示されるメッセージの「Now listening on: 」に続いて表示されているURLにブラウザからアクセスしてみると、「ページが見つかりません」といった画面(404ページ)が表示されるかと思います。

 図3のように、コンソール上にも「http://<表示されたアドレス:ポート>/」に対するGETリクエストがあり、結果として404エラーとなった旨のメッセージが表示されているかと思います。

図3 Startup.cs編集後のアプリケーションログ
図3 Startup.cs編集後のアプリケーションログ

 これは、アプリケーションのルートパスである「/」に対応するページが実装されていないために発生したエラーです。それではこのエラーを解消するページを、Razor Pagesを使って実装しましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 秋葉 龍一(アキバ リュウイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5