1、需求:

1.1)页面要美观大气

1.2)前端代码要简洁清晰,要用MVC或是MVVM框架

1.3)服务端要用MVC框架,要Rest风格

1.4)数据访问要用ORM

2、效果:

2.1)列表

2.2)分页

2.3)新增

2.4)修改

3、技术考虑:

3.1)考虑到页面的美观大气,在没有美工的情况下,Bootstrap的确是一个很好的选择

3.2)前端框架选择了MVVM的Knockout.JS,大概是因为Microsoft在自己的项目模板里都自带了这个框架吧,所以一直对它挺有好感

3.3)ASP.Net MVC现在都已经出到5了吧,各种成熟了,我用的VS2010,随手用个3

3.4)Entity Framework太重,NHibernate好像都不更新了吧,各种微型ORM用起来,对比Dapper、Massive等,PetaPOCO貌似更简单方便一些

 

4、Knockout.JS的理解:

参看一下Artech老师的图就很明白数据的流向和处理的过程了

5、框架的搭建:

无脑操作,各种前端库、后端库这样放放就OK了

6、一些技术点:

6.1)路由的修改:

我这里只用到了人员编号(PersonID)在页面间传递,所以修改了Global.asax文件中的routes.MapRoute中的参数"{controller}/{action}/{PersonID}",这样我用来接收这种Rest风格参数的地方定义为PersonID就可以接收到了

6.2)分页控件的使用:

为了配合Bootstrap框架,分页控件这里也用了Bootstrap风格的控件(jqPaginator),代码稍微修改了一点。

分页嘛,无外乎要知道当前页面的数据、总共几页、当前是哪一页等几个关键的内容,后端使用PetaPOCO这个微型ORM框架,直接能得到Page<T>类型的数据集合,再剥离封装一下就好了。

前端设置相应的属性接收后端扔来的数据就好了。

后端来的页面数据给KO的观察者对象

其他的直接付给分页控件使用就好了

当分页控件点击时,对应的找找控制器、传递传递页面值就完事了。

下载地址:http://pan.baidu.com/s/1ntsj4MX

【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作的更多相关文章

  1. Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...

  2. Asp.Net Web API 2(CRUD操作)第二课

    Asp.Net Web API 2(CRUD操作)第二课 Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok ...

  3. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  4. Knockout.js, Asp.Net MVC and Bootstrap 前端设计

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. ASP.NET MVC3 实例(六) 增加、修改和删除操作(二)

    http://www.jquery001.com/asp.net-mvc3-instance-add-update-delete2.html 上篇我们在 ASP.NET MVC3 中实现了添加操作,由 ...

  7. 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战

    之前在一家公司里用过Knockout,是easyui 和 Knockout结合 的.下面的这本应该不错. 目录 前言 第一部分入门指南 第1章MVC介绍 创建第一个项目 分析HomeControlle ...

  8. ASP.Net MVC3 图片上传详解(form.js,bootstrap)

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  9. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

  1. 初识npm

    一.npm简介: npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行.支持的第三方模块最多的包管理器. npm的初衷:JavaS ...

  2. Eclipse使用Git教程

    A:点击Window--->Show view--->other..--->Git Repositories--->[OK] B:克隆码云上的代码仓库 C:选择对应目录存储你的 ...

  3. C++ std::list

    std::list template < class T, class Alloc = allocator > class list; List Lists are sequence co ...

  4. [转] STM32各种时钟的区别

    [原创]:http://m.oschina.net/blog/129357 我在原创的基础又从另一位博主处引用了一些内容. 时钟系统是处理器的核心,所以在学习STM32所有外设之前,认真学习时钟系统是 ...

  5. Html5 简单选择排序演示

    简单选择排序,是选择排序算法的一种.基本思想:每趟从待排序的记录中选出关键字最小的记录,顺序放在已排序的记录序列末尾,直到全部排序结束为止.由于在每次循环中,会对数值相等的元素改变位置,所以属于非稳定 ...

  6. 给 Android 研发的一些的建议

    作为应用程序开发人员,我们需要注意在开发应用程序时的一些问题. 这些问题的安全级别是取决于应用程序的类型和使用域. 在这里列举了一些我们在开发中需要注意的一些问题: 开发日志输出相关: 1. 不要在 ...

  7. Git技巧:右键菜单怎么去除?

    如果你是按照http://www.cnblogs.com/dunitian/p/5034624.html 那么你就没有这么多蛋疼的菜单了(反之:vs帮你安装的就蛋疼了) 说下解决方法: 1.Win+R ...

  8. 【.net 深呼吸】记录WCF的通信消息

    前面老周给大伙伴们介绍了把跟踪信息写入日志文件的方法,今天咱们换个类似的话题来扯一下,对了,咱们就说说怎么把WCF的往来消息log下来吧. 尽管在现实生活中,我们不主张偷窥他人信息,不过,偷窥程序信息 ...

  9. ASP.NET Core的配置(5):配置的同步[ 实例篇]

    ConfigurationBuilder在生成以Configuration对象的时候会利用注册其中的ConfigurationProvider加载原始的配置数据,那么一旦配置源中的数据发生变化,应用程 ...

  10. cmder git bash 使用

    cmder 是一款 windows 下的命令集合软件,它可以集合各种系统下的命令,并且操作非常快速方便. 安装有两个版本,一个是简化版(4.27M),一个是完全版(75.7M),它们的唯一区别:完全版 ...