MVC 3，（剃刀）加载部分验证答案

【问题标题】：MVC 3, (razor) load partial with validationMVC 3，（剃刀）加载部分验证
【发布时间】：2011-10-12 08:53:01
【问题描述】：

您好，我正在使用 MVC 3（剃刀）制作一个 ajax 向导的原型。我注意到一个奇怪的是，当您将部分视图返回给 UpdateTargetId 时，会插入视图但不添加/应用不显眼的 JavaScript。如果我在 ajax 块之外加载部分视图，例如

@Html.Partial("Company")

它工作得很好，所以我不会错过任何标准库和我的网络配置都很好。

所以现在我有点难过。

我的看法如下：

@using(Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea" })){

    <div id="stepArea"></div>
   <input id="btnSubmit" type="submit" value="submit" />
}

控制器：

public ActionResult Step(FormCollection formCollection)
{
    if (this.Request.IsAjaxRequest())
    {
        switch ((TempData["step"] as string))
        {
            case "Company":
                TempData["step"] = "Person";
                return PartialView("Company");

            case "Person":
                TempData["step"] = "Pay";
                return PartialView("Person");

            case "Settlement":
                return PartialView("Pay");

            default:
                TempData["step"] = "Company";
                return PartialView("UserType");
        }
    }
    return View();
}

我的问题是部分视图的验证可以从部分刷新中初始化/实现吗？

【问题讨论】：

标签： asp.net asp.net-mvc

【解决方案1】：

在阅读了一些论坛并做了一些实验之后。最后一块拼图，在返回部分视图后导致验证工作。 jquery.validate.unobtrusive not working with dynamic injected elements

<script type="text/javascript">

    function validateAjaxForm() {
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
        return $('#form').valid();
    }
</script>


 @{ Html.EnableClientValidation(true); } 
@using (Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea", OnBegin = "return validateAjaxForm();" }, new { id = "form" }))
{
    <div id="stepArea"></div>
    <input id="btnSubmit" type="submit" value="submit" />
}

完美运行。

【讨论】：

不幸的是，该解决方案存在一个重大问题 - 请查看我的回答。

【解决方案2】：

如果 FormContext 在您的视图中为空，请尝试初始化它。这应该为生成的控件添加不显眼的验证“data-val-*”属性

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

【讨论】：

干杯它添加了不显眼的 data-val-*。现在我需要找到一种方法来通过 ajax.beginform 提交操作来触发验证。奇怪的是验证没有触发。

【解决方案3】：

Nickz 解决方案存在一个大问题，这让我不得不大发雷霆，直到找到不同的解决方法。

    // forces creation of a new validator, which in turn causes 
    // an extra submit event handler to be attached!!!
    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("form");

当您这样做时，每次调用 $.validator.unobtrusive.parse() 时，都会将一个新的事件处理程序附加到表单的提交事件，同时保持旧的事件处理程序不变。这意味着当您多次运行上述代码时，在触发 submit 事件时验证器将不必要地运行多次。这给我带来了严重的性能问题。所以我最终为parse() 方法编写了一个自定义替代方法，我将其命名为updateParse：

    $.extend($.validator.unobtrusive, {
    updateParse: function (selector) {
        /// <summary>
        /// Custom alternative for the built in method $.validator.unobtrusive.parse() which can updates an existing validator.
        /// Use this only when a validator has not yet been initialized, i.e. when $.validator.unobtrusive.parse()
        /// has not yet been called before.
        /// This is intended for use after you dynamically add / remove / modify validatable elements to a form via AJAX.
        /// Parses all the HTML elements in the specified selector. It looks for input elements decorated
        /// with the [data-val=true] attribute value and enables validation according to the data-val-*
        /// attribute values.
        /// </summary>
        /// <param name="selector" type="String">Any valid jQuery selector.</param>
        var $forms = $(selector)
            .parents("form")
            .andSelf()
            .add($(selector).find("form"))
            .filter("form");

        $(selector).find(":input[data-val=true]").each(function () {
            $.validator.unobtrusive.parseElement(this, true);
        });

        $forms.each(function () {
            var form = $(this);
            var info = form.data("unobtrusiveValidation");
            if (info) {
                var validator = form.data("validator");
                if (validator) {
                    validator.settings.rules = info.options.rules;
                }
                else {
                    throw "validator not yet initialized for this form yet -- use $.validator.unobtrusive.parse() instead";
                }
            }
        });
    }

这将更新现有验证器对象的验证规则，而不是在添加额外的提交事件处理程序时强制创建新的验证器。在我的选择中，parse() 方法应该只在验证器已经存在时工作。

【讨论】：