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>

asp.net mvc版代码下载

纯HTML版本下载

大功告成。

时间： 2024-10-10 22:46:20

React+BootStrap+ASP.NET MVC实现自适应和组件的复用的相关文章

.NET Core 下 ASP.NET MVC 使用 Elmah 日志组件

.NET Core 下项目Elmah的配置和Framework下有所区别,总结一下简单使用 1.添加ElmahCore的NuGet包 2.注册Elmah服务 services.AddElmah(); //默认配置默认配置下:日志在/Elmah路径,如 http://localhost:1996/elmah services.AddElmah(option => { option.Path = "/elm"; //设置路径 }); Elmah的记录方式有三种: Memo

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站

1.0 为什么要做这个博客站? www.zynblog.com 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为宝库

ASP.NET MVC+Bootstrap 实现短信验证

短信验证大家都已经很熟悉了,基本上每天都在接触手机短信的验证码,比如某宝,某东购物,网站注册,网上银行等等,都要验证我们的手机号码真实性.这样做有什么好处呢. 以前咱们在做网站的时候,为了提高用户注册的质量,防止用户恶意注册,都会设置一些小阻碍,如网页验证码.邮件认证等等.但是道高一尺魔高一丈,很快网站的这些设置都被一些网络黑客利用注册机逐一攻破,这些功能也就随之变成了摆设. 但是魔高一丈道高两丈,随着移动设备的普及,短信验证的功能横空出世.他的出现轻松的排除了传统网站验证码的弊端,还提升了网站

ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

[备用]权限设计方案、如何使用session、MVC如何使用模板、DropdownList、怎么添加Bootstrape框架、使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)

1.权限设计方案: http://jingyan.baidu.com/article/9f63fb91ae22bac8410f0e70.html 2.如何使用session: 控制器中使用session namespace me.Controllers { public class LoginController : Controller { // // GET: /Login/ public ActionResult Index() { //设置session this.HttpContext

ASP.NET MVC使用Bootstrap系列（5）——创建ASP.NET MVC Bootstrap Helpers

序言 ASP.NET MVC允许开发者创建自定义的HTML Helpers,不管是使用静态方法还是扩展方法.一个HTML Helper本质上其实是输出一段HTML字符串. HTML Helpers能让我们在多个页面上公用同一段HTML标记,这样不仅提高了稳定性也便于开发者去维护.当然对于这些可重用的代码,开发者也方便对他们进行单元测试.所以,创建ASP.NET MVC Bootstrap Helpers是及其有必要的. 内置的HTML Helpers ASP.NET MVC内置了若干标准HTML

ASP.NET MVC Bootstrap极速开发框架

前言每次新开发项目都要从头开始设计?有木有一个通用的快速开发框架?并且得是ASP.NET MVC And Bootstrap?数据库不要手工创建?框架对未来业务支持的扩展性好?这么简单的功能还需要一天搭建基础环境?能不能只关心我所需要的业务? 有这样的一个项目,基于ASP.NET MVC.EntityFramework.Memcached.Bootstrap的快速项目开发框架,只需3秒钟即可创建一个带有简单用户管理的项目. 一键安装懒人一键安装包下载地址,双击“install.bat”批处

Bootstrap in ASP.NET MVC 5

一,新建ASP.NET MVC 5 项目 Bootstrap 文件分布引入到页面 1.定义.注意:不要包含有.min.的文件名称,会被忽略,因为在发布的时候编译器会加载min版的文件 2.在母版页中引用上面的定义最后一步,程序启动时加载定义的绑定启用压缩js,css 运行后看页面源码: 压缩前时这样的:

ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap

阅读目录 Bootstrap结构介绍在ASP.NET MVC 项目中添加Bootstrap文件为网站创建Layout布局页使用捆绑打包和压缩来提升网站性能在Bootstrap项目中使用捆绑打包测试打包和压缩小结作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的.特别是对于Windows Form的开发者而言,更是难上加难. 正是由于这样的原因,Bootstrap诞生了.Twitter Bootstrap为开发者提供了丰富的CS