如何在MVC 5视图中缩进字符串

本文关键字：缩进 字符串 视图 MVC | 更新日期: 2023-09-27 18:28:33

我是ASP.net和MVC 5的新手。

我使用asp.net教程创建了一个测试项目。

我正在尝试从基于另一列的表中缩进文本。

所以我有一张看起来像下面的表格

 Title, Level.
 A       1
 B       2
 c       2
 D       3
 E       1

根据我想要在mvc视图中显示的级别，通过在前面添加选项卡，如下所示。

A
  B
  C
    D
E

我得到的都是

A
B
C
D

我不确定如何添加标签。下面是我的代码

@foreach (var item in Model) {
<tr>
   <td>
        @Html.Label(item.Title)              
    </td>
</tr>
}

谢谢。

如何在MVC 5视图中缩进字符串

除了ArsenMkrt的出色回答之外，您还可以使用动态填充：

@foreach (var item in Model) {
    <tr>
       <td style="padding-left: @((item.Index-1)*10)px;">
            @Html.Label(item.Title)              
        </td>
    </tr>
}

这将产生类似的东西

<table border=1>
  <tr>
    <td style="padding-left: 0px;">A</td>
  </tr>
  <tr>
    <td style="padding-left: 20px;">B</td>
  </tr>
  <tr>
    <td style="padding-left: 20px;">C</td>
  </tr>
  <tr>
    <td style="padding-left: 40px;">D</td>
  </tr>
  <tr>
    <td style="padding-left: 0px;">E</td>
  </tr>
</table>

创建一个通过递归深入的函数

@helper TreeView(List<Items> items, int level)
{
    foreach (var item in items.Where(i=>i.level == level))
    {
    <li>
        <span>@item.Title</span>
        <ul>
            @TreeView(items, level+1)
        </ul>
    </li>
    }
}

在视图上添加

<ul>
    @TreeView(Model, 1)
</ul>

并将列表样式设置为none以删除项目符号

ul
{
    list-style-type: none;
}
相关文章：