Asp.net mvc 4 多部分视图作为jquery选项卡的验证摘要
我有一个表单,其中模型显示在多个局部视图中,使用jQuery选项卡,一切正常,除了验证摘要不查看所有视图中的错误 如果用户在第一个选项卡中遇到错误,移动到第二个选项卡,则验证摘要将被使用的最后一个选项卡中的错误覆盖 如果我不使用jQuery选项卡,它工作得很好 如何使用选项卡并在局部视图/选项卡之间共享验证摘要 主要观点:Asp.net mvc 4 多部分视图作为jquery选项卡的验证摘要,asp.net-mvc-4,partial-views,jquery-tabs,Asp.net Mvc 4,Partial Views,Jquery Tabs,我有一个表单,其中模型显示在多个局部视图中,使用jQuery选项卡,一切正常,除了验证摘要不查看所有视图中的错误 如果用户在第一个选项卡中遇到错误,移动到第二个选项卡,则验证摘要将被使用的最后一个选项卡中的错误覆盖 如果我不使用jQuery选项卡,它工作得很好 如何使用选项卡并在局部视图/选项卡之间共享验证摘要 主要观点: @model Data <script type="text/javascript"> $(function () { $("#Tab
@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>
@模型数据
$(函数(){
$(“#制表符”).Tabs();
});
@使用(Ajax.BeginForm(MVC.Products.Save()),
新的AjaxOptions{HttpMethod=FormMethod.Post.ToString()})
{
@{Html.RenderPartial(MVC.Products.Views.tabs._tabs_Product,Model);}
@{Html.RenderPartial(MVC.Products.Views.tabs.\u tabs\u Filteration,Model);}
@Html.ValidationSummary(false)
}
改用它,因为它没有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" />
}
查看:
.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" />
}
@使用(Ajax.BeginForm(MVC.Products.Save(),
新选择
{
HttpMethod=FormMethod.Post.ToString()
}))
{
@Html.HiddenFor(s=>s.Id)
@Html.ValidationSummary(false)
产品
@{Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Product,Model);}
过滤
@{Html.RenderPartial(MVC.WhiteLabelTool.Symbols.Views.tabs._tabs_Filteration,Model);}
}