2

我有下一个代码

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

运行此程序后，我收到错误：未捕获的类型错误：无法读取未定义的属性“不显眼”

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

4

1 回答 1

3

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

在渲染你的 React 组件之前检查你是否错过了 jquery.validate.min.js（见这里）。

关于使用 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 组件，以便他们知道应该如何验证特定字段。

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

  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 组件所有必要的 data-val-* 信息。

于 2015-12-31T04:57:42.390 回答