[Razor Pages 入門] その5 条件分岐(if文)

スポンサーリンク

今回は、 Razor における条件分岐(if文)の使用方法について説明します。

if 文

何かしらのプログラミング言語を使用したことがある場合は、条件分岐と聞くと真っ先に if 文が思い浮かぶのではないでしょうか。

Razor でも if 文を使用することができますので、基本的な使用方法を見ていきましょう。

if 文の基本

もっとも基本的な if 文の構文は以下の通りです。

@if (条件式) { 
  条件式が成立した場合に実行するステートメント
}

以下に例を示します。

この例では、現在日時の「時」を取得して、if 文で 18以降かを判定します。18時以降であれば、「Good evening!!」を表示します。

if文の使用例

@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>
    @{
        var hour = DateTime.Now.Hour;
    }

    @if (hour >= 18)
    {
        <p>Good evening!!</p>
    }
    
</div>
if 文での出力

if 文での出力

else を使用する

if 文が成り立たなかった場合に使用するのが else 文です。

構文は C# と同様で以下のように記述します。

@if (条件式) { 
  条件式が成立した場合に実行するステートメント
} else {
  条件式が成立しなかった場合に実行するステートメント
}

以下に例を示します。

この例では、現在日時の「時」を取得して、if 文で 18以降かを判定します。18時以降であれば、「Good evening!!」を、18時より前は「Hello!!」を表示します。

@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>
    @{
        var hour = DateTime.Now.Hour;
    }

    @if (hour >= 18)
    {
        <p>Good evening!!</p>
    } else {
        <p>Hello!!</p>
    }
    
</div>
else の使用

else の使用

else if を使用する

if 文以外にも条件式を使用したい場合は、else if を使用します。else if は必要に応じていくつでも使用することができます。

構文は C# と同様で以下のように記述します。

@if (条件式) { 
  条件式が成立した場合に実行するステートメント
} else if (条件式) {
  else if の条件式が成立した場合に実行するステートメント
}

以下に例を示します。

この例では、現在日時の「時」を取得して、if 文で 18以降かを判定します。12時以前であれば、「Good emorning!!」を表示します。

@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>
    @{
        var hour = DateTime.Now.Hour;
    }

    @if (hour >= 18)
    {
        <p>Good evening!!</p>
    } else if (hour < 12) {
        <p>Good morning!!</p>
    } else {
        <p>Hello!!</p>
    }
    
</div>
else if の使用

else if の使用

Please follow and like us:

コメント

タイトルとURLをコピーしました