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版本下载

大功告成。