Question

我正在使用jquery验证选项在部分视图上执行客户端验证。部分视图通过ajax加载到使用url的模态对话框中（几乎像Html.RenderAction）。

但是，当加载局部视图时，验证元数据不会输出到页面。通常你会看到如下内容：

//<![CDATA[
3if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
4window.mvcClientValidationMetadata.push({"Fields":[],"FormId":"form0","ReplaceValidationSummary":false});
5//]]>

我的问题与ASP.NET MVC 2 loading partial view using jQuery - no client side validation非常类似，但我不想使用Microsoft验证，因为我熟悉jQuery.validate。

Answer 1

如果我理解你的问题，那么这可能会有所帮助。

在下面的示例中，我使用Ajax.BeginForm来更新div（id =“div_to_update”），但也可能是其他方法。

重要的是OnSuccess，它启动下面的方法。这将更新div内容和执行所有javascripts，包括你的jquery验证。最初我从Telerik论坛找到了这个解决方案。

<div id="div_to_update">
<% using (Ajax.BeginForm("Translations", new { Model.Id }, new AjaxOptions { OnSuccess = "updatePlaceholder", UpdateTargetId = "div_to_update", InsertionMode = InsertionMode.Replace }, new { id = "translationAjaxForm" }))
<% } %>

<script type="text/javascript">
    function updatePlaceholder(context) {
        // the HTML output of the partial view
        var html = context.get_data();

        // the DOM element representing the placeholder
        var placeholder = context.get_updateTarget();

        // use jQuery to update the placeholder. It will execute any JavaScript statements
        $(placeholder).html(html);

        // return false to prevent the automatic update of the placeholder
        return false;
    }
</script>
</div>

Answer 2

请查看此链接：Executing Dynamically Loaded JavaScript
它包含修复程序，它们假设在动态加载的（通过AJAX）部分视图上执行javascript。

Answer 3

对你的问题的理解是，在部分更新页面时，重新插入相应的DOM元素，即它们是新的，并且没有所需的$ .validate初始化。

我以为你可以某种方式使用$ .live / $。livequery将$ .validate对象绑定到这些字段，因此在每次部分页面更新后，jquery代码会重新初始化$ .validate到这些字段。也许你可以使用css类来标记那些DOM元素。

我所建议的是一种后期绑定并使用与DOM插入相关的新事件。

希望这会有所帮助!!

Answer 4

当我将内容置于DOM中时，我在加载javascript方面遇到了类似的问题。你是如何将内容插入DOM的？ jQuery中有一些方法在插入try时使用以下方法去除javascript：

$("#mydiv").html(newContent);

希望这能帮到你！

Answer 5

也许我很困惑，但你可以在提交上调用验证，如果失败则不提交吗？

$(function() {
    $("form:first").validate( { .. options for validator .. });

    $("submit").click(function() {
        if(!$("form:first").valid()){ 
             return false;
        }
        // Submit form here
    });

});

Answer 6

我有同样的问题，这就是我解决它的方法。

打开MicrosoftMvcJQueryValidation.js并进行以下更改。

添加此功能

function __MVC_ApplyClientValidationMetadata() {
   var allFormOptions = window.mvcClientValidationMetadata;
   if (allFormOptions) {
      while (allFormOptions.length > 0) {
         var thisFormOptions = allFormOptions.pop();
         __MVC_EnableClientValidation(thisFormOptions);
       }
   }
}

找到$（document）.ready（）并将其替换为

$(document).ready(__MVC_ApplyClientValidationMetadata);

现在只需执行以下操作

如果使用html（），则在将html加载到元素后，只需调用__MVC_ApplyClientValidationMetadata。

$("#someDiv").html(responseHtml);
__MVC_ApplyClientValidationMetadata();

如果您使用load（），那么您还有另一个问题。它剥离了所有脚本标签。所以你必须做类似以下的事情。

$("#someDiv").load("/a/partialview/request" , function(response){
   var scripts = $(response).filter("script");
   for (var i = 0; i < scripts.length; i++) {
      //executes javascript
      $.globalEval(scripts[i].text);
   }
   __MVC_ApplyClientValidationMetadata();
});

还有一件事。确保使用ajax加载的表单具有唯一ID。默认情况下，所有表单的id都为form0。

Answer 7

部分问题是响应中包含的脚本未执行。在我的情况下，我不得不使用基于jcruz'解决方案的解决方案，该解决方案从特定的ajax形式中选择脚本：

var scripts = $('div#id_of_ajax_form>script');
for (var i = 0; i < scripts.length; i++) {
    //executes javascript
    $.globalEval(scripts[i].text);
}

问题的第二部分是在通过调用Sys.Mvc.FormContext._Application_Load加载微软验证之后初始化的事实。因此，在执行包含验证字段规范的所需脚本之后，我调用在文档加载时调用的相同函数：

Sys.Mvc.FormContext._Application_Load();

希望这会有所帮助。任何评论都会非常感激。

如果通过ajax加载部分，则不会触发ASP.NET MVC Jquery验证

7 个答案: