当Bootstrap 3标签页改变时，MVC Partial View如何呈现？

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做这件事，但没有成功。

- Ammar

---

你是如何处理jQuery的事情的？能否展示一些代码吗？ - dariogriffo

@dariogriffo，我只是在选项卡点击时更改了模型ID，我还使用了选项卡更改事件，但还没有完成，你能否为我提供一些代码片段来解决这个问题。我想知道如何为添加编辑选项卡呈现相同的视图。 - Ammar

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

- Guruprasad J Rao