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'));