MVC4中使用React.js入门
发布时间:2020-12-15 06:56:22 所属栏目:百科 来源:网络整理
导读: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
HomeController.csusing 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.csusing 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.jsxvar 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'));
运行结果如图:(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |