Question

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

@model IEnumerable<someObject>

每个对象都有name，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
---------------

我该如何实现？

Answer 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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

   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);
    }
}

把它放在上面，看看如何实现你想要的。当然，您需要从数据源中提取数据。我希望这可以帮助您解决您的问题。享受!!

Answer 2

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

您应该在EditorTemplates中创建文件夹DisplayTemplates（Views\Shared）并创建文件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。

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

2 个答案: