Reactjs+ASP MVC无干扰验证

Question

我有下一个代码

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

运行此程序后，我得到错误：未捕获类型错误：无法读取未定义的的属性"unsobstruct"

如何使导入ASP MVC不引人注目，并进行jquery验证？

Answer 1

从错误来看，$.validator似乎还没有附加。

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

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

使用React进行开箱即用验证

从非结构化验证的工作方式来看，只要你增强了你的JSX或TSX（Typescript v1.6+），或者用数据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组件，以便它们知道应该如何验证特定字段。

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

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）中的变量包含为道具。（见此处）

简而言之，要获得一个完整的ASP.NET验证表单，我们需要告诉ReactJS组件所有必要的数据val-*info。