Can you pass model attributes from an asp.net model into a reactjs.net component?

Question

I am using latest asp.net core with reactjs.net and rendering my react components server side, is it possible for me to pass not just the model, but the model attributes for validation purposes, without having to set up a dependency for a JS validator?

Model

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

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

View

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

And if not, what is the most efficient way to validate models without having to redefine the entire model on the view

Conan

Answer 1

You should manage validation it self because React have diffrent type of validation call PropType. Example

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;

Spikelet