如何在 cshtml 上显示 IEnumerable 层次结构？答案

【问题标题】：How to show IEnumerable hierarchy on cshtml?如何在 cshtml 上显示 IEnumerable 层次结构？
【发布时间】：2015-09-22 01:43:23
【问题描述】：

我的 .cshtml 页面上有一个对象列表作为模型。

@model IEnumerable<someObject>

每个对象都有名称、id 和 parentid。

现在我将数据显示为简单列表：

<ul>
@foreach (var item in Model)
{
   <li>
   ...
   </li>
}
</ul>

它看起来像：

---------
|test1  | //id=1 parentid=0
|test2  | //id=2 parentid=1
|test3  | //id=3 parentid=2
|test4  | //id=4 parentid=2
|test5  | //id=5 parentid=0
---------

但我需要将其显示为：

---------------
|test1        | //id=1 parentid=0
|   test2     | //id=2 parentid=1
|      test3  | //id=3 parentid=2
|      test4  | //id=4 parentid=2
|test5        | //id=5 parentid=0
---------------

我怎样才能做到这一点？

【问题讨论】：

创建一个分层视图模型，以便您可以表示您想要显示的内容。也可以使用扩展递归生成层次结构（参考this example）
看起来......非常复杂......尤其是因为我只需要显示一次层次结构（如果多次使用，它可能是一个选项）

标签： c# asp.net-mvc asp.net-mvc-4

【解决方案1】：

您需要考虑使用递归函数。为此，您需要以可以在递归函数中使用的方式更改数据结构。请查看我创建的示例

public class Menu
{
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Name { get; set; }
    public List<Menu> ChildMenus { get; set; }
}

您可以在模型中使用上述类在您看来，您可以创建递归函数，如下所示：

@model List<TestNs.Models.Menu>

<div>
@DisplayMenu(Model)
</div>

@helper DisplayMenu(List<Menu> menuItems)
{
    <ul>
        @foreach (var item in menuItems)
        {
            <li>
                @item.Name
                @if (item.ChildMenus != null && item.ChildMenus.Any())
                {
                    @DisplayMenu(item.ChildMenus)
                }
            </li>
        }
    </ul>
}

最后，您可以从您的控制器中准备菜单并调用将其发送到您的视图。请使用以下示例：

   public ActionResult Index()
    {
        var menu = new List<Menu>
        {
            new Menu
            {
                Id = 1,
                ParentId = 0,
                Name = "Home",
                ChildMenus = new List<Menu>
                {
                    new Menu
                    {
                        Id = 2,
                        ParentId = 1,
                        Name = "Business",
                        ChildMenus = null
                    },
                    new Menu
                    {
                        Id = 3,
                        ParentId = 1,
                        Name = "Social",
                        ChildMenus = new List<Menu>
                        {
                            new Menu
                            {
                                Id = 4,
                                ParentId = 3,
                                Name = "Educ",
                                ChildMenus = null
                            },
                            new Menu
                            {
                                Id = 5,
                                ParentId = 3,
                                Name = "opp",
                                ChildMenus = null
                            }
                        },
                    }
                },
            } 
        };
        return View(menu);
    }
}

穿上它，看看如何实现你想要的。当然，您需要从数据源中提取数据。我希望这可以帮助您解决您的问题。尽情享受吧！

【讨论】：

【解决方案2】：

对于这种情况，您始终可以使用 DisplayTemplate 和 EditorTemplate。

您应该在Views\Shared 中创建文件夹EditorTemplates(DisplayTemplates) 并创建文件someObject.cshtml。

在这个文件中你应该这样做：

@model MVC.ViewModels.someObject

<li>
@Html.HiddenFor(x => x.Id) <-- here you can putt all properties that you need
@if (Model.SubObjects != null && Model.SubObjects.Any())
{
    <ul>
        @Html.EditorFor(x => x.Translates)
    </ul>
}
</li>

但在这种情况下，您应该在ViewModel 中而不是ParentId，而是SubObjects 的集合，我的意思是：

public class someObject
{
   public int Id {get; set;}
   public IEnumerable<someObject> SubObjects {get; set;}
}

然后在你的视图上你可以像这样使用它：

@model IEnumerable<someObject>

<ul>
   @Html.EditorForModel()
</ul>

请注意，您现在不需要任何 for 或 foreach。

【讨论】：