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

Posted 2023-02-22

【中文标题】Bootstrap 3 选项卡上的 MVC 部分视图渲染更改

【英文标题】：MVC Partial View Render on Bootstrap 3 tabs change

【发布时间】：2015-08-09 04:44:51

【问题描述】：

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

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

【问题讨论】：

你在做 jquery 的东西怎么样？你能显示一些代码吗？

@dariogriffo 我只是在选项卡单击上更改模型 ID 我也使用选项卡更改事件但它没有完成你能建议我一些代码 sn-ps 来解决这个问题。我想知道如何为添加编辑选项卡呈现相同的视图。

【参考方案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;
     
);