在jQuery UI对话框中显示MVC3 Unobtrusive ValidationSummary错误

Question

我想在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元素.有这样的事吗？或者还有其他建议吗？

Answer 1

所以这就是我最终做到的方式.我没有找到太多文档,但做了足够的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?
        }
    });
}