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>
大功告成。
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器