Question

我有一个名为Index的视图，有4个局部视图，如_tab1，_tab2，_tab3和_tab4，每个局部视图都有表单字段，包括提交和取消按钮，当我点击_tab4取消按钮时，我想重新加载相同的_tab4局部视图表格数据已清除。

   <ul class="tab">
    <li class="active" id="tab1">tab1</li>
    <li class="" id="tab2">tab2</li>
    <li class="" id="tab3">tab3</li>
    <li class="" id="tab4">tab4</li>
</ul>


    <div class="tabbody" style="display: block; ">
        <% Html.RenderPartial("_tab1");  %>         
    </div>
    <div class="tabbody"style="display: block; ">

     <% Html.RenderPartial("_tab2");  %>            
    </div>
    <div class="tabbody"style="display: block; ">

        <% Html.RenderPartial("_tab3");  %>         
    </div>
    <div class="tabbody" style="display: block; ">

        <% Html.RenderPartial("_tab4");  %>         
    </div>

每个局部视图都有提交和取消按钮

Answer 1

尝试将ur partial加载到包含数据检查属性的包装器

HTML：

 <ul class="tab">
    <li class="active tab" id="tab1" data-tabid="tab1">tab1</li>
    <li class="tab" id="tab2" data-tabid="tab2">tab2</li>
    <li class="tab" id="tab3" data-tabid="tab3">tab3</li>
    <li class="tab" id="tab4" data-tabid="tab4">tab4</li>
</ul>

<div class="tabbody" style="display: block; ">
        <% Html.RenderPartial("_tab1");  %>         
    </div>

jquery：

$(document).on('click','.tab',function(){
var tabId = $(this).data('tabid');
 if(tabId=='tab1'){
    $('.tabbody').empty().load('/Controller/_tab1');
}
if(tabId=='tab2'){
    $('.tabbody').empty().load('/Controller/_tab2');
}
if(tabId=='tab3'){
    $('.tabbody').empty().load('/Controller/_tab3');
}
if(tabId=='tab4'){
    $('.tabbody').empty().load('/Controller/_tab4');
}
});

Answer 2

使用唯一ID标记每个div：

<div id="tab1-content" class="tabbody" style="display: block; ">
        <% Html.RenderPartial("_tab1");  %>         
</div>

在取消按钮点击功能上执行一些jQuery代码：

$("cancelTab1buttonselector").click(function() {

   $.get("@Html.Action("Tab1")", function(data) {

      $("#tab1-content").html(data);
   });
});

其中“cancelTab1buttonselector”是tab1中取消按钮的选择器。对每个标签执行相同操作。您需要创建控制器的操作，将每个选项卡内容作为PartialViewResult返回：

public ActionResult Tab1() 
{
     var model = ...get model...
     return PartialView("_tab1", model);
}

Mvc局部视图重新加载或刷新

2 个答案: