Основываясь на приведенном вами примере, я подумал о другом решении вашей проблемы, которое, на мой взгляд, более простое и намного лучше вписывается в сеть, прежде всего я использовал JQuery и Bootstrap v.4 внутри моегокод переднего плана, тогда я использовал два компонента, которые они являются:
- Список группы
- Свернуть
После этого я создаю модель представления для моей фигуры данных, которая содержит заголовок со списком элементов (я использую строки только для демонстрации) следующим образом:
public class DataViewModel
{
public string Title { get; set; }
public IEnumerable<string> Data { get; set; }
}
И создаю Индекс для действияследующим образом (просто для заполнения некоторых данных и передачи их в представление:
public IActionResult Index()
{
var pageViewModel = new List<DataViewModel>()
{
new DataViewModel()
{
Title="First data tab",
Data=new string []{"Item 1","Item 2","Item 3"}
},
new DataViewModel()
{
Title="Second data tab",
Data=new string []{"Item 1","Item 2","Item 3"}
}
};
return View(pageViewModel);
}
Наконец, код представления выглядит следующим образом:
@model IEnumerable<ProgrammerGallery.Controllers.DataViewModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/bootstrap.min.css" rel="stylesheet" />
<title>Data page</title>
</head>
<body>
<div class="container">
<div id="accordion">
@{int counter = 0; }
@foreach (var dataVM in Model)
{
<div class="card">
<div class="card-header" id="heading@(counter)">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">
@dataVM.Title
</button>
</h5>
</div>
<div id="collapse@(counter)" class="collapse show" aria-labelledby="heading@(counter)" data-parent="#accordion">
<div class="card-body">
<ul class="list-group">
@foreach (var item in dataVM.Data)
{
<li class="list-group-item">@item</li>
}
</ul>
</div>
</div>
</div>
counter++;
}
</div>
</div>
<script src="~/jquery.min.js"></script>
<script src="~/bootstrap.bundle.min.js"></script>
</body>
</html>
И окончательный результат:
Второе издание (сворачиваемый элемент, когда страница отображается рядом с данными объекта отображения рядом, а не со строковыми данными):
Класс сущности:
public class Entity
{
public string Name { get; set; }
public string BriefDescription { get; set; }
public double Price { get; set; }
}
Режим просмотраl класс:
public class DataViewModel
{
public string Title { get; set; }
public IEnumerable<Entity> Data { get; set; }
}
Действие:
public IActionResult Index()
{
var pageViewModel = new List<DataViewModel>()
{
new DataViewModel()
{
Title="First data tab",
Data=new List<Entity>()
{
new Entity()
{
Name="First item",
BriefDescription="My description",
Price=1000
},
new Entity()
{
Name="Second",
BriefDescription="My description",
Price=500
},
new Entity()
{
Name="Third",
BriefDescription="My description",
Price=1000
}
}
},
new DataViewModel()
{
Title="Second data tab",
Data=new List<Entity>()
{
new Entity()
{
Name="First item",
BriefDescription="My description",
Price=1000
},
new Entity()
{
Name="Second",
BriefDescription="My description",
Price=500
},
new Entity()
{
Name="Third",
BriefDescription="My description",
Price=1000
}
}
}
};
return View(pageViewModel);
}
И, наконец, код бритвы:
@model IEnumerable<ProgrammerGallery.Controllers.DataViewModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/bootstrap.min.css" rel="stylesheet" />
<title>Data page</title>
</head>
<body>
<div class="container">
<div id="accordion">
@{int counter = 0; }
@foreach (var dataVM in Model)
{
<div class="card">
<div class="card-header" id="heading@(counter)">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">
@dataVM.Title
</button>
</h5>
</div>
<div id="collapse@(counter)" class="collapse" aria-labelledby="heading@(counter)" data-parent="#accordion">
<div class="card-body">
<ul class="list-group">
@foreach (var item in dataVM.Data)
{
<li class="list-group-item">@($"Name :{item.Name}, {item.BriefDescription}, {item.Price}$")</li>
}
</ul>
</div>
</div>
</div>
counter++;
}
</div>
</div>
<script src="~/jquery.min.js"></script>
<script src="~/bootstrap.bundle.min.js"></script>
</body>
</html>