CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctwitter-bootstrap
Ammar
Ammar

Reputation: 683

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.

Upvotes: 5

Views: 9016

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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;
     }
});

Upvotes: 11

Related Questions