1

我有一个名为 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>

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

4

2 回答 2

1

尝试使用数据检查属性将您的部分加载到包装器中

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');
}
});
于 2013-07-24T07:20:17.690 回答
1

用唯一的 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);
}
于 2013-07-24T08:36:47.620 回答