ASP.NET Core BlazorのRazor内でif文を使う方法について説明します。

ifで条件を満たしたときだけ表示する

Razorページの中でifによる条件分岐をするには @if (式) { ... } を使います。 以下は商品の一覧が格納されている変数 products の中で、プロパティ IsActive が有効な商品のみifで表示する例です。

Components/Pages/Sample.razor：

@page "/if"

@using BlazorSample.Models

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>商品名</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in products)
        {
            @* ここのif文で条件を満たすもののみ表示します *@
            @if (product.IsActive)
            {
                <tr>
                    <td>@product.Id</td>
                    <td>@product.Name</td>
                </tr>
            }
        }
    </tbody>
</table>

@code
{
    private List<Product> products = new List<Product>()
        {
            new Product() { Id = 1, Name = "Product1", IsActive = true },
            new Product() { Id = 2, Name = "Product2", IsActive = false },
            new Product() { Id = 3, Name = "Product3", IsActive = true },
        };

    private string selectedProductName = "";

    private void AddCart(Product product)
    {
        selectedProductName = product.Name;
    }
}

Models/Product.cs：

namespace BlazorSample.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
        public bool IsActive { get; set; } = true;
    }
}

以上です。

参考資料

• tex2e/BlazorSample: Blazorの検証環境