作为 jquery 选项卡的多部分视图的验证摘要答案

【问题标题】：Validation summary for multi partial views as jquery tabs作为 jquery 选项卡的多部分视图的验证摘要
【发布时间】：2013-06-02 06:44:36
【问题描述】：

我有一个表单，其中模型在多个部分视图中显示，使用 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>

【问题讨论】：

标签： asp.net-mvc-4 partial-views jquery-tabs

【解决方案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" />
}

【讨论】：