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 ...
随机推荐
- 获取WINDOW.OPEN url js中的get取值
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)( ...
- PHP declare(ticks=N); 的作用
一般用法是 declare(ticks=N);拿declare(ticks=1)来说,这句主要作用有两种: 1.Zend引擎每执行1条低级语句就去执行一次 register_tick_function ...
- js 判断字符为空
function checkIsNull(value){ if(typeof value=='undefined'){ return true; } if(value==null){ return t ...
- 【JAVA】通过HttpClient发送HTTP请求的方法
HttpClient介绍 HttpClient 不是一个浏览器.它是一个客户端的 HTTP 通信实现库.HttpClient的目标是发 送和接收HTTP 报文.HttpClient不会去缓存内容,执行 ...
- java操作word，excel，pdf
在平常应用程序中,对office和pdf文档进行读取数据是比较常见的功能,尤其在很多web应用程序中.所以今天我们就简单来看一下java对word.excel.pdf文件的读取.本篇博客只是讲解简单应 ...
- 一个叫 team 的表，里面只有一个字段name, 一共有4 条纪录，分别是a,b,c,d, 对应四个球队，现在四个球队进行比赛，用一条sql 语句显示所有可能的比赛组合.
select *from timp a, timp b where a.name > b.name 结果:
- IE9 不F12打开控制台，代码不执行。打开后正常
对每个前端er来说,提起来ie就是头大,各种兼容性的问题,让人头大.前两天就在ie9下遇到一个比较少见的问题. 具体情况是这样的: ie9下,js不执行,各种绑定事件不起作用.其他浏览器都6得飞起.当 ...
- 9月15日，YTFCloud，创业圈的技术新宠
成都创业圈近期什么最热? 资本复苏?这本来就是高低起伏规律而已,再说动辄千万的大手笔,对于创业新人.新团队来说太遥远,早期根本无法变现,而资金紧张.项目开发费用超标.没有技术大牛保障等尖锐现实问题能否 ...
- web浏览器工作原理
HTML在浏览器里的渲染原理 我们打开的页面(Web页面)在各种不同的浏览器中运行,浏览器载入.渲染页面的速度直接影响着用户体验,简单地说下页面渲染,页面渲染就是浏览器将html代码根据CSS定义的规 ...
- Mysql --分区(4)List分区
LIST分区 LIST分区是建立离散的值列表告诉数据库特定的值属于哪个分区,LIST分区在很多方面类似于RANGE分区,区别在LIST分区是从属于一个枚举列表的值得集合,RANGE分区是从属于一个连续 ...