React+BootStrap+ASP.NET MVC实现自适应和组件的复用
系统展示如下
1、前端采用bootstrap3进行架构
2、后端采用asp.net mvc进行开发
开发工具vs2010 mvc4需要安装sp1的补丁。
3、js组件的封装采用react
1、新建mvc项目 BootStrapReactAndMVC。在Views\Shared\新建_Layout.cshtml文件。将bootstrap的引用进行添加。
2、新建HomeController和ReportController两个Controller对象。
3、新建renHangCPU.jsx文件。文件的内容如下
var CPUWatch = React.createClass({
render: function() {
return (<div>
<h2 className="sub-header">CPU监控</h2>
<div className="row placeholders">
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail"/>
<h4>CPU1</h4>
<span class="text-muted">使用率10%</span>
</div>
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail"/>
<h4>CPU2</h4>
<span class="text-muted">使用率10%</span>
</div>
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" className="img-responsive" alt="Generic placeholder thumbnail"/>
<h4>CPU3</h4>
<span class="text-muted">使用率10%</span>
</div>
<div className="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" className="img-responsive" alt="Generic placeholder thumbnail"/>
<h4>CPU4</h4>
<span class="text-muted">使用率20%</span>
</div>
</div>
</div>
);
}
})
新建renhangyingyanjsx.jsx文件。文件的内容如下
var YingPanWatch = React.createClass({
render: function () {
return (<div><h2 className="sub-header">硬盘吞吐量</h2>
<div className="table-responsive">
<table className="table table-striped">
<thead>
<tr>
<th>#</th>
<th>磁盘1</th>
<th>磁盘2</th>
<th>磁盘3</th>
<th>磁盘4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>1,001</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>)
}
})
jsx不能被直接引用。我们要用ES的编译器进行编译。
http://babeljs.cn/repl/ 在这个网址上进行编译。
编译后的文件如下
renHangCPU1.js 可以直接引用
"use strict";
var CPUWatch = React.createClass({
displayName: "CPUWatch",
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"h2",
{ className: "sub-header" },
"CPU监控"
),
React.createElement(
"div",
{ className: "row placeholders" },
React.createElement(
"div",
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/sky", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
"h4",
null,
"CPU1"
),
React.createElement(
"span",
{ "class": "text-muted" },
"使用率10%"
)
),
React.createElement(
"div",
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/vine", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
"h4",
null,
"CPU2"
),
React.createElement(
"span",
{ "class": "text-muted" },
"使用率10%"
)
),
React.createElement(
"div",
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/sky", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
"h4",
null,
"CPU3"
),
React.createElement(
"span",
{ "class": "text-muted" },
"使用率10%"
)
),
React.createElement(
"div",
{ className: "col-xs-6 col-sm-3 placeholder" },
React.createElement("img", { "data-src": "holder.js/200x200/auto/vine", className: "img-responsive", alt: "Generic placeholder thumbnail" }),
React.createElement(
"h4",
null,
"CPU4"
),
React.createElement(
"span",
{ "class": "text-muted" },
"使用率20%"
)
)
)
);
}
});
renhangyingpanjs.js 可以直接被引用
"use strict";
var YingPanWatch = React.createClass({
displayName: "YingPanWatch",
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"h2",
{ className: "sub-header" },
"硬盘吞吐量"
),
React.createElement(
"div",
{ className: "table-responsive" },
React.createElement(
"table",
{ className: "table table-striped" },
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"#"
),
React.createElement(
"th",
null,
"磁盘1"
),
React.createElement(
"th",
null,
"磁盘2"
),
React.createElement(
"th",
null,
"磁盘3"
),
React.createElement(
"th",
null,
"磁盘4"
)
)
),
React.createElement(
"tbody",
null,
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
),
React.createElement(
"tr",
null,
React.createElement(
"td",
null,
"1,001"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
),
React.createElement(
"td",
null,
"100"
)
)
)
)
)
);
}
});
4、然后在下面的view Home/Index上我们添加如下的代码
@{
ViewBag.Title = "欢迎使用";
ViewBag.WhichPage="Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts {
<script type="text/babel">
ReactDOM.render(
<CPUWatch/>,
document.getElementById('divCPU')
);
ReactDOM.render(
<YingPanWatch/>,
document.getElementById('divYingpan')
);
</script>
}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" >
<div id="divCPU"></div>
<div id="divYingpan"></div>
</div>
在Report的Index上添加如下代码
@{
ViewBag.Title = "欢迎使用";
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.WhichPage="Report";
}
@section Scripts {
<script type="text/babel">
ReactDOM.render(
<CPUWatch/>,
document.getElementById('divCPU')
);
ReactDOM.render(
<YingPanWatch/>,
document.getElementById('divYingpan')
);
</script>
}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" >
<div id="divYingpan"></div>
<div id="divCPU"></div>
</div>
大功告成。
React+BootStrap+ASP.NET MVC实现自适应和组件的复用的更多相关文章
- 通过一个模拟程序让你明白ASP.NET MVC是如何运行的
ASP.NET MVC的路由系统通过对HTTP请求的解析得到表示Controller.Action和其他相关的数据,并以此为依据激活Controller对象,调用相应的Action方法,并将方法返回的 ...
- Asp.net Mvc模块化开发之分区扩展框架
对于一个企业级项目开发,模块化是非常重要的. 默认Mvc框架的AreaRegistration对模块化开发真的支持很好吗?真的有很多复杂系统在使用默认的分区开发的吗?我相信大部分asp.net的技术团 ...
- Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”
整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...
- Asp.net Mvc模块化开发之“部分版本部分模块更新(上线)”
项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统不是本文探讨的问题,但是重构后如何上线部署和本文关系密切.这个大家可 ...
- Asp.net Mvc模块化开发系列(目录)
模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...
- ASP.NET MVC使用Ninject
Ninject是一个快如闪电的,轻量级的.....依赖注入框架,呃呃呃,貌似很少用到,Ninject就是一个DI容器,作用是对ASP.NET MVC程序中的组件进行解耦 ,说到解耦其实也有其他的方式可 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
随机推荐
- CommandArgument传多个参数
CommandArgument='<%#Eval("id")+","+Eval("interName") %>'
- linux中时间的更改
# tzselectPlease identify a location so that time zone rules can be set correctly.Please select a co ...
- 关于内存数据与 JSON
闲话: 正在用 WebBroker 写一个小网站,感受颇多: 1.如果是写一个小东西,应该先考虑下 WebBroker,因为它是分分钟即可上手的. 2.如果要写一个大东西,或许也应该考虑下 WebBr ...
- mybatis 关联查询 association
<resultMap id="DutyPersonAndFileAndScoreMap" type="com.cares.asis.duty.entity.Duty ...
- Browser设置UA值
SWE Browser中的OptionMenu是Controller通过onKeyDown监听KEYCODE_MENU来显示的 public boolean onKeyDown(int keyCode ...
- freeCodeCamp:Check for Palindromes
如果给定的字符串是回文,返回true,反之,返回false. 如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文). 注意你需要去掉字符串多 ...
- VO,DO,DTO,PO,POJO，EJB
PO:persistent Object,持久化对象,和数据库一一对应. VO:view Object,视图对象,用于展示,把某个页面或者组件的数据封装起来. DO:Domain Object,领域对 ...
- Android 内存监测工具 DDMS --> Heap
一.什么是内存泄露 内存泄露是指程序中间动态分配了内存,但是在程序结束时没有释放这部分内存,从而造成那一部分内存不可用.导致系统运行变慢或应用程序崩溃.二.如何检测Android中的内存泄露 ...
- 安卓奇葩问题之：设置webView超时
我只想说:what a fucking day! 今天要做一个webView的超时功能,于是开始百度,一看貌似很简单啊,于是开始copy了下面的代码. import java.util.Timer; ...
- elasticsearch-索引
1.创建新索引 PUT:http://localhost:9200/twitter { "settings" : { "number_of_shards" : ...