need to make the dynamic navigation collapsible using Bootstrap
Question
All replies
-
User1535942433 posted
Hi acmedeepak,
Could you share your models?
Note:GUID couldn't be a int type.
Here is a simple demo like below:
1.Model:
public class TestModel { public List<RegisteredCarriers> RegisteredCarriers { get; set; } public List<RegisteredDoc> RegisteredDocs { get; set; } } public class RegisteredDoc { public string GuID { get; set; } public string DisplayName { get; set; } public List<Option> Options { get; set; } } public class RegisteredCarriers { public string GuID { get; set; } public string DisplayName { get; set; } public string Symbol { get; set; } public List<Service> Services { get; set; } public List<Document> Documents { get; set; } } public class Service { public string Symbol { get; set; } public string DisplayName { get; set; } } public class Document { public string DisplayName { get; set; } public string Symbol { get; set; } public List<Option> Options { get; set; } } public class Option { public int Stock { get; set; } public int Output { get; set; } }2.View:
@model TestModel <div class="card-body py-3" style="margin-top:8px;"> <div class="col-md-12 row "> <div class="col-md-5 accordian" id="carrierResults"> <ul> <li> <i class="fa fa-caret-right" aria-hidden="true"></i> Registered Carriers @{ foreach (var carrier in Model.RegisteredCarriers) { <ul class="sidebar-nav"> <li class="sidebar-header"> <i class="fa fa-caret-right" aria-hidden="true"></i> <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrier" asp-route-GUID="@carrier.GuID" data-toggle="collapse" data-target="#@carrier.GuID" aria-expanded="true" aria-controls="@carrier.GuID"> @carrier.DisplayName </a> <div id="@carrier.GuID" class="collapse show"> <ul class="sidebar-header"> <li> <i class="fa fa-caret-right" aria-hidden="true"></i> Services <ul class="Last-Indent"> @{ foreach (var service in carrier.Services) { <li> <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetService" asp-route-Symbol="@service.Symbol" asp-route-CarrierSymbol="@carrier.Symbol"> @service.DisplayName </a> </li> } } </ul> </li> <li> <i class="fa fa-caret-right" aria-hidden="true"></i> Documents <ul class="Last-Indent"> @{ foreach (var document in carrier.Documents) { <li class="sidebar-header"> <i class="fa fa-caret-right" aria-hidden="true"></i> <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentDetail" asp-route-CarrierSymbol="@carrier.Symbol" asp-route-DocumentSymbol="@document.Symbol"> @document.DisplayName </a> <ul class="sidebar-header"> <li> <i class="fa fa-caret-right" aria-hidden="true"></i> Output Options <ul class="Last-Indent"> @{ foreach (var option in document.Options) { <li class="sidebar-item"> <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentOption"> @option.Stock.ToString() , @option.Output.ToString() </a> </li> } } </ul> </li> </ul> </li> } } </ul> </li> </ul> </div> </li> </ul> } } </li> </ul> <ul style="list-style: none;"> <li> <i class="fa fa-caret-right" aria-hidden="true"></i> Registered Documents @{ foreach (var document in Model.RegisteredDocs) { <ul class="sidebar-nav" style="list-style: none;"> <li class="sidebar-header"> <i class="fa fa-caret-right" aria-hidden="true"></i> <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocument" asp-route-GUID="@document.GuID" data-toggle="collapse" data-target="#@document.GuID" aria-expanded="true" aria-controls="@document.GuID"> @document.DisplayName </a> <div id="@document.GuID" class="collapse show"> <ul class="sidebar-header" style="list-style: none;"> <li> <i class="fa fa-caret-right" aria-hidden="true"></i> Output Options <ul class="Last-Indent" style="list-style: none;"> @{ foreach (var option in document.Options) { <li class="sidebar-item"> <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocumentsOption"> @option.Stock.ToString() , @option.Output.ToString() </a> </li> } } </ul> </li> </ul> </div> </li> </ul> } } </li> </ul> </div> <div id="dispalyRelatedContent" class="col-md-7"> </div> </div> </div> </div>3.Controller:
public IActionResult Privacy() { var model = new TestModel() { RegisteredCarriers = new List<RegisteredCarriers>() { new RegisteredCarriers() { GuID = "collapseOne", DisplayName = "Carriers1", Symbol = "s1", Services = new List<Service>() { new Service() { Symbol = "serviceSymbol1", DisplayName = "Service1" }, new Service() { Symbol = "serviceSymbol2", DisplayName = "Service2" } }, Documents = new List<Document>() { new Document() { Symbol = "DocumentSymbol1", DisplayName = "Document1" ,Options = new List<Option>() { new Option() { Stock = 11, Output = 11 } } }, new Document() { Symbol = "DocumentSymbol2", DisplayName = "Document2" ,Options = new List<Option>() { new Option() { Stock = 12, Output = 12 } } } } }, new RegisteredCarriers() { GuID = "collapseTwo", DisplayName = "Carriers2", Symbol = "s2", Services = new List<Service>() { new Service() { Symbol = "serviceSymbol3", DisplayName = "Service3" }, new Service() { Symbol = "serviceSymbol4", DisplayName = "Service4" } }, Documents = new List<Document>() { new Document() { Symbol = "DocumentSymbol3", DisplayName = "Document3", Options = new List<Option>() { new Option() { Stock = 1, Output = 1 } } }, new Document() { Symbol = "DocumentSymbol4", DisplayName = "Document4", Options = new List<Option>() { new Option() { Stock = 2, Output = 2 } } } } } }, RegisteredDocs = new List<RegisteredDoc>() { new RegisteredDoc() { GuID="collapseThree", DisplayName="Doc1", Options = new List<Option>() { new Option() { Stock = 3, Output = 3 }, new Option() { Stock = 4, Output = 4 } } }, new RegisteredDoc() { GuID="collapseFour", DisplayName="Doc2", Options = new List<Option>() { new Option() { Stock = 5, Output = 5 }, new Option() { Stock = 6, Output = 6 } } } } }; return View(model); }Result:
Best regards,
Yijing Sun
