asp.net mvc4 集成reactjs

最新推荐文章于 2024-06-04 09:42:00 发布

seeklanguage

最新推荐文章于 2024-06-04 09:42:00 发布

阅读量2.3k

点赞数

分类专栏： aspnet 向导 mvc reactjs 文章标签： mvc4 reactjs asp.net 向导

本文链接：https://blog.csdn.net/seeklanguage/article/details/50324287

版权

aspnet 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

向导

2 篇文章 0 订阅

订阅专栏

mvc

2 篇文章 0 订阅

订阅专栏

创建一个空的mvc4项目
安装 React.Web.Mvc4 Nuget包：

Install-Package React.Web.Mvc4
到这里下载starter kit包，解压后取得react.js, react-dom.js文件添加到项目里

添加首页 Home->Index

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="~/Scripts/react.js"></script>
<script type="text/javascript" src="~/Scripts/react-dom.js"></script>
</head>
<body>
<div id="content">
</div>
<script src="~/jsx/home.index.jsx"></script>
</body>
</html>

添加home.index.jsx 文件，编写reactjs代码

var CommentBox = React.createClass({
render: function () {
    return(
        <div className="commentBox">
        I  am a Comment box.
        </div>
    );
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById("content")
);

运行网站，报错
这里写图片描述
查看项目引用，发现项目引用的Newtonsoft.Json 程序集版本为6.0.0.0，这是安装React.Web.Mvc4 Nuget包时自动下载的，也不好改，于是想到了程序集版本重定向，在web.config里配置如下

<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
  <dependentAssembly>
    <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
    <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
  </dependentAssembly>
</assemblyBinding>
</runtime>

好了，大功告成，运行结果
这里写图片描述

seeklanguage

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
asp.net mvc4 集成reactjs

创建一个空的mvc4项目安装 React.Web.Mvc4 Nuget包： Install-Package React.Web.Mvc4到这里下载starter kit包，解压后取得react.js, react-dom.js文件添加到项目里添加首页 Home->Index@{Layout = null;}<!DOCTYPE html><html><head><meta name
复制链接

扫一扫