我正在将最新的asp.net核心与reactjs.net一起使用并在服务器端呈现我的react组件,是否可以传递模型而不是模型属性进行验证,而不必为JS设置依赖项验证器?

模型

public class LoginViewModel
    {
        [Required]
        [EmailAddress]
        [StringLength(50)]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }


视图

@model LoginViewModel
@{
    Layout = "~/Views/Shared/_LoginLayout.cshtml";
}
@Html.React("LoginPage", new { loginData = Model })
@Html.ReactInitJavaScript()


如果不是,那么在不重新定义视图的整个模型的情况下验证模型的最有效方法是什么?

最佳答案

您应该自行管理验证,因为React具有不同类型的验证调用PropType。例

import React from "react";
import PropTypes from "prop-types";

import moment from "moment/src/moment";
import PostShare from "./PostShare.jsx";

const PostList = props => {
    const categories = JSON.parse(props.post.categories) || [];
    const tags = JSON.parse(props.post.tags) || [];
    const imageSrc = props.medias ? props.medias.path : "./images/No_Image_Available.jpg";

    return (
        <div className="main-post-area-holder">
            <article className="post-details-holder layout-two-post-details-holder wow  fadeInUp">
                <div className="row">
                    <div className="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                        <div className="post-image">
                            <img src={imageSrc} alt="...." />
                        </div>
                    </div>
                    <div className="col-lg-7 col-md-7 col-sm-7 col-xs-12">
                        <div className="post-meta-category">
                            <ul className="tags">
                                {categories.map((categorie, index) => {
                                    return (
                                        <li key={index}>
                                            <a href="#" className="tag">
                                                {categorie}
                                            </a>
                                        </li>
                                    );
                                })}
                                {tags.map((tag, index) => {
                                    return (
                                        <li key={index}>
                                            <a href="#" className="tag">
                                                {tag}
                                            </a>
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                        <div className="post-title">
                            <h2>
                                <a href="#">
                                    {props.post.title}
                                </a>
                            </h2>
                        </div>
                        <div className="post-meta-posted-date">
                            <p>
                                <a href="#">
                                    {moment(props.post.dateCreated).format("DD MMMM YYYY")}
                                </a>
                            </p>
                        </div>

                        <PostShare />
                    </div>
                </div>
            </article>
        </div>
    );
};

PostList.propTypes = {
    post: PropTypes.object,
    medias: PropTypes.object
};

export default PostList;

08-27 00:24
查看更多