加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

运行结果如图:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读