MVC部分视图渲染Bootstrap 3选项卡更改

Question

我在我的mvc视图中使用bootstrap 3选项卡.我想在标签更改上呈现另一个局部视图.这是选项卡的代码

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