Bootstrap tabs with dynamic content loading in ASP.NET MVC

In this article, I will explain how you can load dynamic content in bootstrap tabs by clicking on it using AJAX and Partial View in ASP.NET MVC.

So to begin with we need to create a new project in our Visual Studio, by navigating to File-> New -> Project ->Select "ASP.NET (Left pane)" and "ASP.NET web application (right-pane)"-> Provide a name your application and Click "OK", Select "MVC" from the template and Click "OK" to get basic layout of MVC generated automatically.

Now, In your Views-> Home->Index.cshtml , create the Bootstrap tabs using HTML as give below

<!-- Tab Buttons -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
    <li class="active">
      <a href="#_FirstTab" role="tab" data-toggle="tab">Submission</a>
    </li>
    <li>
      <a href="#_SecondTab" role="tab" data-toggle="tab">Search</a>
    </li>
</ul>

<!-- Tab Content Containers -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="_FirstTab">
        <!-- Call partial view to load initial page load data -->
        @Html.Partial("_FirstTab")
    </div>
    <div class="tab-pane fade" id="_SecondTab">

    </div>
</div>

As you can see we have two tab's with name "_FirstTab" and another "_SecondTab", inside first tab we are fetching partial view initially on page load, so let's create the partial view for _FirstTab, and ActionMethod to call it.

Navigate to your HomeController.cs and create the two ActionMethod for "_FirstTab" and "_SecondTab"

       public ActionResult FirstTab()
        {
            return PartialView("_FirstTab");
        }

        public ActionResult SecondTab()
        {
            return PartialView("_SecondTab");
        }

So your Complete code for HomeController.cs would look like

using System.Web.Mvc;

namespace BootstrapDynamicTab.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult FirstTab()
        {
            return PartialView("_FirstTab");
        }

        public ActionResult SecondTab()
        {
            return PartialView("_SecondTab");
        }
    }
}

We also have to create two patial View's inside Views->Home folder, "_FirstTab.cshtml" with demo HTML

<p>hello from first tab, write your dynamic content</p>

and "_SecondTab.cshtml" with demo HTML code as below

<p>Hello from the Second tab</p>

Now, the final step is to load Tabs dynamically on button click so let's create on Tab button click AJAX request in our Index.cshtml page.

So, here is our jQuery code, which is called when "a"(anchor tag) is clicked inside "#tabstrip"

<script>
    $('#tabstrip a').click(function (e) {
        e.preventDefault()
        var tabID = $(this).attr("href").substr(1);
        $(".tab-pane").each(function () {
            console.log("clearing " + $(this).attr("id") + " tab");
            $(this).empty();
        });
       
        $.ajax({
            url: "/@ViewContext.RouteData.Values["controller"]/" + tabID,
            cache: false,
            type: "get",
            dataType: "html",
            success: function (result) {
                $("#" + tabID).html(result);
            }

        })
   $(this).tab('show')
});
</script>

In the above code, the $.ajax() request retrieves the partial view. The cache parameter is necessary to ensure a fresh rebuild on each click. As for what path is requested you will notice a @ViewContext.RouteData.Values["controller"] call. It simply retrieves the controller of the current view, assuming the partial views are located in the same folder in the tree.

That's it we are done with building part, let's build and runit in browser, you will get output as below

Now each time you click on a tab it will load dynamic content from a partial view. Keeping content separate can keep code cleaner and more organized.

You may also like to read:

Load partial view using jQuery Ajax in ASP.NET MVC

Creating bootstrap switch button (Easy way)