4

我希望在 jQuery UI 对话框中显示 MVC3 的不显眼的 ValidationSummary 错误。具体来说，我希望能够拥有类似“现场”$('.validation-summary-errors').dialog(...);的体验。也就是说，每当 MVC3 客户端验证将显示（第一次）或更新（重复攻击）.validation-summary-errors元素时，我希望结果出现在 jQuery UI 对话框中。

我目前有一些类似的东西

@Using Html.BeginForm("Action", "Controller", FormMethod.Post, New With {.id = "MyForm"})
    @Html.ValidationSummary()
...

$('#MyForm').submit(function () {
    if (!$(this).valid()) {
        $('.validation-summary-errors').dialog(...);
        return false;
    }
});

但这对我来说感觉不对。

感觉就像我应该能够连接到验证框架并收到验证完成的通知，并且现在显示或更新了错误摘要。然后使用该事件，dialog()即现在显示/更新的.validation-summary-errors元素。有这样的事吗？或者还有其他建议吗？

4

2 回答 2

12

所以这就是我最终这样做的方式。我没有找到太多的文档，但是做了足够的 JS 挖掘来达到这一点。不知道我感觉如何。我确实知道我不再需要submit在验证调用上挂钩表单的事件和“加倍”，所以这很好。似乎这个解决方案感觉“神秘”（至少在我没有经验的眼中），我本来期望（并且仍在寻找）一个感觉更加成熟的解决方案。

$(function () {
    // If there is an error element already (server side error), show it.
    showValidationSummaryDialog();

    // When the form validates, and there is an error element, show it
    $('#MyForm').bind('invalid-form.validate', function (error, element) {
       showValidationSummaryDialog();
    }
}

function showValidationSummaryDialog() {
    $('.validation-summary-errors').dialog({
        title: 'Unable to Save',
        close: function () {
            $(this).dialog('destroy')
                           .prependTo($('#MyForm')); // jQuery moves the source element out of the DOM.
                                                     // We need to put it back in its place afterwards for validation to maintain its contents.
                                                     // TODO: Is there a better way?
        }
    });
}
于 2011-06-30T14:28:05.360 回答
1

如果有人想同时显示ValidationSummary&ValidationSummaryDialog然后试试这个。

根据@ckittel。

@using (Html.BeginForm())
{ 
    @Html.ValidationSummary()
    <div id="ValidationSummary" style="display:none" class="validation-summary-errors">
    </div>
}


<script type="text/javascript">

    function showValidationSummaryDialog() {
        $('#ValidationSummary').html($('.validation-summary-errors').html());

        $('#ValidationSummary').dialog({
            title: 'Error',
            modal: true
        });
    }

    $(document).ready(function () {
        $('form').bind('invalid-form.validate', function (error, element) {
            showValidationSummaryDialog();
        });
    });

</script>
于 2014-03-29T04:59:19.897 回答