MVC4中使用React.js入门

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ReactJSExamples.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return RedirectToAction("Index", "ReactJS");
        }
    }
}

ReactJSController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ReactJSExamples.Controllers
{
    public class ReactJSController : Controller
    {
        // GET: ReactJS
        public ActionResult Index()
        {
            return View();
        }


        public JsonResult GetMessage()
        {
            return Json(new { result = "来自ReactJS控制器的Hello World" }, JsonRequestBehavior.AllowGet);
        }
    }
}

Home视图文件夹

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

ReactJS视图文件夹

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<div id="content"></div>


@section Scripts{
    <script src="~/Scripts/react/react-0.12.2.min.js"></script>
    <script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>  
}

HelloWorld.jsx

 var App = React.createClass({

        getInitialState: function(){
            return{data: ''};
        },

        componentWillMount: function(){
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function() {
          var response = JSON.parse(xhr.responseText);

          this.setState({ data: response.result });
        }.bind(this);
        xhr.send();
    },

        render: function(){
            return(
                <h1>{this.state.data}</h1>
            );
        }
});

React.renderComponent(<App url="/ReactJS/GetMessage" />, document.getElementById('content'));

运行结果如图: