4

MVC3 の目立たない ValidationSummary エラーを jQuery UI ダイアログに表示したいと考えています。$('.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 に答える