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>