[C#]RazorアプリケーションのViewの記述方法とは？サンプルコードを用いて解説
![[C#]RazorアプリケーションのViewの記述方法とは？サンプルコードを用いて解説](https://www.fenet.jp/dotnet/column/wp-content/uploads/2020/08/pixta_34864428_M-960x320.jpg)
[C#]RazorアプリのViewについて
今回は、C#でのRazorアプリケーションのViewについて説明します。Razorとは、ASP.NET MVC 3から導入されているビュー・エンジンです。自動的に作成してくれる部分があるので、効率的にWebアプリケーションの開発が可能です。
ここでは、C#でのRazorプロジェクトの作成方法、プロパティの取得方法、Viewでのif文やforeach文、メソッドの記述方法について紹介します。
統合開発環境には、Microsoft Visual Studio Community 2019 Previewを使用します。
C#でのRazorアプリケーションのViewに興味のある方はぜひご覧ください。
Razorプロジェクトの作成
C#でRazorアプリケーションのプロジェクトを作成します。
Visual Studioを起動し、「ASP.NET Core Web アプリケーション」のプロジェクトを新規作成します。次に、新しいASP.NET Core Web アプリケーション画面で「Web アプリケーション」を選択して、作成ボタンをクリックします。
Razorプロジェクトを生成すると、フォルダやファイル群が自動生成されます。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は以下のようになっています。このcshtmlファイルがMVCのViewに相当します。
|
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> |
Visual Studioから実行ボタン「IIS Express」をクリックするとブラウザが起動します。ブラウザには「Welcome」と表示されます。C#でRazorアプリケーションが作成できました。以降の章でViewの記述方法について紹介します。
プロパティの取得
C#でのRazorアプリケーションのViewでプロパティを取得する方法を紹介します。Pages\Index.cshtml.csを以下のように修正します。OnGetはメソッドはページを開いた際に実行されます。
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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 WebApplication3.Pages { public class IndexModel : PageModel { private readonly ILogger<IndexModel> _logger; // プロパティをバインド。Getでも使用可能にする [BindProperty(SupportsGet = true)] public string Name { get; set; } // 変数宣言 public string Message; public IndexModel(ILogger<IndexModel> logger) { _logger = logger; } public void OnGet() { // 変数に値を設定 Message = "Hello"; // Nameプロパティが空の場合は「Guest」を設定 if (string.IsNullOrWhiteSpace(Name)) { Name = "Guest"; } } } } |
Pages\Index.cshtmlを以下のように修正します。@Model.Messageなどと記述することで、Viewで値を取得できます。
|
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">@Model.Message @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 |
Hello Guest |
Nameプロパティが空なのでGuestが表示されました。ブラウザのURLに、Nameプロパティを指定してみます。
https://localhost:ポート番号?Name=Taro
Enterキーをクリックすると、画面が更新されて以下のように表示されます。
|
1 |
Hello Taro |
プロパティが受け渡せていることが分かります。
if文
C#でのRazorアプリケーションのViewで、if文（条件分岐）の記述方法を紹介します。Pages\Index.cshtmlに以下を追記します。
|
1 2 3 |
@{ var color = "red"; } |
Pages\Index.cshtmlに、if文を以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div> @if (color == "red") { <p style="color:red;">red</p> } else if (color == "green") { <p style="color:green;">green</p> } else { <p>other color</p> } </div> |
実行すると、赤文字でredが表示されます。
foreach文
C#でのRazorアプリケーションのViewで、foreach文（繰り返し処理）の記述方法を紹介します。Pages\Index.cshtmlに以下を追記します。
|
1 2 3 |
@{ var colors = new[] { "red", "green", "blue" }; } |
Pages\Index.cshtmlに、foreach文を以下のように記述します。
|
1 2 3 4 5 6 |
<div> @foreach (string color in colors) { <p>@color</p> } </div> |
実行すると、colors配列の要素がすべて表示されます。
メソッド
C#でのRazorアプリケーションのViewで、メソッドの記述方法を紹介します。Pages\Index.cshtmlに以下を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@functions { // 加算メソッド int Add(int val1, int val2) { return val1 + val2; } // 減算メソッド int Sub(int val1, int val2) { return val1 - val2; } } |
Pages\Index.cshtmlに、メソッドの呼び出しを記述します。
|
1 2 3 4 |
<div> <p>2 + 1 = @Add(2, 1)</p> <p>2 - 1 = @Sub(2, 1)</p> </div> |
実行すると、メソッドの実行結果が表示されます。
まとめ
いかがでしたでしょうか。C#でのRazorアプリケーションのViewについて説明しました。ここでは、C#でのRazorプロジェクトの作成方法、プロパティの取得方法、Viewでのif文やforeach文、メソッドの記述方法について紹介しました。
ぜひご自身でC#のソースコードを書いて、理解を深めてください。
