使用MVC进行模态弹出Jquery验证

时间:2013-02-02 22:15:12

标签: jquery asp.net-mvc jquery-validate unobtrusive-validation

我正在使用PartialView加载模态弹出窗体

代码

 $("#modalContainer").load('@Url.Action("NewRefill","Car",new {car=@Model.Id})');

                        $.validator.unobtrusive.parse($("#modalContainer form"));

                        $("#addNewEntryModal").modal('show');

在我的控制器中我有

[HttpPost]
        public ActionResult NewRefill(Car car,int car)
        {
            if (ModelState.IsValid)
            {


            }
            return Json(new { Success = false });

        }

这是一个模态弹出窗口。每次点击提交,它都会自动转发到新页面。我希望它做的是保持Modal打开并显示发生的错误。我已经尝试绑定到提交事件并停止它无济于事。验证确实有效,因为我看到红色边框,但我转发并看到Success = false

2 个答案:

答案 0 :(得分:4)

您没有在正确的位置解析jQuery不显眼的验证。在成功回调中加载部分后,您应该这样做:

var url = '@Url.Action("NewRefill", "Car", new {car = @Model.Id})';
$('#modalContainer').load(url, function() {
    $.validator.unobtrusive.parse($("#modalContainer form"));
    $("#addNewEntryModal").modal('show');
});

此外,如果在此部分内部您使用Ajax.BeginForm帮助程序生成表单,请确保已将jQuery.unobtrusive-ajax.js脚本包含在您的页面中以使其生效。如果它是正常的Html.BeginForm,如果您希望使用AJAX请求而不是正常请求提交它,则应该AJAXify:

var url = '@Url.Action("NewRefill", "Car", new {car = @Model.Id})';
$('#modalContainer').load(url, function() {
    var form = $("#modalContainer form");
    $.validator.unobtrusive.parse();
    $("#addNewEntryModal").modal('show');
    form.submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                ...
            }
        });
        return false;
    });
});

答案 1 :(得分:0)

    $.validator.unobtrusive.parse($('#' + popupID));