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 ...
随机推荐
- 很实用的jQuery事件 - toggle() 方法
实例 切换不同的背景色: $("p").toggle( function(){ $("body").css("background-color&quo ...
- log4net记录日志到数据库自定义字段
假设数据库中有如下自定义字段: 1.根据自定义字段定义日志信息对象 public class MessageLog { /// <summary> ...
- 【随笔】ARP和RARP
ARP协议是什么? ARP协议是"Address Resolution Protocol"(地址解析协议)的缩写.在局域网中,网络中实际传输的是"帧",帧里面是 ...
- 如何绑定android点击事件--跳转到另一个页面并实现关闭功能？
一.点击按钮跳转到另一个页面. eg:实现从一个页面点击跳转到另一个页面 1.首先在一个布局文件(.XML)中绘画了一个跳转按钮(id为btn1): <Button androi ...
- SDWebImage实现原理--两张图带你看懂
SDWebImage底层实现有沙盒缓存机制,主要由三块组成:1.内存图片缓存,2.内存操作缓存,3.磁盘沙盒缓存 SDWebImage GitHub地址 版本4.0.0 一.SDWebImage时序图 ...
- C#字段中加入list<类字段> 的两种写法
类1 public class NumCon { public string zsNum { get; set; } } 类2 public class RepeatMess //重复数据响应 { p ...
- Silverlight 上传文件源代码
public class FileUploadArgs : EventArgs { public string FileName { get; set; } public Exception Ex { ...
- freeCodeCamp:Find the Longest Word in a String
找到提供的句子中最长的单词,并计算它的长度. 函数的返回值应该是一个数字. /* 先把字符串 str 转为数组 myarr 将数组myarr中的每个元素长度转换成一个新的数组newarr 将这个数组按 ...
- iis+php+mysql
来源:http://www.ttjcnet.com/forum.php?mod=viewthread&tid=137&extra= 首先下载php-5.2.0-win32.zip,my ...
- java经典50编程题
菲波拉契数列:有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? package com.day2; public ...