Html help - вложенные UL и LI

Question

Я хочу добиться чего-то вроде этого:

<li><a href="#">Item1</a>
                        <ul>
                            <li><a href="#">Item2</a></li>
                            <li>
                                <a href="#">Item3</a>
                                <ul>
                                    <li>
                                        <a href="#">Item4</a>
                                        <ul>
                                            <li>
                                                <a href="#">Item5</a>
                                                <ul>
                                                    <li>
                                                        <a href="#">Item6</a>
                                                        <ul>
                                                            <li> <a href="#">Item7</a> </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li> <a href="#">Item8</a> </li>
                        </ul>
                    </li>

Элемент 1 и т. Д. Взят из словаря, который может меняться в зависимости от ввода пользователя.Ниже показано, что я пробовал с моим приложением MVC в представлении:

    @foreach (var stp in Model.stepData)
{
        <li><a href="#">@stp.Key</a></li>
        <ul>
            @for (int i = 0; i < stp.Value.Count; i++)
    {
        <li><a href="#">@stp.Value[i]</a></li>

}
        </ul>
}

Я знаю, что хочу добавить

• в цикле @ stp.Value ... но это должно бытьоткрыть .. закрывающие теги должны быть после того, как написан последний в этой итерации.Поэтому я подумал, что, может быть, еще один цикл для ввода тега ... но это не работает вообще.Возможно ли мне добиться этого в HTML?код того, что я пробовал:

  @for (int i = 0; i < stp.Value.Count; i++)
      {
          <ul><li><a href="#">@stp.Value[i]</a></li>
  
  }
  @for(int i = 0; i<stp.Value.Count;i++){</ul>}
  

  TIA за вашу помощь.

  Попробовал ответ ниже, но получил не удалось найти listItems в текущем контексте в цикле, и он также жаловалсяслишком много символов в символьном литерале при использовании @for.

  Целевой платформой является .Net Core 2.0;MVC 5

Answer 1

Внесены небольшие изменения в ответ выше, чтобы он работал с циклом бритвы: `

    <script>
        var list = document.getElementById('valueList');
        var listItem = ''; 
        var count = 0;
        @for (int i = 0; i<stp.Value.Count; i++) { 
            <text> 
        listItem += '<ul><li><a href="#">' + '@stp.Value[i]' + '</a>'
        count = i;
            </text>
        }
        for (var i = 0; i <=count; i++) {
            listItem += '</li></ul>'
        }
            list.innerHTML = listItem;

    </script>

`

Answer 2

Это должно перебрать stp.Value и возвращать каждый элемент, завернутый в теги li, отображаемые в вашем родительском теге ul:

<ul id="myList">
    // stp.Value items here
</ul>

<script>
    var list = docment.getElementById('myList');
    var listItem = '';

    @for (int i = 0; i < stp.Value.Count; i++){
        listItem += '<li><a href="#">' + @stp.Value[i] + '</a></li>'
    }
    list.innerHTML = listItem;
</script>

Большинство инфраструктур MVC имеют собственный подход к этому, но так как выне указывалось, какой фреймворк вы используете, выше приведен общий подход к нему с использованием vanilla JS.