Лучший способ представить иерархию параметров для выбора в представлении MVC Razor

Question

Мне нужно создать форму, которая представляет пользователю иерархию опций, и я не могу ее исправить.

Так что, если у меня есть следующие родительские дочерние отношения (уровень является этапомпредмет показан):

• Вариант 1 (уровень 1)
  • Вариант3 (уровень 2)
    • Вариант16 (уровень 4)
    • Option17 (Уровень 4)
    • Option18 (Уровень 4)
  • Option4 (Уровень 2)
    • Option11 (Уровень 3)
    • Option12 (Уровень 3)
  • Option5 (Уровень 2)
    • Option13 (Уровень 3)
    • Option14 (Уровень 3)
    • Option15 (Уровень 3)
• Option2 (Уровень 1)
  • Option6 (Уровень 2)
  • Option7 (Уровень 2)
  • Опция8 (Уровень 3)
  • Опция9 (Уровень 3)
  • Опция10 (Уровень 3)
• Опция19 (Уровень 5)
• Option20 (Уровень 5)

Эти параметры отображаются в виде переключателей.Все они должны быть скрыты, за исключением тех, которые находятся на уровне 1 (вариант 1 и вариант 2). Уровни вносят дополнительную сложность в это, так как некоторые параметры на одном уровне относятся к другому варианту на более высоком уровне, но не конкретно к уровню до.

Когда пользователь выбирает либо Option1, либо Option2 (они могут выбрать только один на уровень), отображается следующий уровень параметров.Например, если пользователь выбрал опцию 1, появится опция 3, опция 4 и опция 5.Если пользователь выберет «Вариант 2» после выбора «Варианта 1», выбор будет сброшен и отобразит «Вариант 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): Извините, мне не удалось правильно отобразить мой код в редакторе.

Answer 1

Это также можно сделать с помощью нескольких раскрывающихся списков.заполнять содержимое второго поля только тогда, когда выбрано первое, используя это значение выбора для запроса данных для следующего поля.

Answer 2

Хорошо, так что я думаю, я понял это.Я создал новую сущность под названием 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>      
    }

Мне все еще нужно выяснить, как отобразить скрытые правильные параметры в зависимости от предыдущего варианта выбора на предыдущем уровне.