[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(9)–WebAPI實作分頁

* 本篇目標

將WebAPI的資料在後端進行分頁

* Angular.ui.Bootstrap UI

Angular.ui.Bootstrap 能將一些Bootstrap JavaScrip 的功能，使用Angular.js Data Binding的方式來呈現，且CSS樣式還是以Bootstrap為主，是一個還不錯的UI搭配選擇。首先先透過Nuget安裝，並載入。

* 開始擴充 BLL –> Web API –> View

分層的好處就是如果功能要擴充，對我來講會很直覺的一層一層去實作，而不會像所有程式碼都在一起，可維護性就比較差。

BLL層，我們增加兩個參數 : 目前頁數及顯示頁數，回傳總數量

Web API ，向BLL要分頁的資料

可以用瀏覽器來測試，傳入分頁參數

View ( Angular.js)

記得之前有稍微提到Angular.js因都模組化，如需要某些功能，可以動態載入，故我們可以載入ui.bootstrap

Html 修改

Angular.UI.Bootstap可以很容易幫我們做到分頁功能，詳細的屬性可以至http://angular-ui.github.io/bootstrap/#/pagination查看，我們就直接看Code吧

結果畫面

* 後記

寫到這邊會發現一點問題，隨著功能越來越多，前端的Code也開始雜亂了，html與scripts的程式碼也開始混再一起，所以下一篇我們就來談談Angular.js的簡單分層方式，並將網頁改成用SPA系統(可不是泡溫泉的系統)。

 

本系列程式原始碼請至我的Github下載  https://github.com/kyleap

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(8) - 美化網站工具介紹

* 本篇目標

利用一些 CSS Freamwrok 來快速美化我們的網站

* Bootstrap

開發Web目前Bootstrap已經是必備的技能之一了，甚至ASP.NET網站預設網站也已經全面改用Bootstrap， 如下：

我們用Nuget升級到目前的版本 3.2.0

Bootstrap官網已經寫得很清楚，甚至只要看到順眼的樣式，只要指定個html class，就可把html copy下來，

如前兩天的範例，指定table class="table table-bordered" 就會變成很漂亮的帶框線table

其他像input textbox . Button …也只要套個class，就完成美化了，是不是很方便呢!

* Bootstrap主題 – Bootswatch

Bootwatch網站有提供一些免費的主題，讓我們很容易的輕易去更換網站配色，當然可以去買一些付費的template，如Wrapbootstrap，花幾百塊台幣就可以買到一個很完整的網站版型。接下來介紹一下怎麼使用Bootwatch的免費版型來更改樣網站配色。

點選bootstrap.min.css

點開後應該是一大串的css code，我們把這些貼回專案裡bootstrap.min.css

再將選單文字修改一下，這樣很輕鬆就更換配色了!

* Font Awesome

在以往一些圖示，我們都要設計師做一些ICON，但這個會有一些問題，如設計師死不給(有可能發生)造成時程Delay，或者是ICON大小要做修改，造成失真要重做。Font Awesome是一種以文字呈現圖形的服務，且他跟向量圖一樣是不會隨著大小而失真的，我們一樣使用html標籤 + class 就可以顯示ICON了，且他提供的圖片，我想是非常夠用的。

一樣用Nuget安裝 (有沒有覺得Nuget真的很強大...)

於Layout.cshtml載入.css

接著去官網找合適的ICON

套進class，並使用NG的ng-show來判斷是不是像WebAPI取得資料中，來顯示讀取中圖示

完成圖

* 後記

現代化開發網站已經有很多工具能幫助我們快速開發了，Devopler通常對UI比較沒有概念，另一個就是某些網頁設計師對css html可能還不是那麼熟悉，用一些工具切出來的版會發生可怕(以前受過table包table網頁版的折磨)，現在的話，我會用bootstrap來跟設計師討論，因為bootstrap Responsive Web Design (RWD)是做得非常好的，手機網頁看都會自動變成很好閱讀，故設計師主要會做客製化圖片的部分。接下來後面文章都會利用這些工具來製作我們的網站。

最後介紹一個工具 - placehold.it ，一個很方便的網站服務，當我們與設計師討論好某個區塊圖片向素大小為多少時，我們就可以用指定大小的方式來產生圖片，如:

http://placehold.it/350x150

http://placehold.it/50x50

這樣就可以指定於Img標籤，讓我們先有網站大概的版型樣子，不用等設計師設計出來

<img src=’http://placehold.it/350x150’/>

 

 

本系列程式原始碼請至我的Github下載  https://github.com/kyleap

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(7) - 取得WebAPI資料(Angular.js)

* 本篇目標

利用Angular.js像WebAPI取得資料

* 前言

以往開發前端多半倚賴jQuery，今年接觸到了Google所推出的JavaScript libery , 他是一個前端MVC的Freamwork，Study過後，認為將前端改寫成NG，程式會比較有彈性，故開始投入學習。個人認為學習曲線NG比學習jQuery還要高，本系列文章並不是針對NG做一個詳細介紹，故會採用＂做中學＂的方式，來實作ASP.NET MVC如何搭配Angular.js做開發。

* Visual Studio 安裝

我們一樣在Web專案使用Nuget安裝

會看到Scripts資料夾裡有非常的多的Angular套件，這是因為Angular.js模組化做得非常好，故如果沒有要用到的功能，就不用載入進來，而相關的模組有什麼功能可以用，其實可以google ng加檔名，就可以查到官方文件或文章，如 “ng-resource”。

接著我們打開MVC的 View，Shared資料夾_Layout.cshtml檔案，載入angular.min.js。

_Layout有點像是ASP.NET WebForm的Master Page，可以把一些共用的html，js，css放在這，頁面各自的View就不用存在於重複的程式碼 e.g 選單列。

* 修改CustomerController

上一篇我們取得WebAPI資料的方式，是採取C# WebClinet的方式，在Contoller轉成ViewModel在給View，採用Angular.js將會做一些小修改。首先我們將程式碼註解起來。

接著我們改寫View使用Angular.js的語法，會發現Visual Studio 2013 已經很貼心的將NG的語法變為紫色了，這讓開發更加的清楚，以下依步驟做介紹

ng-app : 可以說是Angular.js的起始點，子元素才會看得懂Angular.js的語法

ng-controller : 因為是MVC架構，故我們會在Scripts新增一個Controller的function，並指定這個Div使用CustCtrl

$scope : 可以想成是"前端"的ViewModel，又有點像是C#的Class，可以將變數定義在此，以此例，我們將後端取回的Customer JSON資料，丟給$scope裡的Customer。

$http : 在與後端資料溝通，我們可以使用$http來對Server API進行，POST . GET . PUT .DELETE，以此例我們向我們WebAPI取得資料，丟給$scope裡的Customer；失敗的話則給$scope一個變數error，並秀在Div裡。

$ng-repeat : 此語法可以讓我們很輕鬆的寫出迴圈功能，如Customer裡面的資料，我們將資料一筆一筆讀出來，並變成html table裡的tr列。

結果畫面

* 雙向繫結

在Angular.js的MVC架構，都有Data Binding的特性，也就是今天在Model改變了一些值，或在View改變了一些值，是兩方都會產生變化的。

用講的不太清楚，故我們來玩個小範例：

http://jsfiddle.net/kyleshen/5un6argf/

TestCtrl裡面Model有 Day . Name兩個變數，及一個事件 Add，將Day加1

ng-model : 可以指定這個input標籤 對應到Model的名稱

ng-click : 點選Click的時候去執行哪個事件

* 後記

此篇介紹了一些Angular.js的一些基本用法，下一篇預計來換個輕鬆主題，來介紹如何利用一些工具來快速美化我們的網站。

Angular.js逐步學習文章推薦：

男丁格爾Angular.js教學 http://abgne.tw/category/angularjs

黑暗執行緒Angular.js系列 http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx

 

 

本系列程式原始碼請至我的Github下載  https://github.com/kyleap

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(6) - 取得WebAPI資料

* 本篇目標

建置一個RESTful風格的Web服務

* Web API 2.2

現在開發通常會考慮到多平台，如手機平板等等，但關於資料來源不可能針對每個平台都去寫一樣的Code，早期.NET解決方案有Web Service、WCF Service的應用，.NET Freamwork 4.5後推出了更輕量化的Web API服務，搭配MVC架構開發上變得非常的輕鬆，本系列文章使用Web API 2.2。

延伸閱讀

  [Web API] 初探 Web API 筆記

* 建置Web API

我們再UI層新增Web專案時，其實就已經勾選安裝Web API了，如果忘記選擇了，可以透過Nuget安裝。

WebAPI開發習慣，我通常會再專案底下建一個API資料夾，接著點選右鍵，加入Web API控制器

建立以後，她預設會幫我們建立CRUD function，我們就針對每個function去改寫，注意Web API也是MVC架構，命名也是為Controller結尾，但不同的是Web API是繼承ApiController。

接下來我們將Get稍作修改，向BLL層要客戶資料，HttpReponseMessage可以很方便的讓前端知道是否有發生錯誤，並回傳自己定義的Object。

接著在瀏覽器執行，輸入 host/api/Customer即可取得我們的資料

* 於MVC的Controller及View列出資料

接著我們再專案裡Contoller，新增一個CustomerController

在Controller使用WebClinet像Web API要資料

在新增一個View，套入原本樣板的主體Layout

使用ViewModel，並用好用的Razor語法印出資料

結果畫面

* 後記

我認為Web API是個趨勢，未來我也一定會採用這種架構，一方面MVC的Contoller不會有太多跟BLL Service溝通的code，且對於多專案平台，都可向WebAPI取得資料。但實務上我並不會將跟Web API的Code寫在Controller裡，而會是在前端的View，也就是Angular.js登場的時候了!

延伸閱讀

ASP.NET MVC - 第一個Web API,Hello Web API

ASP.NET WEB API 心得筆記 (4) WEB API ROUTING

MSDN – MVC Razor語法

 

本系列程式原始碼請至我的Github下載  https://github.com/kyleap

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(5) - 打造 BLL層

* 本篇目標

建立BLL(Business Logic Layout) ，建立ViewModel，將Entity物件轉為ViewModel給前端使用。

* 關於ViewModel

將DAL層及Domain層加入參考

上一篇加入實體模組，Entity Freamwork已經會自動幫我們產生Model的Class，我們在Domain方案再新增一個資料夾叫ViewModels，並新增一個CustomerViewModel

 

通常我會將Customer.cs 欄位內容先全部複製到CustomerViewModel.cs

為何要這樣 ? 好像只是多複製了一遍…。其實ViewModel初步設計可以從妳的View出發，表單有什麼欄位就該有什麼 property，譬如一個登入頁面，可能有帳號(Account)、密碼(Password)欄位，但實際上使用者資料表，可能有存在其他欄位入IP位置，建立日期，建立人員…等等欄位，這些欄位再View那邊是用不到的，所以我們不用把那麼大包的資訊再前後端穿梭，這就是ViewModel的用意。

* BLL建立Service

接著我們會到BLL層，建立一個Services資料夾，並加入一個CustomerService.cs，我們再建構的時候使用DAL層的Repository，因為泛型的關係，我們可以直接指定這個Repositoy使用Customers資料表

接下來我們建立一個方法，取得所有客戶資料，將DAL取出的客戶資料跑迴圈丟進我們的ViewModel並回傳

但如果欄位有20.30個，要一個一個塞也太累了....這時候就是AutoMapper出場的時候

* 使用NuGet安裝AutoMapper

使用Visual Studio開發.NET，最大的重點就是生產力極高，有很多的Freamwork及Plugin，我們可以透過Nuget來下載，使用方式是在專案上點右鍵，點選管理Nuget套件。

再搜尋欄位輸入AutoMapper，點選安裝

接著我們再改寫一下Get function

程式碼是不是簡潔很多，AutoMapper會自動幫我們做完轉換的動作，不用再自己刻了，這套件還有很多強大的功能，這邊就不一一做介紹了!

* 後記

我們已經完成Domain、DAL的建置，並完成呼叫DAL取得DB資料，並轉換成我們需要的ViewModel，接下來下一篇就來講解，前端UI層，怎麼跟BLL溝通取得ViewModel。

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(4) - 打造 DAL層

* 本篇目標

建立 DAL (Data Access Layout)，透過EntityFreamwork + 泛型建立與DataBase溝通的橋樑

請先於DataBase建立北風資料庫，可使用SQL ，Localdb相關文章可參考此篇

* 在Domain Project 建立實體模組

Domain這個專案定義為整個系統的核心，故關於Database及用來貫穿三層的ViewModel都會定義在這裡

首先，我們在專案點右鍵，加入ASP.NET 實體模組，並命名為CMSModel

選擇從資料庫產生

建立連線字串

加入所需使用的資料表

打開.edmx，剛剛所選的資料表都已轉成C#的Entity物件

* 於DAL專案參考Demain專案

接著我們移到DAL層將這座橋梁建立起來，再參考點選右鍵，加入參考，選擇方案

* Repository

Repository Pattern（倉儲模式），將新增、修改、查詢、刪除等動作封裝到一個Class，有關這個Entity的這些動作，都封裝在此，不會在其他專案裡存在著相同的程式碼

延伸閱讀

mrkt 的程式學習筆記 - ASP.NET MVC 專案分層架構 Part.1 初學者的起手式

我們先新增一個Interfaces資料夾，並加入一個 IRepository的介面。介面可以把他想成是一份合約，這個合約會規定，如果你要遵循的話一定要照我定義的條文去做，在程式裡面我們稱為實作。IRepository是一種泛型的使用技巧，在宣告時，就可傳入Entity的名稱，如此，我們就不用產生一堆CustomerRepository、OrderRepositoy…的class，因為我們合約(介面)要做的事是要專注在新增，修改，刪除，查詢，如果要做其他事，可以再定義另一份介面。

接著我們新增Repository資料夾，新增GenericRepository.cs，並去實作他

各個function基本上就是Entity Freamwork的新增修改刪除功能，這邊就不再細說，底下會附上程式參考

說明一下實作Get，通常我們查詢都會帶有一些條件，故可以用以下方式動態的的帶入filter、orderby參數，而不用先取得所有資料回傳後再去做篩選與排序。

* 後記

今日完成了Domain及DAL的建置，程式可維護性是很重要的，透過分層，我們的程式不至於太分散，能更專注於一個區塊、一個function去Debug，下一篇我們將進入BLL層，來看看DAL及BLL如何來溝通。

本篇程式原始碼請至我的Github下載  https://github.com/kyleap

 

** 如內容有誤請告知，將進行修改，謝謝 **

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(3) - 系統架構設計

* 本篇目標

系統架構規劃，並新增相關專案、技術規格

* 為何要分層架構規劃

分層的重要性，也是寫程式幾年後才真的領悟，ASP時代那種義大利麵式的寫法(html、Script、後端程式、SQL程式全混再一起)，接著WebForm CodeBind將前後端拆後，再到現在慣用的MVC，深深覺得"關注點分離"這的確是一件很重要的事，目前開發習慣，即使專案在小，也會整理出自己的三層架構起手式，如果是更大型專案，就會再更細分。本次範例專案會已以下架構圖來建立(使用ptt繪製，圖醜勿怪…..)：

各分層介紹：

DAL(Data Access Layer) : 有關SQL語法、EntityFream資料庫溝通，都會在此層。

BLL(Business Login Layer):資料流從DB或從User輸入後，一定會有一些邏輯判斷，該商業邏輯流程都會寫在此層

UI(User Interface):有關Web專案、Web API(Web Service)、Apps 都會在此層

Domain Entity : 裡面會有定義ViewModel Class，用來貫穿三個分層

Resources:用來放一些資源檔 … e.g 多國語系檔

Utility : 用來放置一些共用函示庫 … 如加解密

整個專案建立完如下圖：

* 開發技術

回顧上一篇的需求後，通常我會產生實際要做的Backlog，這邊就不一一列出來，將放置每篇的文章。

以前大老闆有說，她面試人最喜歡看出應試者能拉出多少技能，多深多廣，我們就來拉一下吧：

1. Visual Studio 2013 with Update 3
2. ASP.NET MVC 5
3. Web API 2.2
4. SQL Server 2012 ，安裝 Northwind (微軟提供的範例資料庫)
5. Entity Freamwork 6.1.1
6. SignalR
7. Angulary.js
8. Bootstrap
9. Report
10. IIS
11. Azure

接下來文章會一一提到以上技術並逐步來打造網站 !

 

** 如內容有誤請告知，將進行修改，謝謝 **

* 延伸閱讀

http://www.dotblogs.com.tw/asdtey/archive/2012/05/12/web-development-1.aspx

http://kevintsengtw.blogspot.tw/search/label/%E5%88%86%E5%B1%A4%E6%9E%B6%E6%A7%8B#.VCB28PmSxQc