MVC4中使用React.js入门

最新推荐文章于 2024-04-23 13:38:37 发布

原创最新推荐文章于 2024-04-23 13:38:37 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mvc4 #ReactJS

ASP.NET MVC4|MVC5 同时被 2 个专栏收录

123 篇文章

订阅专栏

React.js+ReactNative

31 篇文章

订阅专栏

本文介绍了一个使用ASP.NET MVC与ReactJS相结合的应用案例，通过前后端分离的方式展示了如何从服务器获取数据并在React组件中展示。文章包含了完整的代码实现，包括控制器代码和视图文件，有助于理解ReactJS与MVC框架的交互方式。

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

运行结果如图:

这里写图片描述