如何在ajax提交中执行Html.ValidationSummary?

时间:2013-03-02 17:59:36

标签: jquery asp.net asp.net-mvc asp.net-mvc-4 jquery-validate

当我使用ValidationSummary执行Html.BeginForm时,我不知道为什么无法使用AJAX.submit

@model Contoso.MvcApplication.Models.Questions.MultipleChoiceQuestionTemplate

@using (Html.BeginForm("EditQuestion", "Question", FormMethod.Post, new { id = "editQuestionForm" }))
{
    @Html.ValidationSummary(true)
    @Html.EditorForModel("Questions/_MultipleChoiceQuestion")

    <p>
        <input type="submit" value="Save" />
    </p>
}

    public class MultipleChoiceQuestionTemplate : QuestionTemplate, IValidatableObject
    {
        public MultipleChoiceQuestionTemplate() { ... }

        [DisplayName("Question")]
        public string QuestionText { get; set; }
        public List<string> Choices { get; set; }

        [DisplayName("Correct Choice")]
        public int CorrectChoice { get; set; }

        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        {
            if (String.IsNullOrEmpty(Choices5[CorrectChoice]))
            {
                yield return new ValidationResult("ERROR");
            }
        }
    }

这是我的jquery提交功能:

            $("#editQuestionForm").submit(function () {
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (result) {
                            $('#result').html(result);
                        }
                    });
                }

                return false;
            });

但是我有点什么,因为正如你在上面看到的那样,我已经实现了ValidatableObject界面,当我点击提交按钮时,在我的验证模型出现错误时执行帖子并且应该显示错误ValidationSummary

1 个答案:

答案 0 :(得分:2)

你不需要担心submit处理程序,因为jQuery Validate插件已经内置了提交事件处理程序回调函数,而这正是你假设的地方把你的ajax。

As per the documentation for the Validate pluginsubmitHandler回调函数是:

  

“在表单有效时回调处理实际提交。获取   形式作为唯一的论点。替换默认提交。 正确   在验证后通过Ajax提交表单。“

请尝试使用此代码:

$(document).ready(function () {

    $("#yourform").validate({
        // rules & options,
        submitHandler: function (form) {
            $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
            });
            return false; // blocks redirect after submission via ajax
        }
    });

});

DEMO:http://jsfiddle.net/sx26b/