我目前有一個頁面，顯示按類別和SortOrder排序的所有專案的串列。該頁面必須包含 "所有 "專案，并且用戶應該能夠使用手風琴/可折疊面板按類別隱藏/不隱藏專案。
我有以下的簡化模型：
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"/span>, SortOrder = 1, Name = "A001"/span> },
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="clapse" 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>
<按鈕型別="按鈕" class="btn btn-info" data-toggle="折疊" data-target=" 。 CategoryA">CategoryA</button>
<div class="CategoryA collapse in" aria-expanded="true" style=" ">
<div>類別A - 1 - A001</div>
<div>CategoryA - 2 - A002</div>
<div>CategoryA - 3 - A003</div>
</div>
</div>
<div>
<按鈕型別="按鈕" class="btn btn-info" data-toggle="折疊" data-target=" 。 CategoryB">CategoryB</button>
<div class="CategoryB collapse in" aria-expanded="true" style=" ">
<div>類別B - 1 - B001</div>
<div>CategoryB - 2 - B002</div>
</div>
</div>
</div>
我得到的結果是：
<div>
<div>
<按鈕型別="按鈕" class="btn btn-info" data-toggle="折疊" 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>
<按鈕型別="按鈕" class="btn btn-info" data-toggle="折疊" 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>
uj5u.com熱心網友回復：
我沒有使用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="clapse" 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="" /span>>
<!-- 這里加載專案模板with回圈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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/319272.html
標籤：