ASP.NET 显示为手风琴的分类项目的 MVC 列表

Question

我目前有一个页面显示按类别和排序顺序排序的所有项目的列表。该页面必须包含“所有”项目，并且用户应该能够 hide/unhide 使用手风琴/折叠面板按类别分类的项目。

我有以下简化模型：

public class Basket
{
    public List<Item> Items { get; set; }
}

public class Item
{
    public string Category { get; set; }
    public string Name { get; set; }
    public int SortOrder { get; set; }
}

从我的控制器传递到我的视图的对象：

Basket model = new Basket()
{
    Items = new List<Item>()
    {
        new Item(){ Category = "CategoryA", SortOrder = 1, Name = "A001" },
        new Item(){ Category = "CategoryA", SortOrder = 2, Name = "A002" },
        new Item(){ Category = "CategoryA", SortOrder = 3, Name = "A003" },
        new Item(){ Category = "CategoryB", SortOrder = 1, Name = "B001" },
        new Item(){ Category = "CategoryB", SortOrder = 2, Name = "B002" }
    }
};

return View(model);

我的篮子模型显示模板：

@model SampleApp.Models.Basket

<div>
    @Html.DisplayFor(model => model.Items)
</div>

我的项目模型显示模板：

@model SampleApp.Models.Item

@{
    string cat = Model.Category;
}

<div>
    @if (Model.SortOrder == 1)
    {
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".@cat">@cat</button>
    }

    <div class="collapse @cat">
        @Html.DisplayFor(model => model.Category) -
        @Html.DisplayFor(model => model.SortOrder) -
        @Html.DisplayFor(model => model.Name)
    </div>
</div>

我想要的结果：

<div>
    <div>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".CategoryA">CategoryA</button>

        <div class="CategoryA collapse in" aria-expanded="true" style="">
            <div>CategoryA - 1 - A001</div>
            <div>CategoryA - 2 - A002</div>
            <div>CategoryA - 3 - A003</div>
        </div>
    </div>

    <div>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".CategoryB">CategoryB</button>

        <div class="CategoryB collapse in" aria-expanded="true" style="">
            <div>CategoryB - 1 - B001</div>
            <div>CategoryB - 2 - B002</div>
        </div>
    </div>
</div>

我得到的结果：

<div>
    <div>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".CategoryA">CategoryA</button>

        <div class="CategoryA collapse in" aria-expanded="true" style="">CategoryA - 1 - A001</div>
    </div>
    <div>
        <div class="CategoryA collapse in" aria-expanded="true" style="">CategoryA - 2 - A002</div>
    </div>
    <div>
        <div class="CategoryA collapse in" aria-expanded="true" style="">CategoryA - 3 - A003</div>
    </div>

    <div>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".CategoryB">CategoryB</button>

        <div class="CategoryB collapse in" aria-expanded="true" style="">CategoryB - 1 - B001</div>
    </div>
    <div>
        <div class="CategoryB collapse in" aria-expanded="true" style="">CategoryB - 2 - B002</div>
    </div>
</div>

Answer 1

我没有使用 asp.net mvc 4，但我知道你的问题是什么。你需要三个视图模板而不是两个。

一个用于购物篮模型，一个用于具有特定类别的一组项目，一个用于该类别中的每个项目。您缺少项目组视图。

@model List<SampleApp.Models.Item>

@{
    var groupItems = Model.GroupBy(item => item.Category).Select(item => item.Key);
}

<div>
    @if (Model.SortOrder == 1)
    {
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".@cat">@cat</button>
    }

   @foreach(var groupItem in groupItems)
   {
      var itemsInsideAGroup = Model.Where(item => item.Category.Equals(groupItem));

      <div class="@groupItem collapse in" aria-expanded="true" style="">
          <!-- Here load item template with loop for itemsInsideAGroup -->
      </div>
   }
</div>

物品模板是这样的

@model SampleApp.Models.Item

<div>
     @Html.DisplayFor(model => model.Category) -
     @Html.DisplayFor(model => model.SortOrder) -
     @Html.DisplayFor(model => model.Name)
</div>

ASP.NET 显示为手风琴的分类项目的 MVC 列表

ASP.NET MVC List of Categorized Items to Display as Accordion

asp.net-mvc-4

twitter-bootstrap-3