作爲jquery選項卡的多個部分視圖的驗證摘要

Question

我有一個表單，跨越多個局部視圖顯示模型，使用jQuery選項卡，除非驗證摘要不會查看所有視圖中的錯誤，否則一切正常。

如果用戶在第一個選項卡中出現錯誤，則移至第二個選項卡，則使用上一個選項卡中的錯誤覆蓋驗證摘要。

如果我不使用jQuery選項卡，它運行良好。

如何使用選項卡並在部分視圖/選項卡之間共享驗證摘要？

主要觀點：

@model Data 

<script type="text/javascript"> 

    $(function() { 
     $("#Tabs").tabs(); 
    }); 
</script> 
<div id="Tabs"> 
    <ul> 
     <li><a href="#tabs-Product">Product</a></li> 
     <li><a href="#tabs-Filteration">Filteration</a></li> 
    </ul> 
    @using (Ajax.BeginForm(MVC.Products.Save(), 
          new AjaxOptions { HttpMethod = FormMethod.Post.ToString()})) 
    { 

     <div id="tabs-Product"> 
      @{ Html.RenderPartial(MVC.Products.Views.tabs._tabs_Product, Model);} 
     </div> 

     <div id="tabs-Filteration"> 
      @{ Html.RenderPartial(MVC.Products.Views.tabs._tabs_Filteration, Model);} 
     </div> 

     @Html.ValidationSummary(false) 

    <input type="submit" value="Ok" /> 
    } 
</div> 

Answer 1

改用Pure CSS Tabs它沒有JavaScript和與驗證摘要

CSS不會干涉：

.tabs { 
    position: relative; 
    min-height: 570px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 

.tab { 
    float: left; 
} 

    .tab label { 
     background: #eee; 
     padding: 10px; 
     border: 1px solid #ccc; 
     margin-left: -1px; 
     position: relative; 
     left: 1px; 
    } 

    .tab [type=radio] { 
     display: none; 
    } 

.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
    overflow: hidden; 
} 

    .content > * { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     -webkit-transform: translateX(-100%); 
     -moz-transform: translateX(-100%); 
     -ms-transform: translateX(-100%); 
     -o-transform: translateX(-100%); 
     -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
    } 

[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 

    [type=radio]:checked ~ label ~ .content { 
     z-index: 1; 
    } 

     [type=radio]:checked ~ label ~ .content > * { 
      opacity: 1; 
      -webkit-transform: translateX(0); 
      -moz-transform: translateX(0); 
      -ms-transform: translateX(0); 
      -o-transform: translateX(0); 
     } 

查看：

@using (Ajax.BeginForm(MVC.Products.Save(), 
          new AjaxOptions 
           { 
            HttpMethod = FormMethod.Post.ToString() 
           })) 
{ 
    @Html.HiddenFor(s => s.Id) 

    @Html.ValidationSummary(false) 

    <div class="tabs"> 

     <div class="tab"> 
      <input type="radio" id="tab-1" name="tab-group-1" checked=""> 
      <label for="tab-1">Product</label> 

      <div class="content"> 
       @{ Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Product, Model); } 
      </div> 
     </div> 

     <div class="tab"> 
      <input type="radio" id="tab-2" name="tab-group-1"> 
      <label for="tab-2">Filteration</label> 

      <div class="content"> 
       @{ Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Filteration, Model);} 
      </div> 
     </div> 


    </div> 
     <input type="submit" value="Ok" /> 
}