MVC Partial View Render on Bootstrap 3 вкладки change

Question

Я использую загрузочный 3 вкладки в моем представлении mvc. Я хочу сделать еще один частичный вид изменения вкладок. Вот код для вкладки

<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> 

Это делает studentAddEdit вид на вид нагрузки. Я хочу визуализировать studentAddEdit, когда пользователь меняет вкладку и выбирает вкладку studentAddEdit. Любое решение? В настоящее время я делаю это с jquery, но не преуспеваю.

Answer 1

Прежде всего, небольшие изменения в вашем HTML, как добавление class к вашим якорных тегов и добавления дополнительных атрибутов data-* к тому же, и вы можете сделать частичный вид через JQuery, как показано ниже:

<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> 

Ваш JS будет выглядеть примерно так:

$('.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; 
    } 
});