Asp.net mvc 在MVC Razor视图中显示选项层次结构的最佳方法

我必须创建一个表单，向用户呈现选项的层次结构，但我似乎无法正确获取它

因此，如果我有以下父子关系（级别是显示项目的阶段）：

• 选项1（1级）
  • 选项3（2级）
    • 选项16（第4级）
    • 选择17（第4级）
    • 选项18（第4级）
  • 选项4（第2级）
    • 选项11（第3级）
    • 选择12（第3级）
  • 选项5（第2级）
    • 选项13（第3级）
    • 选择14（第3级）
    • 选项15（第3级）
• 选项2（1级）
  • 选项6（第2级）
  • 选项7（第2级）
  • 选项8（第3级）
  • 选项9（第3级）
  • 选项10（第3级）
• 选项19（第5级）
• 选项20（第5级）

这些选项显示为单选按钮。除1级（选项1和选项2）的选项外，所有选项都需要隐藏。由于一个级别上的某些选项与更高级别上的另一个选项相关，但不具体是之前的a级选项，因此，这两个级别具有额外的复杂性

当用户选择选项1或选项2（每个级别只能选择一个）时，将显示下一级别的选项。例如，如果用户选择了选项1，将显示选项3、选项4和选项5。如果用户在选择选项1后选择选项2，则选项将重置并显示选项6至选项10

选项19和选项20没有父项，是最后显示的

我目前正在做以下工作，显然这是不正确的，因为我问这个问题

@using (Html.BeginForm())
    {                
            int prevLevel = 0;
            foreach (var option in Model.Options)
            {
                //close previous Div if we are starting a new level and we are not at the start
                if (option.LevelId != prevLevel && Model.Options.IndexOf(option) != 0)
                {
                    @:</div>
                    @:<div class="option-section" id="Level@(option.LevelId)">
                }
                else if(Model.Options.IndexOf(option) == 0)//This should only occur at the start
                {
                    @:<div class="option-section" id="Level@(option.LevelId)">
                }

                    @Html.RadioButton("OptionIds[" + (option.LevelId - 1) + "]", option.OptionId, false, new { parent = option.ParentOptionId }) 
                    @option.OptionName

                prevLevel = option.LevelId;

            }

        <div class="buttons">
            <input type="submit" value="Continue" class="button" />
        </div>      
    }

@使用（Html.BeginForm（））
{                
int-prevLevel=0；
foreach（Model.Options中的var选项）
{
//如果我们正在开始一个新的级别，而我们还没有开始，请关闭上一个Div
if（option.LevelId！=prevLevel&&Model.Options.IndexOf（option）！=0）
{
@:
@:
}
else if（Model.Options.IndexOf（option）==0）//这应该只在开始时发生
{
@:
}
@RadioButton（“OptionId[”+（option.LevelId-1）+“]”，option.OptionId，false，新建{parent=option.ParentOptionId}）
@option.OptionName
prevLevel=option.LevelId；
}
}

我的输出如下（从实际的html输出）： 抱歉，无法在编辑器中正确显示我的代码

---

好的，我想我已经解决了。我创建了一个名为OptionLevel的新实体。用我的级别和每个级别的可用选项填充它。这使我能够迭代各个级别，从而遍历每个级别中的选项

@using (Html.BeginForm())
    {
        foreach (var Level in Model.Levels)
        {
            @:<div class="level" id="Level@(Level.LevelId)">
            foreach (var option in Level.Options)
            { 
                @:<div class="option" id="Parent@(option.ParentOptionId)">
                @Html.RadioButton("OptionIds[" + (option.LevelId - 1) + "]-",
                        option.OptionId,
                        false, new { parent = option.ParentOptionId }
                        ) 
                @option.OptionName 
                @:</div>
            } 
            @:</div>                     
        }

        <div class="buttons">
            <input type="submit" value="Continue" class="button" />
        </div>      
    }

@使用（Html.BeginForm（））
{
foreach（Model.Levels中的var级别）
{
@:
foreach（Level.Options中的var选项）
{ 
@:
@RadioButton（“optionId[”+（option.LevelId-1）+“]-”，
option.OptionId，
false，新建{parent=option.ParentOptionId}
) 
@option.OptionName
@:
} 
@:                     
}
}

---

我仍然需要找出如何根据上一级中的上一个选择选项显示和隐藏正确的选项。

这也可以通过多个下拉框来完成。仅当选择第一个框时才填充第二个框的内容，使用该选择值查询下一个框的数据。

我想我可能已经找到了答案。我认为我应该做的是使用Levels类，它包含每个级别的所有选项。我将尝试一下，如果它有效的话，我会更新这个。对我的ID的使用吹毛求疵。据我所知，我应该只使用一次ID。但是，在本例中，我使用ID来帮助选择要显示的选项。有人知道更好的方法吗？想更新这个，因为我找到了更好的方法，那就是使用模板。使用正确的模型（即OptionLevels vs Options）仍然可以解决我的问题。然而，使用模板可以提供更清晰的代码。例如，见。