[C#]RazorアプリケーションのViewの記述方法とは？サンプルコードを用いて解説

.NET開発者のためのブログメディア

SE: C#でのRazorアプリケーションのViewについて教えてください。

PM: C#でのRazorアプリケーションのViewについていくつか紹介します。

[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は以下のようになっています。

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()
        {

        }
    }
}

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に相当します。

@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>

@page

@model IndexModel

ViewData["Title"] = "Home page";

}

<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はメソッドはページを開いた際に実行されます。

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";
            }
        }
    }
}

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で値を取得できます。

@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>

@page

@model IndexModel

ViewData["Title"] = "Home page";

}

<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>

実行すると、ブラウザに以下のように表示されます。

Hello Guest

1	Hello Guest

Nameプロパティが空なのでGuestが表示されました。ブラウザのURLに、Nameプロパティを指定してみます。
https://localhost:ポート番号?Name=Taro

Enterキーをクリックすると、画面が更新されて以下のように表示されます。

Hello Taro

1	Hello Taro

プロパティが受け渡せていることが分かります。

if文

C#でのRazorアプリケーションのViewで、if文（条件分岐）の記述方法を紹介します。Pages\Index.cshtmlに以下を追記します。

@{
    var color = "red";
}

var color = "red";

}

Pages\Index.cshtmlに、if文を以下のように記述します。

<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>

<div>

@if (color == "red")

{

}

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に以下を追記します。

@{
    var colors = new[] { "red", "green", "blue" };
}

var colors = new[] { "red", "green", "blue" };

}

Pages\Index.cshtmlに、foreach文を以下のように記述します。

<div>
@foreach (string color in colors)
{
    <p>@color</p>
}
</div>

<div>

@foreach (string color in colors)

{

<p>@color</p>

}

</div>

実行すると、colors配列の要素がすべて表示されます。

メソッド

C#でのRazorアプリケーションのViewで、メソッドの記述方法を紹介します。Pages\Index.cshtmlに以下を追記します。

@functions {

    // 加算メソッド
    int Add(int val1, int val2)
    {
        return val1 + val2;
    }

    // 減算メソッド
    int Sub(int val1, int val2)
    {
        return val1 - val2;
    }
}

@functions {

// 加算メソッド

int Add(int val1, int val2)

{

return val1 + val2;

}

// 減算メソッド

int Sub(int val1, int val2)

{

return val1 - val2;

}

Pages\Index.cshtmlに、メソッドの呼び出しを記述します。

<div>
    <p>2 + 1 = @Add(2, 1)</p>
    <p>2 - 1 = @Sub(2, 1)</p>
</div>

<div>

</div>

実行すると、メソッドの実行結果が表示されます。

SE: C#でのRazorアプリケーションのViewについてわかりました。

PM: C#でのViewについての知識を深めて、実際にコードを書いてみましょう。

まとめ

いかがでしたでしょうか。C#でのRazorアプリケーションのViewについて説明しました。ここでは、C#でのRazorプロジェクトの作成方法、プロパティの取得方法、Viewでのif文やforeach文、メソッドの記述方法について紹介しました。

ぜひご自身でC#のソースコードを書いて、理解を深めてください。

FEnetへの登録は左下のチャットが便利です経験者優遇! 最短10秒!

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

公開:'20/03/17 更新:'21/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

公開:'20/03/16 更新:'21/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

公開:'20/03/05 更新:'20/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

[C#]RazorアプリケーションのViewの記述方法とは？サンプルコードを用いて解説

[C#]RazorアプリのViewについて

Razorプロジェクトの作成

プロパティの取得

if文

foreach文

メソッド

まとめ

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務