asp.net-mvc - 在 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 挖掘才能达到这一点。不知道我对此有何感受。我确实知道我不再需要 Hook 表单的 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?
        }
    });
}