Share via

how to generate bootstrap dynamic tabs in mvc?

Tushar M 1 Reputation point
Oct 1, 2022, 5:49 AM

I want to generate Bootstrap dynamic tabs .
Currently I'm loading using if else condition but i want to generate those tabs dynamically .

My view
<section class="py-5 header">
<div class="container py-4">
<header class="text-center mb-5 pb-5 text-white">
<h1 class="display-4">Bootstrap vertical tabs</h1>
<p class="font-italic mb-1">Making advantage of Bootstrap 4 components, easily build an awesome tabbed interface.</p>
<p class="font-italic">Snippet by
<a class="text-white" href="https://bootstrapious.com/">
<u>Bootstrapious</u>
</a>
</p>
</header>

    <div class="row">  
        <div class="col-md-3">  
            <!-- Tabs nav -->  
            <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">  
                @foreach (var item in ViewBag.Controls)  
              {  
                @if (item.ID == 11)  
                {  
                <a class="nav-link mb-3 p-3 shadow active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">  
                    <i class="fa fa-user-circle-o mr-2"></i>  
                    <span class="font-weight-bold small text-uppercase">@item.Name</span></a>  
                 }  
                 @if (item.ID == 12)  
                {  
                <a class="nav-link mb-3 p-3 shadow" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">  
                    <i class="fa fa-calendar-minus-o mr-2"></i>  
                    <span class="font-weight-bold small text-uppercase">@item.Name</span></a>  
               }  
              }  
        </div>  
        <div class="col-md-9">  
            <!-- Tabs content -->  
            <div class="tab-content" id="v-pills-tabContent">  
                 @foreach (var item in ViewBag.Controls)  
               {  
                @if (item.ID == 11)  
                 {  
        <div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">  
                <h4 class="font-italic mb-4">Personal information</h4>  
                <p class="font-italic text-muted mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
            </div>  
                }  
@if (item.ID == 12)  
                 {  
            <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">  
                <h4 class="font-italic mb-4">Bookings</h4>  
                <p class="font-italic text-muted mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
            </div>  
                 }  
           }      
            </div>  
        </div>  
    </div>  
</div>  

</section>

https://jsfiddle.net/bootstrapious/68o3pmcv/

My controller
[HttpGet]
public ActionResult FormTabs()
{
Gateway gateway = new Gateway();
List<ControlsModel> validateControls = new List<ValidateControlsModel>();
validateControls = ///loadinf list from database

        ViewBag.Controls = validateControls;  


        return View();  
    }  

[HttpPost]

public ActionResult FormTabsUpload()
{
.....

        return View();  
    }  
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,729 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.