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


     

     image

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

    image 

    最近这两周快过年了,刚好写一篇博客来消磨时间,也顺便希望可以对大家有所帮助。

    由于我精简后的版本中去掉了Orchard.jQuery模块,所以首先我建立了一个模块来存放我需要的所有JS和CSS文件。

    image

    创建一个ResourceManifest文件,它实现了接口IResourceManifestProvider。通过该类来把脚本和样式文件定义好。

    image

    可以看到主要用到了jQuery,bootstrap,knockoutjs等,需要注意的是amberme.js是我们封装好的一个脚本,通过它可以方便的绑定数据。

    接下来我们需要在当前皮肤的Layout页面中加入我们定义的JS文件和CSS文件。Orchard本身提供了一套资源管理机制。所以对应的引用机制你如果不了解可以先看一下下面的代码:

    image

    对于JS文件的引用使用Script.Reuire()来获取JS文件,Style.Require()获取CSS文件。AtHead()方法表示该脚本需要放到Head节点,另外还有几种方法可以参考代码,或者自己试试。

    接下来还是使用Orchard.Car模块作为例子也说明如何使用我们的UI库。

    之前的Car模块有个CarController,我们对应的为它的Index这个Action创建一个Index.cshtml,对应的Add这个Action对应的添加一个Add.cshtml页面。

    在Index页面中,首先我们需要种一排按钮,HTML如下:

    image

    绑定数据的列表HTML如下:

    image

    后台只负责传过来数据,具体的列名自己在HTML种定义,有很大的灵活性。

    页面 加载完成后,绑定数据的初始化如下:

    image

    对应的还提供了很多功能,例如点击按钮后的回调,绑定数据前或者绑定完成后的函数调用等等。可以自己看看代码(Amberme.js)。

    image

    运行界面如下:

    image

    在上面种增删改的按钮时,我们已经看到buttony有个属性是data-template-url,新增按钮的这个属性为/car/add;所以当点击该按钮时,会弹出car控制器对应的add这个Action的View页面:

    image

    弹出的页面必须是个Form,这样我们在提交表单时,使用jQuery.form的ajax提交,会有更好的体验,而所有这些提交和验证操作都已经在amberme.js中封装好。你只需要配置正则表达式或者是属性就行啦。

    新增界面如下:

    image

    以上就是OrchardNoCMS的Bootstrap示例,可以到https://github.com/nicholaspei/OrchardNoCMS 下载完整代码。

  • 相关阅读:
    MongoDB 聚合函数及排序
    MongoDB 关系运算符及统计个数及跳过分页
    MongoDB 正则表达式查询
    MongoDB 范围查询
    MongoDB 逻辑运算符
    MongoDB数据库
    python 判断文件夹存在,不存在创建文件夹
    MySQL 数据库操作
    MySQL 数据库连接命令
    PyCharm Django 显示一个简单页面
  • 原文地址:https://www.cnblogs.com/n-pei/p/3534058.html
Copyright © 2020-2023  润新知