【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO實現CRUD操作


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太重,各種微型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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM