[C#]Razorアプリケーションの作り方とは?プロジェクトの作成方法・アプリケーションの実行方法・プロパティの設定方法・Formの作成方法
![[C#]Razorアプリケーションの作り方とは?プロジェクトの作成方法・アプリケーションの実行方法・プロパティの設定方法・Formの作成方法](https://www.fenet.jp/dotnet/column/wp-content/uploads/2020/04/42-1-1024x683.jpg)
エンジニア
マネージャー
[C#]Razorアプリケーションの作り方とは?
今回は、C#でのRazorアプリケーションの作り方について説明します。Razorとは、ASP.NET MVC 3から導入されているビュー・エンジンです。自動的に作成してくれる部分があるので、効率的にWebアプリケーションの開発が可能です。
ここでは、C#でのRazorプロジェクトの作成方法、アプリケーションの実行方法、プロパティの設定方法、Formの作成方法について紹介します。統合開発環境には、Microsoft Visual Studio Community 2019 Previewを使用します。
C#でのRazorページの作り方に興味のある方はぜひご覧ください。
プロジェクトの作成
C#でRazorのプロジェクトを作成します。まず、「ASP.NET Core Web アプリケーション」のプロジェクトを新規作成します。次に、新しいASP.NET Core Web アプリケーション画面で「Web アプリケーション」を選択して、作成ボタンをクリックします。
プロジェクトを生成すると、フォルダやファイルが自動生成されます。Pages\Index.cshtml.csは以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using Microsoft.Extensions.Logging; namespace RazorApplication1.Pages { public class IndexModel : PageModel { private readonly ILogger<IndexModel> _logger; public IndexModel(ILogger<IndexModel> logger) { _logger = logger; } public void OnGet() { } } } |
Pages\Index.cshtmlは以下のようになっています。
1 2 3 4 5 6 7 8 9 10 |
@page @model IndexModel @{ ViewData["Title"] = "Home page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> |
C#でRazorのプロジェクトが作成できました。
アプリケーションの実行
C#でRazorアプリケーションの実行方法を紹介します。VisualStudioの実行ボタン「IIS Express」をクリックするとブラウザが起動します。
ブラウザには「Welcome」と表示されます。
プロパティの設定
C#でRazorページのプロパティ設定方法を紹介します。Pages\Index.cshtml.csを以下のように修正します。BindPropertyでプロパティをバインドします。
BindPropertyはPostメソッドに対してのみ使用可能ですが、「SupportsGet = true」を付与することで、Getメソッドでも利用できるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
public class IndexModel : PageModel { // プロパティをバインド。Getでも使用可能にする [BindProperty(SupportsGet = true)] public string Name { get; set; } private readonly ILogger<IndexModel> _logger; public IndexModel(ILogger<IndexModel> logger) { _logger = logger; } public void OnGet() { // Nameプロパティが空の場合は「Guest」を設定 if (string.IsNullOrWhiteSpace(Name)) { Name = "Guest"; } } } |
Pages\Index.cshtmlを以下のように修正します。@Model.Nameとすることで、Nameプロパティを参照できます。
1 2 3 4 5 6 7 8 9 10 |
@page @model IndexModel @{ ViewData["Title"] = "Home page"; } <div class="text-center"> <h1 class="display-4">Welcome @Model.Name</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> |
実行すると、ブラウザに以下のように表示されます。
1 |
Welcome Guest |
Nameプロパティが空なのでGuestが表示されました。ブラウザのURLに、Nameプロパティを指定してみます。
https://localhost:ポート番号?Name=Taro
Enterキーをクリックすると、画面が更新されて以下のように表示されます。
1 |
Welcome Taro |
プロパティが受け渡せていることが分かります。
Formの作成
C#でRazorページにFormを作成する方法を紹介します。Pagesを右クリック→追加(D)→新しいフォルダ(D) でFormsを追加します。次にFormsを右クリック→追加(D)→RazorページでAddUser.cshtmlを追加します。
Pages\Forms\AddUser.cshtmlが自動生成されます。内容は以下のようになっています。
1 2 3 4 |
@page @model RazorApplication1.Pages.Forms.AddUserModel @{ } |
Pages\Forms\AddUser.cshtml.csの内容は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; namespace RazorApplication1.Pages.Forms { public class AddUserModel : PageModel { public void OnGet() { } } } |
次にModelクラスを作成します。トップを右クリック→追加(D)→新しいフォルダ(D) でModelsを追加します。次に、Modelsを右クリック→追加(D)→クラス でUserModel.csを追加します。
Models\UserModel.csが自動生成されます。内容は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace RazorApplication1.Models { public class UserModel { } } |
Models\UserModel.csを以下のように修正します。プロパティを2つ追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace RazorApplication1.Models { public class UserModel { public string Name { get; set; } public int Age { get; set; } } } |
Pages\Forms\AddUser.cshtml.csを以下のように修正します。Formを作成するので、OnPostメソッドを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public class AddUserModel : PageModel { [BindProperty] public Models.UserModel user { get; set; } public void OnGet() { } public IActionResult OnPost() { if(ModelState.IsValid == false) { return Page(); } // Indexページにリダイレクトする。その際、user.Nameをプロパティに設定 return RedirectToPage("/Index", new { user.Name }); } } |
Pages\Forms\AddUser.cshtmlを以下のように修正します。asp-forでプロパティを指定します。
1 2 3 4 5 6 7 8 9 10 |
@page @model RazorApplication1.Pages.Forms.AddUserModel @{ } <form method="post"> <input type="text" asp-for="user.Name" placeholder="name" /> <input type="text" asp-for="user.Age" placeholder="age" /> <button type="submit">SUbmit</button> </form> |
Razorアプリを起動し、ブラウザから「https://localhost:ポート番号/Forms/AddUser」にアクセスします。nameとageを入力して「submit」ボタンをクリックしてください。ここではnameにJiro、ageに40を入力しました。
submitボタンをクリックするとIndexにリダイレクトされ、「Welcome Jiro」と表示されます。URLを確認すると、「https://localhost:ポート番号/?Name=Jiro」となっています。
エンジニア
マネージャー
まとめ
いかがでしたでしょうか。C#でのRazorアプリケーションの作り方について説明しました。ここでは、プロジェクトの作成方法、アプリケーションの実行方法、プロパティの設定方法、Formの作成方法について紹介しました。
ぜひご自身でC#のRazorのソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


C#新着案件New Job
システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務
月給29万~34万円東京都新宿区(新宿駅)システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半~40代の方活躍中/経験年数不問】/在宅勤務
月給41万~50万円東京都新宿区(新宿駅)デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務
月給29万~34万円神奈川県横浜市(桜木町駅)デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半~40代の方活躍中/経験年数不問】/在宅勤務
月給41万~50万円神奈川県横浜市(桜木町駅)基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務
月給29万~34万円東京都新宿区(西新宿駅)基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半~40代の方活躍中/経験年数不問】/在宅勤務
月給41万~50万円東京都新宿区(西新宿駅)