Best way to present a hierarchy of options for selection in MVC Razor view

I have to create a form that presents a hierarchy of options to the user and I can't seem to get it correct.

So if I have the following parent child relationship (the level is the stage the item is shown):

• Option1 (Level 1)
  • Option3 (Level 2)
    • Option16 (Level 4)
    • Option17 (Level 4)
    • Option18 (Level 4)
  • Option4 (Level 2)
    • Option11 (Level 3)
    • Option12 (Level 3)
  • Option5 (Level 2)
    • Option13 (Level 3)
    • Option14 (Level 3)
    • Option15 (Level 3)
  开发者_JAVA技巧
• Option2 (Level 1)
  • Option6 (Level 2)
  • Option7 (Level 2)
  • Option8 (Level 3)
  • Option9 (Level 3)
  • Option10 (Level 3)
• Option19 (Level 5)
• Option20 (Level 5)

These options are shown as radio buttons. All need to be hidden with the exception of those at Level 1 (option1 and option2.) The levels thow extra complexity into this as some options at one level pertain to another option at a higher level but not specifically the level a before.

When the user selects either Option1 or Option2 (they can only choose one per level) the next level of options show. For example, if the user selected option1 the Option3, Option4 and Option5 will show. If the user select Option2 after selecting Option1 the selections would reset and show Option6 to Option10.

Options19 and Option20 have no parent and are the last to show.

I amn currently doing the following and it is obviously not correct since I am asking this question.

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

My output looks like this (from the actual html output): Sorry couldn't get my code to show correctly in the editor.

---

Ok, so I believe I figured it out. I created a new entity called OptionLevels. Populated it with my levels and the options available at each level. This allowed me to iterate over the levels and thus over the options in each level.

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

I still need to figure out how to show hide the correct options depending on the previous selection option in the previous level.

---

This can also be done with multiple drop down boxes. populating the content of the second box only when the first is selected, using that selection value to query the data for the next box.