尝试在 Blazor 项目中生成 html

Answer 1

有多种方法可以实现您想要的目标。我将列出一些选项/想法。

1. 第一个选项是在 html 部分内使用 for 循环：

<form method="post" action="">
        
    Groups<br />
    <select @bind="groups">
        @for (int i = 1; i <= 16; i++)
        {
            <option value="@i">@i</option>
        }
    </select>
</form>

<p>Selected Value: @groups</p>

<div>
    @for (int i = 1; i <= groups; i++)
    {
        <div class="leftBox">
            
        </div>

        <div class="middleBox">

        </div>

        <div class="rightBox">

        </div>
    }
</div>

@code {

    int groups = 1;
}

2. 您在单独的 Razor 组件中添加 for 循环。

例如：

GroupView.razor

：

@for (int i = 1; i <= NumberOfGroups; i++)
{
    <div class="leftBox">

    </div>

    <div class="middleBox">

    </div>

    <div class="rightBox">

    </div>
}

@code {
    [Parameter] 
    public int NumberOfGroups { get; set; }
}

并像这样使用它：

<form method="post" action="">

    Groups<br />
    <select @bind="groups">
        @for (int i = 1; i <= 16; i++)
        {
            <option value="@i">@i</option>
        }
    </select>
</form>

<p>Selected Value: @groups</p>

<div>
    <GroupView NumberOfGroups="groups" />
</div>

@code {

    int groups = 1;
}

3. 创建一个返回

   RenderFragment

   类似于您最初意图的方法：

<form method="post" action="">

    Groups<br />
    <select @bind="groups">
        @for (int i = 1; i <= 16; i++)
        {
            <option value="@i">@i</option>
        }
    </select>
</form>

<p>Selected Value: @groups</p>

<div>
    @MakeGroups()
</div>

@code {
    
    int groups = 1;

    private RenderFragment MakeGroups()
    {
        return (__builder) =>
        {
            for (int i = 1; i <= groups; i++)
            {
                <div class="leftBox">
                </div>
    
                <div class="middleBox">
                </div>
    
                <div class="rightBox">
                </div>
            }
        };
    }
}