javascript - Reactjs + ASP MVC 不显眼的验证

Question

我有下一个代码

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

运行此命令后，我收到错误:Uncaught TypeError:无法读取未定义的属性“unobtrusive”

如何使导入 ASP MVC 不显眼并进行 jquery 验证？

Answer 1

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

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

关于使用ASP.NET MVC和unobtrusive，这也是我这几天一直在研究的一个问题。让我分享一些我对此的初步想法:

React 验证开箱即用

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

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组件，以便它们知道如何验证特定字段。

我计划测试以下是否有效:

1. 使用 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;
   }
   

2. 将此方法输出到 JSON 或 Javascript 对象中，并将其分配给 Javascript 变量(全局变量或作用域为 ReactDOM.render 方法)

3. 使用 JSX 扩展功能将 (2) 中的变量包含为 props。 (参见here)

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