您可以将模型属性从 asp.net 模型传递到 reactjs.net 组件吗?

Posted

技术标签:

【中文标题】您可以将模型属性从 asp.net 模型传递到 reactjs.net 组件吗?【英文标题】:Can you pass model attributes from an asp.net model into a reactjs.net component? 【发布时间】:2017-05-18 01:55:30 【问题描述】:

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

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

【问题讨论】:

【参考方案1】:

你应该自己管理验证,因为 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  />
                        </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;

【讨论】:

以上是关于您可以将模型属性从 asp.net 模型传递到 reactjs.net 组件吗?的主要内容,如果未能解决你的问题,请参考以下文章

ASP .NET MVC 3 - 将参数从视图传递到控制器

ASP.NET MVC - 使用 C# 将引用不同程序集的模型从控制器传递到视图

如何在 asp.net MVC 中使用 RedirectToAction 将模型从一个 Action 方法传递到另一个?尽管我发送了一个填充模型,但我得到的是空模型

如何将项目列表从视图传递到控制器(ASP.NET MVC 4)

在 Asp.Net MVC 中禁用模型验证

您可以在asp.net mvc中将复杂对象从表单发布到控制器吗