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

一、需求：

1.1）頁面要美觀大氣

1.2）前端代碼要簡潔清晰，要用MVC或是MVVM框架

1.3）服務端要用MVC框架，要Rest風格

1.4）數據訪問要用ORM

 

二、效果：

2.1）列表

2.2）分頁

2.3）新增

2.4）修改

三、技術考慮：

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貌似更簡單方便一些

 

四、Knockout.JS的理解：

參看一下Artech老師的圖就很明白數據的流向和處理的過程了

 

五、框架的搭建：

無腦操做，各類前端庫、後端庫這樣放放就OK了

 

六、一些技術點：

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