Ammar Ammar - 3 months ago 28
Javascript Question

MVC Partial View Render on Bootstrap 3 tabs change

I am using bootstrap 3 tabs in my mvc view. I want to render another partial view on tab change. Here is the code for the tab

<ul class="nav nav-tabs">
<li class="active" id="studentList">
<a href="#tab_1_1" data-toggle="tab" aria-expanded="true">
Student List </a>
</li>
<li class="" id="studentAddEdit">
<a href="#tab_1_2" data-toggle="tab" aria-expanded="false">
Student Add/Edit </a>
</li>




<div class="tab-content">
<div class="tab-pane fade active in" id="tab_1_1">
<p>
@Html.Action("StudentList","Student")
</p>
</div>
<div class="tab-pane fade" id="tab_1_2">
<p>
@Html.Action("StudentAddEdit","Student", new {id=Model.StudentId})
</p>
</div>



It renders the
studentAddEdit
view on view load. I want to render
studentAddEdit
view again when the user changes the tab and selects the
studentAddEdit
tab. Any solution suggested? I am currently doing it with jquery but not succeeding.

Answer

First of all slight changes in your html like adding a class to your anchor tags and adding extra data-* attribute to the same and the you can render partial view through jquery as below:

<ul class="nav nav-tabs">
<li class="active" id="studentList">
    <a href="#tab_1_1" class="tbs" data-info="stdlist" data-toggle="tab" aria-expanded="true">
        Student List </a>
</li>
<li class="" id="studentAddEdit">
    <a href="#tab_1_2" data-toggle="tab" class="tbs" data-info="stdaddedit" aria-expanded="false">
        Student Add/Edit </a>
</li>
</ul>

Your JS would be something like below:

$('.tbs').on('click',function(){
     var info=$(this).data('info');
     switch(info)
     {
          case 'stdlist':$('#tab_1_1 p').load('/Student/StudentList'); //Controller method which returns partial view
                         break;
          case 'stdaddedit':$('#tab_1_2 p').load('/Student/StudentAddEdit');//Controller method which returns partial view
                         break;
          //Add cases if you want
          default:break;
     }
});