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

我正在使用引导3个选项卡在我的mvc视图中。我想在选项卡更改上呈现另一个局部视图。下面是选项卡中的代码MVC部分视图渲染引导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，但没有成功。

来源

2015-05-27 Ammar

你是如何做的jQuery的东西？你可以显示一些代码吗？ – dariogriffo

@dariogriffo我只是改变选项卡上的模型ID点击我也使用选项卡更改事件，但它没有完成，你可以建议我一些代码片段来解决这个问题。我想知道如何渲染相同的视图添加编辑选项卡。 – Ammar

像添加class到您的锚标记，并增加额外的data-*属性同在HTML的所有细微的变化首先与您可以使通过的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; 
    } 
});

来源

2015-05-27 08:19:17

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

回答

相关问题