Question

我有下一个代码

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

运行之后，我收到错误：未捕获TypeError：无法读取未定义属性'unobtrusive'

如何使导入ASP MVC不引人注目且jquery验证？

Answer 1

从错误中看，好像还没有附上$ .validator。

检查在渲染React组件之前是否遗漏了jquery.validate.min.js（参见here）。

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

使用React

开箱即用验证

判断不引人注意的验证是如何工作的，只要你使用data-val- *属性增强你的JSX或TSX（Typescript v1.6 +）或反应脚本，这个不引人注意的插件就会为你带来魔力。

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组件所有必要的数据 - val- * info。

Reactjs + ASP MVC不引人注目的验证

1 个答案: