[C#]Razorアプリケーションの作り方とは？プロジェクトの作成方法・アプリケーションの実行方法・プロパティの設定方法・Formの作成方法
![[C#]Razorアプリケーションの作り方とは？プロジェクトの作成方法・アプリケーションの実行方法・プロパティの設定方法・Formの作成方法](https://www.fenet.jp/dotnet/column/wp-content/uploads/2020/04/42-1-960x320.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のソースコードを書いて、理解を深めてください。
