Csharp try 在Blazor项目中生成html

有多种方法可以达到你想要的效果.我会列出几个选项/ idea .

1. 第一个 Select 是在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. 您可以在单独的blazor组件中添加for循环.

例如:GroupsComponent.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>
    <GroupsComponent 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>
            }
        };
    }
}