基于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的更多相关文章

  1. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap

    按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这段时间都是在学习IOS开发,没顾得上写,也没顾得上维护OrchardNoCMS代码.看看我的活动轨迹 ...

  2. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二)

    基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二) 之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了 ...

  3. 开发框架(OrchardNoCMS)介绍(一)

    基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(一) Orchard CMS是针对CMS开发的,对于很多开发需求来说,内容管理这块儿可能并不需要,而需要它的模块式开发 ...

  4. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--瘦身计划

    Orchard CMS是针对CMS开发的,对于很多开发需求来说,内容管理这块儿可能并不需要,而需要它的模块式开发模式.所以我这里通过对OrchardCMS进行瘦身,去除 内容管理部分的内容,保留简单的 ...

  5. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--AOP编程

    AOP编程在目前来说好像是大家都比较喜欢的.ASP.NET MVC中的Filter就是使用AOP实现的配置器模式.AOP在编码中的应用主要有如下几个方面: 日志记录,跟踪,优化和监控 事务的处理 持久 ...

  6. 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--模块开发

    之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了大家的评论,有以下几个问题: 1.希望有更多的文档说明. 2.希望介绍下Orchard的 ...

  7. 优秀的WEB前端开发框架:Bootstrap!

    其实早就对Bootstrap有所耳闻,大概了解这哥们是做WEB前端的 但直到昨天以前,还没有对他产生任何深入了解的兴趣 冷落他的主要原因还是觉得会束缚手脚,毕竟自己多年来在WEB前端的积累一直没有停滞 ...

  8. OrchardNoCMS

    基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap 按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这 ...

  9. 【读书笔记《Bootstrap 实战》】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

随机推荐

  1. CentOS 7 下安装 LEMP 服务(nginx、MariaDB/MySQL 和 php)

    原文 CentOS 7 下安装 LEMP 服务(nginx.MariaDB/MySQL 和 php) LEMP 组合包是一款日益流行的网站服务组合软件包,在许多生产环境中的核心网站服务上起着强有力的作 ...

  2. MySQL JDBC的queryTimeout坑

    遇到一个MySQL JDBC跑execute规定的方法queryTimeout坑,更恶心,无论是BUG,不能,^_^,为什么要说?请看下面的说明: 现象: 用同一个Connection运行大批量SQL ...

  3. OS X升级到10.10使用后pod故障解决方案出现

    最新的mac 10.10强大的好奇心,所以,你的系统升级到10.10.结果表明,使用pod出现下述问题: /System/Library/Frameworks/Ruby.framework/Versi ...

  4. c#有关udp可靠传输(包传输数据包) 升级

    在c#有关udp可靠传输(包传输数据包)我们讨论,UDP包的发送,可是上一个程序有一个问题.就是数据比較大.一个Message类序列化后都有2048B,而实际的数据量也就只是 50B罢了,这就说明当中 ...

  5. Middleware详解

    Middleware详解 在第1章项目结构分析中,我们提到Startup.cs作为整个程序的入口点,等同于传统的Global.asax文件,即:用于初始化系统级的信息(例如,MVC中的路由配置).本章 ...

  6. php_中替换换行符

    //php 有三种方法来解决 //1.使用str_replace 来替换换行 $str = str_replace(array("\r\n", "\r", &q ...

  7. c++双缓冲技术,以避免闪烁绘图

    当数据量非常大时,画图可能须要几秒钟甚至更长的时间,并且有时还会出现闪烁现象,为了解决这些问题.可採用双缓冲技术来画图. 双缓冲即在内存中创建一个与屏幕画图区域一致的对象,先将图形绘制到内存中的这个对 ...

  8. DP 水的问题

    假设的自然数N的K随机二进制表示是不相邻的两个相邻的数字.那么我们说这个数字是K好一些. 乞讨L地点K十六进制数K的相当数量的数. 例如K = 4.L = 2什么时候.整个K好一些11.13.20.2 ...

  9. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

  10. 財智V6.0(完美破解序列号特别版)

    財智V6.0(完美破解序列号特别版)               財智V6.0(完美破解序列号特别版)   財智6是眼下唯一在中央台报道的.比較成熟的国产理財软件.能全面管理家庭的日常收入.消费.储蓄 ...