asp.net mvc4 集成reactjs

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

    Install-Package React.Web.Mvc4

  3. 到这里下载starter kit包,解压后取得react.js, react-dom.js文件添加到项目里

  4. 添加首页 Home->Index

    @{
    Layout = null;
    }
    
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Indextitle>
    <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>
    
  5. 添加home.index.jsx 文件,编写reactjs代码

    var CommentBox = React.createClass({
    render: function () {
        return(
            
    "commentBox"> I am a Comment box.
    ); } }); ReactDOM.render( , document.getElementById("content") );
  6. 运行网站 ,报错
    asp.net mvc4 集成reactjs_第1张图片
    查看项目引用,发现项目引用的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>
    

    好了,大功告成,运行结果
    asp.net mvc4 集成reactjs_第2张图片

你可能感兴趣的:(aspnet,向导,mvc,reactjs,mvc4,reactjs,asp.net,向导)