我正在使用最新的asp.net core和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() 

如果没有,验证模型的最有效方法是什么,而无需在 View 上重新定义整个模型

请您参考如下方法:

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

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; 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!