在 MVC 4.0 站点中升级 jQuery 1.9 时不显眼的 jQuery 失败

Posted 2023-05-09

【中文标题】在 MVC 4.0 站点中升级 jQuery 1.9 时不显眼的 jQuery 失败

【英文标题】：Unobtrusive jQuery failing on jQuery 1.9 upgrade in MVC 4.0 site

【发布时间】：2014-10-29 11:04:08

【问题描述】：

当我们将 jQuery 版本从 1.7.1 升级到 jQuery 1.9 时，Microsoft 不显眼的验证无法为我们的 MVC 4.0 站点工作。

尝试修复

这些是我尝试过的修复，以及我阅读的一些相关帖子。但我在此处阅读的建议并未解决问题。

MVC unobtrusive validation with JQuery 1.9 not working Unobtrusive Ajax stopped working after update jQuery to 1.9.0 https://aspnetwebstack.codeplex.com/SourceControl/changeset/e6ea9683f1dbb107f5379e1de787abd046bc721a https://connect.microsoft.com/VisualStudio/feedback/details/776965/please-support-jquery-v1-9-0-properly-in-jquery-validate-unobtrusive

背景

我们正在将 MVC 4.0 站点升级到最新版本的 jQuery。我们的部分目标是将站点上的其他 jQuery 库（例如 Bootstrap）升级到各自的最新版本。这些升级将需要更高版本的 jQuery，比我们当前使用的当前版本 (1.7.1) 更新。我们希望将其用于 jQuery 1.11，现在我正在实施尝试 jQuery 1.9 和利用 JQMigrate 脚本的中间步骤。我已经阅读了 GitHub 上为 jQMigrate 记录的建议修复，但我不清楚如何在不显眼的验证代码上实现这一点。 https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryparsejson-requires-a-valid-json-string

示例代码

示例代码显示了 jquery.validate.unobtrusive.js 4.0 版本中 onError 和 onSuccess 函数的变化。在每种情况下都会注明最初的 Microsoft 实施。除此之外，cmets 显示了我们为修复原始实现所做的一些尝试，以及显示推荐获得位置的相应链接。

function onError(error, inputElement)   // 'this' is the form element

    /*
    // Codeplex fix from http://bit.ly/1xasYAq
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replace = $.parseJSON(container.attr("data-valmsg-replace") || null) !== false;

    // *** fix from http://bit.ly/1tKjGqS
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replace = container.attr("data-valmsg-replace") && $.parseJSON(container.attr("data-valmsg-replace")) !== false;
    */
    // Original Microsoft implementation
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
         replaceAttrValue = container.attr("data-valmsg-replace"),
         replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);

    if (replace) 
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    
    else 
        error.hide();
    


function onSuccess(error)   // 'this' is the form element
    /*
    // Codeplex fix from http://bit.ly/1xasYAq
    var container = error.data("unobtrusiveContainer"),
        replace = $.parseJSON(container.attr("data-valmsg-replace") || null);

    // *** fix from http://bit.ly/1tKjGqS
    var container = error.data("unobtrusiveContainer"),
        replace = container.attr("data-valmsg-replace") && $.parseJSON(container.attr("data-valmsg-replace"));
    */
    // Original Microsoft implementation.
    var container = error.data("unobtrusiveContainer"),
         replaceAttrValue = container.attr("data-valmsg-replace"),
         replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;

    if (container) 
        container.addClass("field-validation-valid").removeClass("field-validation-error");
        error.removeData("unobtrusiveContainer");

        if (replace) 
            container.empty();
        
    

这些是视图中的控件。

@html.TextBoxFor(m => m.DealerAccountNumber)
@Html.ValidationMessageFor(m => m.DealerAccountNumber)

这些是我们模型中的数据注释。

[Required(ErrorMessage = "Dealer is required")]
[RegularExpression(@"[a-zA-Z0-9]*", ErrorMessage = "Not a valid dealer number")]
[Display(Name = "Account")]
[Remote("ValidateDealerAccountNumber", "Registration", ErrorMessage = "Dealer was not found")]
public string DealerAccountNumber  get; set; 

这是我们控制器中的远程验证器。

public virtual ActionResult ValidateDealerAccountNumber(Dealer dealer)

    var success = (dealer != null);
    return Json(success, JsonRequestBehavior.AllowGet);

输入无效的经销商编号后，JQMigrate 脚本会显示以下警告：

JQMIGRATE: jQuery.parseJSON requires a valid JSON string  jquery-migrate-1.2.1.js:41
console.trace() jquery-migrate-1.2.1.js:43
migrateWarn jquery-migrate-1.2.1.js:43
jQuery.parseJSON jquery-migrate-1.2.1.js:232
q jquery.js:8197
r jquery.js:8000
r jquery.js:8558

我的理解是微软在 MVC 5.0 中纠正了这个问题，但我们目前缺乏将整个站点从 MVC 4.0 升级到 MVC 5.0 并执行完整回归测试的奢侈。只要我们引用 JQMigrate，不显眼的验证当然可以工作，但我们不想要那种依赖。

目前我在这个项目中使用 jquery.validate.unobtrusive.js 文件的本地副本，版本 4.0，最初是从 http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.js 复制的。

在该文件中，我已将 andSelf() 替换为 addBack()，以与最新版本的 jQuery 保持一致。我已经尝试了上面第一个代码块中提到的 onError 和 onSuccess 函数中注释掉的更改。但这些都不起作用。

感谢您的帮助。

【参考方案1】：

我尝试了您的方案，但我似乎无法重现该问题。奇怪的是，您指向的 CDN 上的文件已经修复了parseJSON12。它没有针对andSelf() 的修复程序，但您应该能够通过更新Unobtrusive.Validation package 来修复它。

如果您在更新后继续看到错误，您能否扩展从 JQMigrate 获得的堆栈跟踪？它没有在跟踪中提到不显眼的验证。例如，这是我在脚本中强制出错的地方：

JQMIGRATE: jQuery.parseJSON requires a valid JSON string jquery-migrate-1.2.1.js:41 console.trace() jquery-migrate-1.2.1.js:43 migrateWarn jquery-migrate-1.2.1.js:43 jQuery.parseJSON jquery-migrate-1.2.1.js:232 onError jquery.validate.unobtrusive.js:58 ...

【讨论】：

感谢您回复@Pranav，并感谢那些指向 ParseJSON 修复程序的链接。是的，这些更改反映在该文件中，并且在我上面的示例中出现在 cmets“原始 Microsoft 实施”下。我在本地托管文件，并对其应用了 andSelf() 修复。 JQMIGRATE 的完整堆栈跟踪出现在我的帖子中。你是对的，堆栈跟踪不会标记不显眼的脚本。但警告仅在触发远程验证器时发生。删除对 j​​QMigrate 的引用会使远程验证器失败，而之前它与 jQuery 1.7.1 一起使用。

我刚刚尝试通过 NuGet 更新 Unobtrusive Validation 包，并收到以下消息。我现在正在寻找对 jQuery 1.4.1 的引用。试图解决依赖 'jQuery (= 1.8)'。试图解决依赖 'jQuery.Validation (= 1.8)'。试图解决依赖 'jQuery (= 1.3.2 && = 1.6)'。将“jQuery 1.8.0”更新为“jQuery 1.4.1”失败。找不到与“jQuery 1.4.1”兼容的“Microsoft.jQuery.Unobtrusive.Validation”版本。

将其缩小到解决方案中的一个项目，NuGet 仍然显示此消息：尝试解析依赖项 'jQuery (≥ 1.8)'。试图解决依赖 'jQuery.Validation (≥ 1.8)'。正在尝试解决依赖项 'jQuery (≥ 1.3.2 && ≤ 1.6)'。将“jQuery 1.8.0”更新为“jQuery 1.4.1”失败。找不到与“jQuery 1.4.1”兼容的“Microsoft.jQuery.Unobtrusive.Validation”版本。

关于 NuGet 错误，这看起来很有希望。我会试一试。 ***.com/questions/22045588/…

好的，我刚刚检查了我的解决方案并使用 NuGet 执行了以下操作：1) 添加了 jQuery 2.1.1。 2) 添加了 jQuery 验证。 3) 添加了 Microsoft jQuery Unobtrusive Validation。然后我在 DealerAccountNumber 控件出现的界面上引用了 jQuery 2.1.1。 JQMigrate 显示警告。删除 JQMigrate 引用后，远程验证失败。

【参考方案2】：

Install-Package Microsoft.jQuery.Unobtrusive.Validation 这修复了我在 MVC 引导程序中对 js 版本 3.1.1 的所有验证错误

【讨论】：

谢谢@GiGi。我在发布这篇文章几个月后换了工作，因此无法确认修复。