开发框架(OrchardNoCMS)--BootStrap
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap
按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库。之前这段时间都是在学习IOS开发,没顾得上写,也没顾得上维护OrchardNoCMS代码。看看我的活动轨迹就知道啦:
最近这两周快过年了,刚好写一篇博客来消磨时间,也顺便希望可以对大家有所帮助。
由于我精简后的版本中去掉了Orchard.jQuery模块,所以首先我建立了一个模块来存放我需要的所有JS和CSS文件。
创建一个ResourceManifest文件,它实现了接口IResourceManifestProvider。通过该类来把脚本和样式文件定义好。
可以看到主要用到了jQuery,bootstrap,knockoutjs等,需要注意的是amberme.js是我们封装好的一个脚本,通过它可以方便的绑定数据。
接下来我们需要在当前皮肤的Layout页面中加入我们定义的JS文件和CSS文件。Orchard本身提供了一套资源管理机制。所以对应的引用机制你如果不了解可以先看一下下面的代码:
对于JS文件的引用使用Script.Reuire()来获取JS文件,Style.Require()获取CSS文件。AtHead()方法表示该脚本需要放到Head节点,另外还有几种方法可以参考代码,或者自己试试。
接下来还是使用Orchard.Car模块作为例子也说明如何使用我们的UI库。
之前的Car模块有个CarController,我们对应的为它的Index这个Action创建一个Index.cshtml,对应的Add这个Action对应的添加一个Add.cshtml页面。
在Index页面中,首先我们需要种一排按钮,HTML如下:
绑定数据的列表HTML如下:
后台只负责传过来数据,具体的列名自己在HTML种定义,有很大的灵活性。
页面 加载完成后,绑定数据的初始化如下:
对应的还提供了很多功能,例如点击按钮后的回调,绑定数据前或者绑定完成后的函数调用等等。可以自己看看代码(Amberme.js)。
运行界面如下:
在上面种增删改的按钮时,我们已经看到buttony有个属性是data-template-url,新增按钮的这个属性为/car/add;所以当点击该按钮时,会弹出car控制器对应的add这个Action的View页面:
弹出的页面必须是个Form,这样我们在提交表单时,使用jQuery.form的ajax提交,会有更好的体验,而所有这些提交和验证操作都已经在amberme.js中封装好。你只需要配置正则表达式或者是属性就行啦。
新增界面如下:
以上就是OrchardNoCMS的Bootstrap示例,可以到https://github.com/nicholaspei/OrchardNoCMS 下载完整代码。
开发框架(OrchardNoCMS)--BootStrap的更多相关文章
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap
按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这段时间都是在学习IOS开发,没顾得上写,也没顾得上维护OrchardNoCMS代码.看看我的活动轨迹 ...
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二)
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二) 之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了 ...
- 开发框架(OrchardNoCMS)介绍(一)
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(一) Orchard CMS是针对CMS开发的,对于很多开发需求来说,内容管理这块儿可能并不需要,而需要它的模块式开发 ...
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--瘦身计划
Orchard CMS是针对CMS开发的,对于很多开发需求来说,内容管理这块儿可能并不需要,而需要它的模块式开发模式.所以我这里通过对OrchardCMS进行瘦身,去除 内容管理部分的内容,保留简单的 ...
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--AOP编程
AOP编程在目前来说好像是大家都比较喜欢的.ASP.NET MVC中的Filter就是使用AOP实现的配置器模式.AOP在编码中的应用主要有如下几个方面: 日志记录,跟踪,优化和监控 事务的处理 持久 ...
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--模块开发
之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了大家的评论,有以下几个问题: 1.希望有更多的文档说明. 2.希望介绍下Orchard的 ...
- 优秀的WEB前端开发框架:Bootstrap!
其实早就对Bootstrap有所耳闻,大概了解这哥们是做WEB前端的 但直到昨天以前,还没有对他产生任何深入了解的兴趣 冷落他的主要原因还是觉得会束缚手脚,毕竟自己多年来在WEB前端的积累一直没有停滞 ...
- OrchardNoCMS
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap 按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这 ...
- 【读书笔记《Bootstrap 实战》】1.初识Bootstrap
作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...
随机推荐
- neu1458 方格取数 dp解法
题意: 有N * N个格子,每一个格子里有正数或者0,从最左上角往最右下角走,仅仅能向下和向右,一共走两次(即从左上角走到右下角走两趟),把全部经过的格子的数加起来,求最大值SUM,且两次假设经过同一 ...
- String.Split()功能
我们在过去的教训 String.Join功能(http://blog.csdn.net/zhvsby/archive/2008/11/28/3404704.aspx).当中用到了String.SPli ...
- React.js终探(五)
在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...
- maven_基本配置
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- Matlab学习第二天 利用插值
插入值一切手段: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDQ5MjI1Nw==/font/5a6L5L2T/fontsize/400/fi ...
- yii 使用 mongodb 小工具 YiiMongoDbSuite
YiiMongoDbSuite下载链接: http://www.yiiframework.com/extension/yiimongodbsuite/ 如果你的yii和mongodb它已经建立了一个良 ...
- 【高德地图API】如何制作自己的旅游地图?
原文:[高德地图API]如何制作自己的旅游地图? “旅行的梦想并不遥远,只要一颗流浪四方的心.”——唐人立. 最早认识唐人立的时候,他还是大二的学生.他独自完成了“南京20年规划地图”.几年前,他完成 ...
- iOS开发的一些奇巧淫技2
能不能只用一个pan手势来代替UISwipegesture的各个方向? - (void)pan:(UIPanGestureRecognizer *)sender { typedef NS_ENUM(N ...
- Front End Books
Front End Books 记录和推荐一些认为还不错的前端方面的书籍.列入标准: 看过,并觉得值得推荐给大家的. 正在看的,已经觉得不错的,或者听闻别人说不错的. 打算看的,经多人推荐,一致认为必 ...
- 复习一下SpringMVC的工作原理
上面的是springMVC的工作原理图: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配DispatcherServlet的请求映射路径(在web.xml中 ...