Post
Ask Question

Bootstrap Tab Strip in ASP.NET MVC

In this post, we will see how to render given below bootstrap Tab script in Asp.net MVC 5 view.
 
Here the number of tabs displayed in view would depend on count of members in the list.
 
 
 
1. Create ASP.NET MVC 5 project.
 
2. Define Member class as follows in “Member.cs” file 
  1. public class Member  
  2. {  
  3. public int Id { get; set; }  
  4. public string Name { get; set; }  
  5. }  
3. Add view to create action method and pass a list of members from controller Action method to razor view file. i.e. “create.cshtml” 
  1. public ActionResult Create()  
  2. {  
  3. List<Member> members = new List<Member>();  
  4. members = GetMemberList();  
  5. return View(members);  
  6. }  
  7. private List<Member> GetMemberList()  
  8. {  
  9. List<Member> members = new List<Member>();  
  10. members.Add(new Member{ Name = "member1" });  
  11. members.Add(new Member { Name = "member2" });  
  12. members.Add(new Member { Name = "member3" });  
  13. members.Add(new Member { Name = "member4" });  
  14. members.Add(new Member { Name = "member5" });  
  15. return members;  
  16. }  
4. Using CSS classes, we can create a tabscript in our “create.cshtml” as shown below: 
  1. @model IEnumerable<Member>  
  2. <div class="container">  
  3. @if (Model.ToList().Count > 0)  
  4. {  
  5. <ul class="nav nav-tabs" role="tablist">  
  6. @{int i = 0;  
  7. foreach (var item in Model)  
  8. {  
  9. if (i == 0)  
  10. {  
  11. <li class="nav-item">  
  12. <a class="nav-link active" data-toggle="tab" href="#@item.Name">@item.Name</a>  
  13. </li>  
  14. }  
  15. else  
  16. {  
  17. <li class="nav-item">  
  18. <a class="nav-link" data-toggle="tab" href="#@item.Name">@item.Name</a>  
  19. </li>  
  20. }  
  21. i++;  
  22. }  
  23. }  
  24. </ul>  
  25. <div class="tab-content">  
  26. @foreach (var item in Model)  
  27. {  
  28. <div id="@item.Name" class="container tab-pane active">  
  29. <br>  
  30. <h3>@item.Name 's Tab Area </h3>  
  31. </div>  
  32. }  
  33. </div>  
  34. }  
  35. </div>  
  36. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
  37. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  
  38. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>