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 ...
随机推荐
- 技术英文单词贴--P
P pagination 分页,页码 parse 解析,从语法上描述或分析 partial 局部的 pattern 模式 populate 填充,居住于,构成人口 precedence 优先 pref ...
- Linux命令（2）- mv
mv 功能:可以用来移动文件或者将文件改名. 格式:mv [选项] 源文件或目录 目标文件或目录 说明:mv命令将文件重命名或将其移至一个新的目录中.第二个参数类型是文件时,mv命令完成文件重命名,此 ...
- eclipse插件egit安装使用
转载http://blog.csdn.net/zhangdaiscott/article/details/16939165 安装问题解决: 1 Cannot complete the install ...
- Asp.Net MVC4入门指南（2）：添加一个控制器
MVC代表: 模型-视图-控制器 .MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据 ...
- AngularJs自定义指令详解（3） - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
- django 创建项目
django-admin startproject project-name 启动服务器 python manage.py runserver 0.0.0.0:8000 配置ALLOW_HOST
- 修改默认MYSQL数据库data存放位置
随着业务量的增长,mysql默认安装所在分区大小出现瓶颈,通常需要将datadir换到较大的分区 示例原目录:/usr/local/mysql/data/示例新目录:/data/mysqldata/ ...
- 反射生成SQL语句
public static int Reg(Model ml) { bool b = true; Visit vt = new Visit(); StringBuilder builder = new ...
- Wordnet的一些简单使用
转载请说明出处:http://www.cnblogs.com/KingKou/p/4121373.html 1.简介 Wordnet是一个由普林斯顿大学认识科学实验室在心理学教授乔治·A·米勒的指导下 ...
- node-restify简介
restify 是Node.js的模块.虽然restify的API或多或少的参考了express,但restify不是一个MVC框架,它是一套为了能够正确构建REST风格API而诞生的框架. ###安 ...