2014年10月27日 星期一

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(30) – 完賽!!!!

此篇為心得文,不會有任何的程式碼,請安心服用 (終於等到這一天了XD)

當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統

* 鐵人賽

每年到這個時候,總是在猶豫要不要報名,因為前半年總是會想好要開始準備鐵人賽文章,但事與願違,常常被工作的專案壓力搞到沒時間,今年也整個被壓榨到了極致,但還是硬著頭皮報名了,許多文章都在前2.3天才生出來,且報名開發技術組,就一定要寫些Code,所以9-10月份簡直是折磨自己阿,每天下班回家第一件事就是繼續當個IT鐵人,寫code寫文章,但總是會有一些收穫的,常常覺得透過寫文章方式,可以讓自己的邏輯更加清晰,下次再替別人解決問題時,也能比較有條理的回答。另外一個好處,就是可以看到一些前輩們30天的分享經驗,透過這種完整系列文章也吸收不少知識。

* 一些小建議

我個人已經完賽兩次鐵人賽,不免有一些小小的建議,今年的發文系統比去年還ok,至少我在blog的文章可以直接複製貼上,但個人覺得今年的版面,雖然套用bootstrap,但整體的瀏覽方式不是很好,在瀏覽器100%檢視下似乎字體太大了,導致閱讀好像比較困難。

雖然有訂閱功能,但查看該網友系列文章的方式還有待改進…不知道是不是這個原因造成討論&留言的比例比去年少很多?蠻可惜的,有時除了文章分享外,透過跟網友留言互動的方式也能讓彼此增加不少知識。

另外就是新的網頁好像無法很直覺的看到推文通知,及回覆留言通知,必須要回IT幫邦忙的個人訊息去查看...我想還是有人不知道,每天只是上來做發文的動作,這樣就缺少互動的機會了。

當然這只是個人的一點小意見….整體來說能看到IT鐵人賽每年都在進步 :P

* 主題

個人開發上專注於ASP.NET,今年前端接觸到了Angular.js,一直想把這兩個技術結合,剛好鐵人賽就是一種很好的方式,當然選了這兩大主題,不免無法介紹的太深入…也許明年像其他前輩專精於某種主題會更好….(也許可以考慮讓我這個資訊小魯蛇分享幾年的職場經驗也ok,至少不用再寫Code又寫文章了XD)。

又自己想設定的方向,想呈現的是我工作上遇到的一些需求,譬如分層概念..報表..Web Service(Web API)..一些好用的plugin,就拿分層來說,這是書本比較少會提到,但在實務上專案是多麼基本的事情,所以也強迫自己寫一些Sample code出來,實務上只是在每個實作,每段code更複雜化而已。

* 後記

技術是不等人的,要長遠走這一行就必須要有追著技術跑的決心,不然很容易就被淘汰,或者常常因為倦怠而有工作無力感,所以保持一顆熱血的心走這行我覺得蠻重要的,像今年寫的是Angular.js,在發文的同時已經看到Angular.js 2.0推出.....語法與實作完全不一樣…..前端變化之快讓我有種歸零的感覺……Orz……但至少Study過,就會得到一些東西,再接觸新的門檻只會更低不會更高,鐵人賽是一個很好訓練自己的管道,希望每年都有更多技術人加入來共襄盛舉。

2014年10月23日 星期四

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(29) – 發行到Azure

* 本篇目標

逐步將網站發行到Microsoft Azure

* 前言

Azure出來後,我們可以很輕易的將網站放在雲上面,本篇將逐步新增一個Azure Website,並透過Visual Studio 2013來發行上去。

* Azure WebSite

新增網站

7ebaa925dfe64841b6b99824bea98dd3

設定URL

01e276b775a74d5fa922568426bb344f

網站建立好後,點選進入,下載發行檔

401c94bf110b4c09a9177b81df7e8ff2

接著在Web專案點發行

97cd69f1193541fba96509893eb1d7b1

點選匯入,選擇剛剛的發行檔

7a564ba98c604937ae095ea12e164131

點選發行,如此就輕鬆地將網站丟到雲上了

3be7343764124538acec6e35606944cd

* 後記

Azure介面基本上都很淺顯易懂,將網站發行到雲上後,再來就是將資料庫也放到Azure DataBase,這邊就不再多說介紹了,詳細可以參考下面提供的文章連結。

Azure目前有免費試用,且就算啟用了,部分功能流量未超過其實也是不用收錢的,未來已經是雲的趨勢,可以趁著這個免費的福利,去試玩看看Azure的強大吧 ^_^

http://blog.sanc.idv.tw/p/windows-azure.html

 

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

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

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(28) – Elmah監控網站

* 本篇目標

安裝Elmah套件監控網站

* 前言

系統上線後,一定會遇到一些Bug,但如何在User抱怨之前,將Bug以最短時間內處理掉是很重要的是。Elmah能幫我們紀錄網站所發生的錯誤,並可以配上一些通知機制,如Email,來通知系統管理員。

* 安裝

透過Nuget下載

bca5566705ba489fa71aa30b3807e4ce

透過Nuget就能很方便的將所有設定都裝好

我們隨便輸入一個網址導致404錯誤:

5d6df09d2ffe4dcc8cf1b9f352394f25

這時再到 localhost/Elmah 裡面就可以看到錯誤訊息

6a44b12ee9b445efb9ff2b6c88ad76bf

而Email通知的話,也只要在WebConfig下設定你的SMTP Mail Server即可

ca00a91cc1354fc78970fc846b41b60c

* 後記

延伸閱讀

http://ithelp.ithome.com.tw/question/10137849

 

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

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

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(27) – MvcMenuProvider自訂篇

* 本篇目標

選單依登入角色至資料庫撈取,並自訂bootstrap的選單樣式

* 前言

上一篇我們講了MvcMenuProvider基本使用,這篇會來介紹搭配權限管理及自訂css樣式選單的使用方法

* 逐步教學

打開專案底下的Mvc.sitemap,修改設定如下:

我們需要寫程式動態撈取選單,dynamicNodeProvider可以設定指向的位置

028052d635ad4c08a2a74b705c861d44

在Model底下新增一個名稱為PageDynamicNodeProvider的class,我們複寫GetDynamicNodeCollection這個方法,而PermissionService是取得資料,內容為前幾篇寫好的選單SQL SP,詳細請參考此篇

ec9728ee853c4bd48885773ada9e2bb7

執行結果,但這不是我們要的,因為並未套上一些CSS

528ac22df1154d308a23256bfd0dfabf

* 自訂選單CSS

記得我們前一篇有介紹他有一些預設的View嗎,可以在這個View做微調,當然也可以做新增,譬如我們新增一個BootstrapMenuHelperModel.cshtml

610a7c89b3d540cbbef162c79bc90945

而這個View的邏輯有點複雜,建議下載程式回去參考,以下分區塊說明:

新增一個Helper,傳入所有選單樣式並跑回圈,ul 有套入bootstrap的class,而如果該選單又有子項目的話,則跑另一個Helper來秀出子選單(DropDownMenu)

0d4c77cebfb64565b04a21e37520bcf1

DropDownMenu helper如下:

跑所有子選單並套入bootstrap的class,如果還有下一層的話,則呼叫自己這個方法,相信有寫過程式的人應該都不陌生,這就是一種遞迴跑出無限層樹狀結構的概念。

e149cf1a89f146e0aa2e4b97f1387099

接著在這個View中,最後一行加入@TopMenu(Model.Nodes) 來執行這兩個helper

而在_Layout.cshtml 將秀出選單指定成這個view,而false則是不要秀出Mvc.Sitemap定義的文字(最上層)

0d116878ed3644e48f8c4badaa74d959

執行結果,就完成自訂bootstrap的選單樣式了

e33cae43987f46a5b84b54f6964809fa

* 後記

其實程式一旦複雜就很難用文章來解釋,建議至我的Github下載程式回去參考,會比較清楚

 

本資料庫可至此連結下載,使用前先新增Northwind並執行SQL Scripts

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

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

2014年10月22日 星期三

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(26) – MvcMenuProvider安裝篇

* 本篇目標

按造前兩篇所設計出的資料表,實現選單動態呈現

* 前言

MvcMenuProvider是一個很方便的helper,能讓我們用簡易的語法秀出選單,詳細可參考官網

Github有Document能參考,以下逐步介紹常見的使用方式

* 安裝

首先先在Nuget安裝,本範例是用MVC5

c4d09ebe628e47e08fe6c5c4d0b79041

安裝完後,會看到專案多出一個Mvc.sitemap檔案

772c4374ba9a4494bea92df393674262

接著我們只要在View用 @Html.MvcSiteMap().Menu() 語法,就能輕易將Mvc.sitemap的選單階層送出

這個html選單產生的邏輯定義在Shared資料夾底下的DisplayTemplates裡面

15da7cc90f7f4f8fa032c30ce692f808

我們打開MenuHelperModel.cshtml這個檔案

將ul html加上bootstrap的class

6a3c8a24ed414b33ba7bf8fd5a397e1c

這樣就能顯示自訂的選單樣式了

f446c12e7f0648e48490655ee0ce86ba

* 後記

記得前幾篇有設計我們選單的資料表嗎,下一篇就來將MvcMenuProvider結合,針對登入的身分顯示該有的選單

 

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

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

2014年10月21日 星期二

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(25) – 權限管理

* 本篇目標

設計選擇及權限管理的資料表

* 前言

.NET Freamwork 4.5 微軟推出ASP.NET Identity,這讓我們實作登入機制及權限管理更加的方便及更有安全性,詳細可參考這篇文章。本篇會自行設計資料表來實作。

* 選單資料表

新增一個Permission_Menus資料表,而表的結構如下

MenuID : 唯一值(PK)

Name : 選單名稱

Controller : MVC Controller名稱

Action : MVC View名稱

Url : 完整網址(可Null)

Description : 選單描述

ParentID : 父選單的PK

Status : 狀態 (如顯示或隱藏)

OrderSerial : 排序

其實這就是無限層選單的設計方式,透過ParentID指向所屬的父選單(如果沒有則是空值),就可以用程式組出無限樹狀選單。

cedcd81855614eb683adb3d8a7706c84

* 角色資料表

新增一個Permission_Roles資料表,而表的結構如下

9acdfac4ce7d4bb29f9357e2ac9432bd

RoleID : 唯一值(PK)

Name : 角色名稱 (e.g Admin , Sales …..)

Status : 狀態 (有效或無效)

* 選單 & 角色

選單與角色的關係:一個選單可能會分配給多個角色,譬如:後台維護(選單),只能給 系統管理員 或 主管級帳號 (角色)才可瀏覽,是一對多的關係,所以我們新增一個Permission_RoleMenuMapping資料表如下:

32ac4eb27b5a4aec83b0a70afa246030

MRoleID:唯一值(PK)

RoleID : 外來鍵,角色的PK

MenuID : 外來鍵,選單的PK

Status : 狀態 (有效或無效)

* 角色 & 使用者的關係

角色與使用者的關係:一個使用者可能會分配給多的角色,譬如:Kyle 使用者,他可能具備系統管理員,主管級身分(角色),故他是系統管理員,所以可以看到後台維護的選單。所以我們資料表可以這樣設計:

c6e7435154ea4ed5b3fb5d618153f25f

* 關聯圖

把這個四個表關聯拉出來,就會呈現如下圖:

afa0773c13ec4e6e95e782e661eae1ac

* 取得使用者所分配的選單

接著我們開始寫個SP,來取得所有選單所分配的角色:

角色我們用SQL的XML Path語法將他逗號分隔,詳細用法可參考此篇

[MS SQL]將多筆資料合併欄位,減少不必要的連線

ALTER proc [dbo].[sp_Permission_GetMenuList]
as   

DECLARE @errorMsg nvarchar(255)

begin
    SET NOCOUNT ON;
    Begin Try
       
        select * ,
        isnull((
            SELECT (cast(roles.Name AS NVARCHAR ) + ',') FROM Permission_RoleMenuMapping menu
            left join Permission_Roles roles on menu.RoleID = roles.RoleID
            where menu.MenuID = permission.MenuID
            FOR XML PATH('')
        ),'None') as Roles
        from Permission_Menus permission
        order by OrderSerial

    End Try
    Begin Catch
        set @errorMsg =error_message()   
        raiserror(@errorMsg,16,1)
    End Catch

end

執行結果:

6b561d16edc9417bb92bbe16c4ceef0b

 

本資料庫可至此連結下載,使用前先新增Northwind並執行SQL Scripts

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

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

2014年10月20日 星期一

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(24) – 登入功能

* 本篇目標

在MVC實作登入功能

* 前言

.NET Freamwork 4.5 微軟推出ASP.NET Identity,這讓我們實作登入機制及權限管理更加的方便及更有安全性,詳細可參考這篇文章。本篇會用FormsAuthentication來實作登入功能。

* 實作登入機制

在Domain新增給登入用的ViewModel

35980bd206724128ac67dd6e3f3893fe

前端View我們透過bootsnipp找個版直接使用

7f8072b81b50418bb02a879230b5b9d3

Submit的Function接收ViewModel

902d19ada9a54a1693e63aae767ba6e8

SetLogin是自定義的Function

name : 寫入使用者的ID

expiration:可設定登入過期時間

userData:可寫入權限管理的角色字串,以便系統之後做權限的處理

508b71bba30f47bbbb90f4b35b39042d

這樣就能完成登入的功能了!

之後可以透過User.Identity.Name去取得使用者ID,進而跟資料庫取得一些資料

60f4333103494ce79dd21c1ea9ffb7ba

而登出我們可以新增一個Controller

8d7ee02613414dffacbc9e3b8bb6df62

 

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

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

2014年10月19日 星期日

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(23) – NPOI匯出功能

* 本篇目標

將資料庫資料匯出成Excel

* 前言

之前透過Report Viewer可以很方便的將資料匯出成Excel,但實務上如果客戶要求的Excel需要很準確,又很複雜,我通常會用NPOI來處理這些需求,合併儲存格,特殊公式、圖表呈現…這些NPOI都可以使用得到,但依依介紹可能介紹不完....總而言之NPOI可"一個蘿蔔一個坑"的方式針對每個儲存格去做處理。

* NPOI

資料來源我們用之前建好的SP(訂單資料)

a0be2bb416554c74b2ca2e2ce897c359

我們一樣先新增一個Excel樣板,來設計我們要的格式,而第二列首欄,我通常會指定一個資料內容的字型,譬如將這個儲存格設定為微軟正黑體,12點字,並且是有邊框的格子,待會程式就直接讀這個欄位的設定,會比較方便。

148ad76b693d45639a7c40022e3557f2

新增一個Controller,讀取Excel樣板,並取得剛剛設定好的字型樣式

619b3e3f254e400c9a6341eb6502ff7d

迴圈印出所有資料並依序指定給欄位,CurrRow代表目前所在的列數

6574f85c72a74e27be325603fb8b67a1

CreateCell是我自己擴充的Function,將重複性的程式碼抽出來

0ec70aa09a9845f7a2a550743b2954b3

MVC匯出檔案

114eebb28a784da6b8e742d16700a2ce

產生結果

2b49ba82b1044da4aaec52944ad35c70

* 後記

NPOI其他複雜操作,可參考此中文網

 

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

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

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(22) – NPOI讀取功能

* 本篇目標

讀取Excel的Row Data

* 前言

實務上常常會讓使用者將大量的資料先輸入在Excel,再批次匯入系統,NPOI是一個強大的第三方套件,他可以做到的事情非常多,本篇就簡單介紹一下基本的功能,讀取Excel檔案。

* NPOI

透過Nuget安裝後,我們先來製作一個樣板,有兩個欄位,而使用者可以針對這兩個標題去輸入

711d3b9b09994647a0a60b4da2fcdaf4

新增一個View,MVC要使用檔案上傳Submit記得將enctype改為form-data

9b1850859cbf45e3919d61a404c204b5

顯示頁面

ab3737f5ef114959bbc5527068064172

填寫的檔案

b1687c49f2d847e7a15392c0aac40a2a

後端Submit的Controller可以針對UploadFile去做一些防呆判斷

8cfa74a3100d44dbb107a8473d562500

NPOI讀取.xlsx

23ecb2f9bbe147c18667a9d3b765c1a3

執行結果,只要將迴圈所取得的資料做一些處理即可,e.g 寫入資料庫

c5f7fb77eaa44aafa5d1b65e94a68dc8

* 後記

開發NPOI要注意的是版本問題,不同版本與法會有些許不同,本範例使用2.0.6版,如果讀取的是.xlsx檔,語法記得用X開頭的,如XSSFWorkBook,如果你是2003-2007的舊版excel(.xls),記得使用H開頭的語法,如HSSFWorkBook。

 

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

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

2014年10月18日 星期六

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(21) – Word套版功能

* 本篇目標

製作Word客製化報表

* 前言

上次我們利用內建的Report Viewer很方便的能讓我們匯出清單型資料,但實務上常常會有一些客製化的報表,.NET內建有Interop Freamwork可以使用,但使用上不是那麼的親切,另外還有一種方式是利用word .dot樣板的方式在進行操作,但這種方式連微軟都不建議使用了,今天要介紹DocX這個套件來製作報表。

* DocX

透過Nuget安裝

f68e22660f5c4e1688c9fee704cf08b2

接著我們新增一個Word,可自己設計字型、顏色等…而 {{}} 這是我習慣的命名,表示待會要用程式取代的區塊

be87257b886b4822a0452aac734bc46f

新增一個ExportByDocx Controller,我們就可以很容易的用程式來取代剛剛的區塊

99d467b4da1043f689a37f03e60ecbec

完成畫面

2944c7a049d4492bbea79ed9d7465e81

* 後記

這種方式我自己在實務上蠻常用的,比起用Crystal Report或者是Reporting Service花很長時間去製作報表,用原使的Word來製作相對會準確一點,而程式要做的只是取代部分從資料庫來的資料。

 

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

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