您可以将模型属性从 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 - 使用 C# 将引用不同程序集的模型从控制器传递到视图
如何在 asp.net MVC 中使用 RedirectToAction 将模型从一个 Action 方法传递到另一个?尽管我发送了一个填充模型,但我得到的是空模型