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

时间:2015-11-17 18:30:02

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

我有下一个代码

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

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

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

1 个答案:

答案 0 :(得分:3)

从错误中看,好像还没有附上$ .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组件,以便他们知道应该如何验证特定字段。

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

  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)中的变量包含为道具。 (见here

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