Reactjs + ASP MVC 不显眼的验证答案

【问题标题】：Reactjs + ASP MVC Unobtrusive ValidationReactjs + ASP MVC 不显眼的验证
【发布时间】：2016-02-19 06:21:18
【问题描述】：

我有下一个代码

componentDidMount() {
    super.componentDidMount();
    let jobj = $(ReactDOM.findDOMNode(this));
    $.validator.unobtrusive.parse(jobj);
}

运行后，我得到错误：Uncaught TypeError: Cannot read property 'unobtrusive' of undefined

如何使导入 ASP MVC 和 jquery 验证不显眼？

【问题讨论】：

标签： javascript asp.net-mvc-4 unobtrusive

【解决方案1】：

从错误来看，$.validator 似乎尚未附加。

在渲染 React 组件之前检查您是否错过了 jquery.validate.min.js（请参阅here）。

关于使用 ASP.NET MVC 并且不显眼，这也是我过去几天一直在研究的问题。让我分享一下我对此的一些初步想法：

React 开箱即用的验证工作

从不显眼的验证的工作原理来看，只要您增强 JSX 或 TSX(Typescript v1.6+) 或使用 data-val-* 属性反应脚本，不显眼的插件就会为您带来魔力。

var TextInputComponent = React.createClass({
    render() {        
    return (
        <div>
            <input data-val="true" data-val-required="error msg" name="Test" type="text" />
            <span className="text-danger"  data-valmsg-replace="true" data-valmsg-for="Test"></span>
        </div>
    );
}
});

问题空间

问题是我们（ASP.NET MVC 开发人员）习惯于让 Razor 通过 @Html.TextFor(...) 方法（以及其他输入类型的变体）为我们生成所有属性。现在我们需要将这些属性传递给 ReactJS 组件，以便他们知道应该如何验证特定字段。

我打算测试以下是否有效：

使用 HtmlHelper 的 GetUnobtrusiveValidationAttributes 方法获取与 ViewModel 元数据相关的所有属性。类似这样的扩展方法：

public static IDictionary<string, object> UnobtrusiveValidationAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> propertyExpression)
{
    var propertyName = html.NameFor(propertyExpression).ToString();
    var metadata = ModelMetadata.FromLambdaExpression(propertyExpression, html.ViewData);
    var attributes = html.GetUnobtrusiveValidationAttributes(propertyName, metadata);
    return attributes;
}

将此方法输出到 JSON 或 Javascript 对象并将其分配给 Javascript 变量（全局或范围为 ReactDOM.render 方法）
使用 JSX 扩展功能将 (2) 中的变量包含为道具。（见here）

简而言之，要拥有一个带有 ASP.NET 验证的完整表单，我们需要告诉 ReactJS 组件所有必要的 data-val-* 信息。

【讨论】：

感谢您的回复，我解决了这样的问题 window.$.validator.unobtrusive.parse(jobj);而是 $.validator.unobtrusive.parse(jobj);
@ronnypm 你的发现结果如何？