ASP.Net MVC:你可以在AJAX/jQuery调用中使用数据注释/验证吗？

Question

你可以在AJAX/jQuery调用中使用Data Annotations/Validation吗？如果是这样,请提供示例或帖子,其中显示了一个示例.

基本上我已经看到了一个如何使用数据注释的例子,但它有一个完整的帖子.有没有办法处理AJAX/jQuery调用？不知道如何做到这一点因为我不确定如何在客户端构造Model对象.(我认为这是你必须要做的.)

有人告诉我这可以做到,但我只是不明白它是怎么回事.

谢谢你的帮助.

Answer 1

是的 - 100%我一直这样做.使用Ajax.BeginForm并使用不显眼的验证 http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html

这将释放你需要客户端的所有东西..虽然你必须再次连接验证器告诉jQuery我们已经加载了一些它需要验证的内容

我相信我从以下网站获得了这个想法/代码:http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

无论我在下面工作的方式是什么,我正在使用它,虽然我添加了一些调试.

(function ($) {
    $.validator.unobtrusive.parseDynamicContent = function (selector) {

        var len = $(selector).length;

        //alert('got length');
        if ($(selector).length == 0) {
            alert('The selector (usually a div) passed in as the root level to start validation parsing at (rather than parsing the whole document again) could not be found in the DOM. Validation on this form will not likely continue. The selector parameter is:' + selector);
            return;
        }
        //use the normal unobstrusive.parse method
        $.validator.unobtrusive.parse(selector);

        //get the relevant form
        var form = $(selector).first().closest('form');
        if (form.length == 0) {
            alert('Could not find a form that was a parent of selector:' + selector + '\nValidation may not work properly');
            return;
        }


        //get the collections of unobstrusive validators, and jquery validators
        //and compare the two
        var unobtrusiveValidation = form.data('unobtrusiveValidation');
        //alert(unobtrusiveValidation.length);
        var validator = form.validate();

        $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
            if (validator.settings.rules[elname] == undefined) {
                var args = {};
                $.extend(args, elrules);
                args.messages = unobtrusiveValidation.options.messages[elname];
                //$('[name=' + elname + ']').rules("add", args);
                $('[name="' + elname + '"]').rules("add", args);
            } else {
                $.each(elrules, function (rulename, data) {
                    if (validator.settings.rules[elname][rulename] == undefined) {
                        var args = {};
                        args[rulename] = data;
                        args.messages = unobtrusiveValidation.options.messages[elname][rulename];

                        $('[name="' + elname + '"]').rules("add", args);
                    }
                });
            }
        });

    }
})($);

然后在你使用ajax加载的每个局部视图(或页面)中,具有:(注意editCustomerAddress是包含我的新内容的div名称,因此jQuery不必重新分析我页面上的所有内容,但仅限于我的动态内容)

  <script type="text/javascript">
        try {
            //Since this may have been loaded as dynamic content ensure jQuery client validation knows we should be validating the content in this view.
            //jQuery validation runs when the original page loads - on the original content and not on dynamic (in this case ajax) content.
            //We don't need to validate the whole form again, only from this div down.

            //if I have a problem in jQuery 5, then try: $.validator.unobtrusive.parse("#editZone > div > form"); 
            $.validator.unobtrusive.parseDynamicContent('#editCustomerAddress');
        }
        catch (err) {
            alert('An error occured trying to tell jQuery to validate our new content. Ensure the code for parseDynamicContent has been included and you are referencing a valid element. Also, ensure the form has a context if it is a partial view by calling if (ViewContext.FormContext == null){ViewContext.FormContext = new FormContext();}  If that code is not present, data-val-* attributes will not be rendered.\n' + err);
        }

    </script>

此外 - 您希望确保您的部分视图没有自己的ajax或html表单,您需要通过表单上下文

@ {if(ViewContext.FormContext == null){ViewContext.FormContext = new FormContext(); }

否则你的数据-val-*属性将不会由辅助方法发出.如果您的视图没有Ajax.BeginForm或Html.BeginForm来创建自己的表单上下文,则需要这样做.