React+BootStrap+ASP.NET MVC實現自適應和組件的復用

本文轉載自查看原文 2016-11-15 23:01 2506 前端開發/ MVC/ asp.net和asp.net mvc/ React/ 組件復用

系統展示如下

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>)
  }
})

View Code

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%"
          )
        )
      )
    );
  }
});

View Code

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"
              )
            )
          )
        )
      )
    );
  }
});

View Code

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>

View Code

在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>

View Code

asp.net mvc版代碼下載

純HTML版本下載

大功告成。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 react圖片自適應組件 Qt高仿Excel表格組件-支持凍結列、凍結行、內容自適應和合並單元格 Android ListView高度自適應和ScrollView沖突解決 React組件復用方式 bootstrap 移動自適應界面 Bootstrap 自適應排列順序 ASP.NET：使用Flurl制作可復用的分頁組件【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO實現CRUD操作 Asp.Net MVC+BootStrap+EF6.0實現簡單的用戶角色權限管理2 Asp.Net MVC+BootStrap+EF6.0實現簡單的用戶角色權限管理3