Question

我必须创建一个向用户提供选项层次结构的表单，我似乎无法正确理解。

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

选项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）之外，所有这些都需要隐藏。由于某个级别的某些选项属于更高级别的另一个选项但不是特定级别之前的级别，因此这些级别会增加额外的复杂性。

当用户选择Option1或Option2（他们每个级别只能选择一个）时，会显示下一级别的选项。例如，如果用户选择了Option3，则选项Option3，Option4和Option5将显示。如果用户在选择Option1后选择Option2，则选择将重置并向Option10显示Option6。

Options19和Option20没有父级，是最后一个显示。

我目前正在做以下事情，因为我问这个问题显然不正确。

@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输出）：抱歉无法让我的代码在编辑器中正确显示。

enter image description here

Answer 1

好的，所以我相信我弄明白了。我创建了一个名为OptionLevels的新实体。用我的级别和每个级别的可用选项填充它。这使我可以遍历关卡，从而遍历每个级别的选项。

@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>      
    }

我仍然需要弄清楚如何显示隐藏正确的选项，具体取决于上一级别中的先前选择选项。

Answer 2

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

在MVC Razor视图中呈现选择层次结构的最佳方式

2 个答案: