在ASP.NET MVC项目中使用React
(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)
题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端。
目前我的项目是基于ABP框架的ASP.NET MVC/WEB API作为后端,AngularJS作为前端。但是发现钉钉官方的UI(SaltUI)是基于React封装的,另外AmazeUI的Touch版本也是React封装,也考虑到React性能更优,同时移动端网页的前端业务逻辑不会太复杂,就打算使用React来开发钉钉微应用页面。
ReactJS.NET介绍
要在ASP.NET MVC中集成React最简单的方式就是使用ReactJS.NET(http://reactjs.net/)。它提供了如下几个特性:
1,即时编译JSX文件为JS:在HTML中直接引用JSX文件,ReactJS.NET会自动把其编译为JS并缓存在服务端。这种方式特别适合开发过程。如:
2,通过流行的压缩和合并工具把JSX编译为JS:可以使用Cassette(http://getcassette.net/)或者ASP.NET内置的压缩合并特性,也可以集成Webpack或Browserify。如:
3,可以实现服务端组件渲染:可以利用访问点组件渲染来加快初始页面的加载。如:
ReactJS.NET安装和使用
要安装也很容易,根据你项目ASP.NET版本不同有所不同:
1,对于ASP.NET MVC 4 and 5,Install-Package React.Web.Mvc4
2,对于ASP.NET Core,Install-Package React.AspNet
3,对于ASP.NET MVC 3,Install-Package React.Web.Mvc3
4,如果要使用Cassette,还要Install-Package Cassette.React
5,如果要使用ASP.NET Bundling and Minification,还要Install-Package System.Web.Optimization.React
详细的使用方法可以浏览ReactJS.NET的教程:http://reactjs.net/getting-started/tutorial.html
我的技术选择和集成方式
我的项目使用的是React.Web.Mvc4,没有使用即时编译直接就利用System.Web.Optimization.React来和内置ASP.NET压缩合并功能集成(因为项目其他部分就用的这个),没有使用服务端渲染(因为服务端渲染需要在ReactConfig.cs文件中逐一添加jsx文件,我有空可能会pr一个添加jsx文件夹的commit,那样会方便一些)。我的大致步骤如下:
1,注册一些Bundle,来包含React的js、UI的js和自己应用的jsx,如下:
其中,我在app js部分,通过BabelBundle来实现合并过程进行jsx编译,且我只是包含了jsx的目录,这个目录中只需要入口组件和依赖组件,无需app.jsx这样的文件。
2,添加一个专用的Controller,在Action中返回相应的View并传递封装了所有props内容的ViewModel,如下:
3,在视图文件中引用相关的Bundle,并初始化React入口组件,如下:
至此,React就可以完美的和ASP.NET MVC融合在一起了。之前在前端如何调用后端的api,现在在React还是怎么调用。
在ASP.NET MVC项目中使用React相关推荐
- ajax调用fastreport,使用Ajax更新ASP.Net MVC项目中的报表对象
Ajax技术显著加快了Web应用程序的速度.另外,视觉效果方面也有提升.大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好.如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失 ...
- 在已有的Asp.net MVC项目中引入Taurus.MVC
Taurus.MVC是一个优秀的框架,如果要应用到已有的Asp.net MVC项目中,需要修改一下. 1.前提约定: 走Taurus.MVC必须指定后缀.如.api 2.原项目修改如下: web.co ...
- jNs 在 ASP.NET MVC 项目中的应用
最近做项目用到 ASP.NET Web Optimizatoin Framework,发现 Sea.js 的依赖加载在 Release 版本下不能很好的工作了--因为 Web.Optimizatoin ...
- asp.net mvc项目中遇到的古怪的问题,(项目中有frame框架)
大致是这样的,整个项目分上,左,右三个框架, 左侧是导航栏,根据部门id不同在右框架显示不同的部门人员信息 问题来了, 由于左侧是ajax无刷新树导航,所以按照mvc的原则,添加一个新路由大致为 ro ...
- AngularJS2 + ASP.NET MVC项目
环境:VS2015, NodeJS:v 6.5, npm: v3.10, AngularJs 2 通过将ASP.NET MVC项目与Angualr 2官网上的quick start整合的过程中遇到些问 ...
- 【初学者指南】在ASP.NET MVC 5中创建GridView
介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...
- 在ASP.NET MVC 模型中 选择最好的方法将多个model(数据模型)传递到视图
在ASP.NET MVC 模型中 选择最好的方法将多个model(数据模型)传递到视图 前提介绍 这个文章我们要讨论,在ASP.NET MVC模型的项目中,怎么选择一个最有效的方式来将多个数据模型(m ...
- ASP.net mvc开发中使用纯html如何创建FCKeditor编辑器的使用
http://www.cnblogs.com/esshs/archive/2008/12/03/1346326.html FCKeditor下载路径: http://sourceforge.net/p ...
- 在 ASP.NET Core 项目中使用 AutoMapper 进行实体映射
一.前言 在实际项目开发过程中,我们使用到的各种 ORM 组件都可以很便捷的将我们获取到的数据绑定到对应的 List<T> 集合中,因为我们最终想要在页面上展示的数据与数据库实体类之间可能 ...
- C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...
最新文章
- 如何在Ubuntu上使用ssh-add永久添加私钥? [关闭]
- 离散数学实验题目-集合
- 双编码器的自然语言图像搜索
- mysql-nt.exe w3wp.exe cpu 100%_w3wp.exe(IIS ) CPU 占用 100% 的常见原因及解决办法
- 形态学滤波:(1)腐蚀与膨胀 (2)开运算,闭运算,形态学梯度,顶帽,黑帽...
- 2套RAC环境修改scanip后客户端连接异常
- 数据结构与算法之-----二叉树(一)
- [USACO13OPEN]What's Up With Gravityp【最短路 / SPFA】
- 导入php插件_漏洞分析丨WordPress评论插件wpDiscuz任意文件上传
- JAVA JSP网上订餐系统JSP餐厅点餐系统源码JSP点餐系统JSP网上订餐系统JSP在线订餐系统
- ext2文件系统源代码之ext2.h
- kali Linux破解无线网密码
- 机械键盘POKER2的硬编程
- chronyd同步windows时钟源问题
- 判断四张扑克牌能否凑成24点游戏算法
- 常用的十大塑料成型工艺(优缺点介绍)
- java8学习整理二
- 11-1自动紧急制动AEB算法原理及系统组成
- python修改桌面壁纸_python设置windows桌面壁纸的实现代码
- 2022年Java面试心得,如何设计一个优雅的RESTFUL的接口
热门文章
- 例4.6 素数判定 - 九度教程第50题(素数筛法)
- php fprintf,PHP fprintf() 函数 - PHP 教程 - 菜鸟学堂-脚本之家
- mysql错误1215hy000_无法添加外键约束-MySQL错误1215(HY000)
- MATLAB中ones()函数的用法
- 141.3. 单机安装 CentOS 5 + hadoop-0.20.0
- Intel DCM 携手DELL共同推出关于DCIM的联合调研
- iOS中 百度地图详解
- [控件]GridView网格视图
- 强人工智能:抑制神经元的意义
- Bing API 将新增 Bing 空间数据服务