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

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

1 个答案: