Asp.net MVC 使用 ReactJS
新建项目
- 新建MVC4 项目
- 安装ReactJS.NET
- 新建ReactJSController
123456789101112131415161718
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
namespace
ReactJsDemo.Controllers
{
public
class
ReactJSController : Controller
{
//
// GET: /ReactJS/
public
ActionResult Index()
{
return
View();
}
}
}
- 新建视图 Index.cshtml
12345678910111213141516171819202122
@{
ViewBag.Title =
"Index"
;
}
@section styles{
<link href=
"http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel=
"stylesheet"
type=
"text/css"
/>
<style type=
"text/css"
>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
}
@section scripts{
<script src=
"http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"
></script>
<script src=
"http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
<script src=
"http://cdn.bootcss.com/react/0.14.4/react.min.js"
></script>
<script src=
"http://cdn.bootcss.com/react/0.14.4/react-dom.min.js"
></script>
<script src=
"~/Scripts/HelloWorld.jsx"
></script>
}
<div id=
"content"
></div>
- 新建视图 Index.cshtml
- 新建 React jsx 文件 HelloWorld.jsx
1234567891011121314151617181920212223242526272829303132
var
Hello = React.createClass({
getInitialState:
function
() {
return
{
opacity: 1.0
};
},
componentDidMount:
function
() {
this
.timer = setInterval(
function
() {
var
opacity =
this
.state.opacity;
opacity -= .05;
if
(opacity < 0.1) {
opacity = 1.0;
}
this
.setState({
opacity: opacity
});
}.bind(
this
), 100);
},
render:
function
() {
return
(
<div style={{opacity:
this
.state.opacity}}>
Hello {
this
.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name=
"world"
/>,
document.getElementById(
'content'
)
);<br><br>
OK 运行项目
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步