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

最新推荐文章于 2024-06-04 09:42:00 发布
最新推荐文章于 2024-06-04 09:42:00 发布
阅读量2.7k 收藏 6
点赞数
分类专栏： ASP.NET MVC4|MVC5 文章标签： bootstrap 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>)
  }
})

sx不能被直接引用。我们要用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>

运行结果如图:

这里写图片描述

这里写图片描述

这里写图片描述

.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于react+asp.net core开发的单点登录系统.zip
03-13
在这个React+ASP.NET Core的SSO系统中，通常会采用OAuth2或OpenID Connect协议实现。用户登录后，系统会生成一个安全的令牌，该令牌可以在用户访问其他子系统时进行身份验证，避免多次输入用户名和密码。 六、安全...
Asp.net MVC 使用 ReactJS
anfeiqu4953的博客
01-08 606
新建项目 新建MVC4 项目 安装ReactJS.NET 新建ReactJSController using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ReactJsDemo.Co...
探索ASP.NET与React的完美结合：AspNetReactSamples
最新发布
gitblog_00071的博客
06-04 408
探索ASP.NET与React的完美结合：AspNetReactSamples 项目地址:https://gitcode.com/JonPSmith/AspNetReactSamples 欢迎来到这个ASP.NET解决方案，它揭示了如何在ASP.NET Core 1.0.0和ASP.NET MVC5中整合、构建并单元测试React前端应用。本项目遵循MIT许可，由一系列详细的文章支持，带你深入实践...
ASP.NET Core 集成 React SPA 应用
dotNET跨平台
03-20 552
AgileConfig的UI使用react重写快完成了。上次搞定了基于jwt的登录模式（AntDesign Pro + .NET Core 实现基于JWT的登录认证），但是还有点问题。现在...
使用引入react文件的方式 使用bootstrap模板 构建react订餐网站项目单个页面入门教程
LimonSea的博客
07-01 974
这个是我react的入门项目, 因为使用了bootstrap模板, 若使用create-react-app 或者webpack等构建服务器项目就比较复杂, 所以本项目只使用了最简单的 在HTML页面引入react 的方式 构建项目. 教程使用的模板页面如下: 项目已传到git上，上链接~ 该链接默认会在原窗口打开，建议右键新窗口打开~ 第一步: 引入react. (为了避免忘记...
在ASP.NET MVC项目中使用React
weixin_34001430的博客
08-26 924
（此文章同时发表在本人微信公众号“dotNET每日精华文章”，欢迎右边二维码来关注。) 题记：最近在开发钉钉的微应用，考虑到性能和UI库的支持，遂采用了React来开发前端。 目前我的项目是基于ABP框架的ASP.NET MVC/WEB API作为后端，AngularJS作为前端。但是发现钉钉官方的UI（SaltUI）是基于React封装的，另外AmazeUI的Touch版本也是React封装...
省市联动查询ASP.NET MVC实现
04-16
在本项目中，我们将探讨如何使用ASP.NET MVC来实现这样的功能。 首先，我们要理解ASP.NET MVC的基本架构。MVC（Model-View-Controller）模式是一种设计模式，用于构建可维护性和可测试性较高的Web应用程序。在ASP...
Asp.net MVC + Backbone + React DEMO
08-10
这涉及到的知识点包括Asp.net MVC的路由、控制器、模型和视图，Backbone的模型、视图、集合和路由器，以及React的组件化开发和虚拟DOM操作。同时，也涵盖了版本控制、IDE配置和依赖管理等实践性技巧。
samples related to react.js with asp.net mvc.zip
07-11
8. **错误处理和调试**：学会使用Chrome DevTools、React Developer Tools和Visual Studio的调试工具，对React和ASP.NET MVC应用进行调试。 9. **性能优化**：考虑使用代码分割、懒加载等技术减少首次加载的时间，...
c#基于react+asp.net core开发的单点登录系统
04-18
在本项目中，我们探讨的是一...综上所述，这个项目展示了如何结合C#、React.js 和 ASP.NET Core 实现一个高效、安全的单点登录系统，涵盖了后端开发、前端UI设计以及数据库和缓存的运用，体现了现代Web开发的最佳实践。
React性：一个ASP.Net Core＆React App
02-11
React性：一个ASP.Net Core＆React App
ToDoApp:将ASP.NET MVC与React一起使用的待办事项
04-29
待办事项 将ASP.NET MVC与React一起使用的待办事项
react+bootstrap商城项目
04-26
react+bootstrap商城项目
isomorphic:简单的同构React + Flux + Express + Bootstrap骨架
05-23
简单同构 该项目模板是基于Facebook的库和架构的Web应用程序（SPA）的框架。 您可以使用它来快速引导您的Web应用程序项目。 该项目模板的所有部分都可以轻松更换。目录布局 .├── /dist/ # The folder for ...
大三下学期课程设计项目，一个外卖网站的前端代码 一个React入门者的初探 使用React+Bootstrap模板.zip
11-17
使用React+Bootstrap模板.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、期末大作业和毕设项目的学生、...
ASP.NET Core和React搭建的数据显示网站——项目搭建（一）
shanzhongbao的博客
03-30 1656
网站后端使用Asp.net Core ，前端使用React，以Vite作为web开发构建工具。网站实现用户身份认证、权限分配，离散点等值线绘制，数据统计分析等功能。后端编程语言为C#，前端为type script，服务器使用腾讯云，数据库为mysql。IDE使用Visual Studio 2022。
ASP.NET Core 集成 React SPA 应用
weixin_45032957的博客
03-16 276
ReactUIMiddleware namespace AgileConfig.Server.Apisite.UIExtension { public class ReactUIMiddleware { private static Dictionary<string, string> _contentTypes = new Dictionary<string, string> { {".html", “text/html; charset=utf-8”}, {".css", “te
基于REACT和.NET CORE集成WINDOWS身份验证
farway000的博客
09-23 815
有很多方法可以向您的应用程序添加身份验证。虽然OAuth是最常见的一种，但这并不是您唯一的选择。今天，我将向您展示如何通过React和.NET Core简单地完成Windows身份验证。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值