【Gulpfile】使用gulpfile壓縮css以及JavaScript[入門]

在新的ASP.NET中使用了third party的開發工具與跨平台的準備,所以這一版的MVC架構上會有很大的轉變,其中一 個變化是CSS與JavaScript的壓縮方式,目前是使用Gulp這個套件來幫我們處理這件事;在寫nodejs、php等開發者應該不陌生,在ASP領域上就會比較不熟悉了...,以下我是使用ASP.NET 5的專案範本來做的
使用Gulp首先要安裝nodejs來安裝gulp以及gulp的附加元件(plugin),安裝nodejs;如果使用Visual Studio 2015的朋友,在安裝過程中就會一起安裝(連同gulp);安裝完畢後就可以執行下列的Script
$ npm install gulp -g
行文至此,在使用npm時我想大家都會開啟cmd.exe微軟命令提示字元來使用,但我這邊推薦使用Nodejs目錄下的Node.js command prompt這個命令視窗,在操作上會方便很多喔!
另外,Visual Studio 2015也可以直接下npm指令來達成喔!需要什麼都可以直接在Visual Studio中解決 :)

...繼續閱讀 »

【ASP.NET MVC】在您的網站上加入匯入或匯出 Excel 功能(二)

【ASP.NET MVC】在您的網站上加入匯入或匯出 Excel 功能(二)
上一篇,與大家分享了如何上傳(匯入)Excel了,接下來鰻頭要說明該如何下載(匯出)Excel囉!
首先我們先用一個簡單的Controller,平常我們都是讓Controller 返回的是畫面(View)的部分,在MVC中也可以輕鬆的返回檔案(回傳檔案讓使用者下載)喔!
一開始我們要將資料從資料庫或是您的資料來源截取出來(這部分就由自己時做囉!),通常我們都會在Excel的最頂端建立一個表頭列,所以饅頭這邊先跟各位說明怎麼建立表頭囉
在建立表頭前,我們要先建立工作簿(跟匯入一樣),這部分一樣分為兩個運作方式,一個為Office 2003的傳統格式,另一個為Office 2007的XML格式

...繼續閱讀 »

【ASP.NET MVC】在您的網站上加入匯入或匯出 Excel 功能(一)

【ASP.NET MVC】在您的網站上加入匯入或匯出 Excel 功能(一)
網站上常有這樣的功能,在網站上做出匯入Excel或是將報表會出至Excel,而今天使用的套件是NPOI這一個套件,安裝方式也非常的簡單,使用上也很直覺;而另外一套是LinqtoExcel(未來在與各位分享)
而為什麼選用這一套呢?因為饅頭在使用LinqtoExcel時發生了一個錯誤,Microsoft.ACE.OLEDB.12.0 提供者並未登錄於本機電腦上,雖然有解決的辦法(安裝套件即可),但是系統部屬時開發者無法介入的情況只好選用其他的開發元件了,接下來就看看饅頭怎麼做吧!

...繼續閱讀 »

【ASP.NET MVC | Autofac 小筆記】Asp.net MVC 5 ActionFilter DI 問題

【ASP.NET MVC | Autofac 小筆記】Asp.net MVC 5 ActionFilter DI 問題
相信很多人都用過autofac這套DI工具,而DI在一開始時總是會有一個建構式,讓DI工具可以注入實體物件,減少系統的藕荷程度!所以一般程式碼都會類似像以下的程式碼
而今天,饅頭想要在Controller中加上一些Filter來做權限的控制,若依照剛剛的範例寫法我們的Filter應該要是這樣子

...繼續閱讀 »

【ASP.net MVC + DI】ASP.net MVC 使用 DI Framework - Autofac

【ASP.net MVC + DI】ASP.net MVC 使用 DI Framework - Autofac
在一開始我也搞不懂什麼是DI,IoC又是什麼,而且兩個通常都會同時提起,他們有什麼不尋常的關係...直到看了幾位前輩的Blog後才逐漸明朗
好的接下來得開始在專案上時做DI了!在幾位前輩的部落格中,找到幾套好用的DI Framework:Unity及Autofac,這邊選擇以Autofac主要原因是饅頭在網路上找到的資源較為豐富,出錯了還有地方可以詢問與查資料!
OK,選擇好了一個Framework後就開始我們DI的新旅程了!
一開始我們透過nuget來找到Autofac

...繼續閱讀 »

【AngularJs + ASP.NET MVC】使用AntularJs快速建立ASP.NET MVC SPA網站

【AngularJs + ASP.NET MVC】使用AntularJs快速建立ASP.NET MVC SPA網站
這幾天接觸到了AngularJs的美麗,讓饅頭有點躍躍欲試使用AngularJs來做一個SPA(單頁式網站),沒想到使用AngularJs來製作SPA網站這麼簡單!相信你看完這次的分享,你也想動手試一試!
在Visual Studio中有一個專案範本Single Page Application,不過這個專案範本預設是使用knockout.js來建立的,所以饅頭這邊是使用Web API的專案來開始製作

...繼續閱讀 »

【jQuery小筆記】實用的Datatables套件與WebAPI搭配

在撰寫MVC中常常會使用到很多的JQuery的套件,其中又以Data Table最常使用(結合分頁、查詢與資料顯示的功能),而最近饅頭常常使用這個套件,但套件也沒有中文名稱,因此饅頭打算在此分享一下使用的方法與說明!
一開始使用前要到http://datatables.net/download/下載DataTables的JavaScript與相關的CSS檔案,並且放入專案中
將JS及CSS檔案放入專案後,我們新增一個Class讓我們接收DataTables的請求參數

...繼續閱讀 »

【ASP.NET MVC】紀錄使用者瀏覽的動作 User Trace Log

【ASP.NET MVC】紀錄使用者瀏覽的動作 User Trace Log
近年來網站都會有追蹤使用者的行為動向,而有些使用者動向的紀錄要像某些廠商購買這些服務或是使用免費提供服務,主要的目的是商業分析或是內部紀錄為主,免費的部分有可能不合乎我們整個的需求今天我們就使用MVC中的Filter來取得使用者的紀錄

...繼續閱讀 »

【ASP.net MVC】自訂 Model 驗證屬性 — 資料驗證(4)

【ASP.net MVC】自訂 Model 驗證屬性 — 資料驗證(4)
在做資料驗證的時候不會遇到剛好內建的驗證方式,我們這時候通常都會利用正則表示式來實作我們所需要的資料驗證,但是這樣的欄位一個或兩個都還覺得簡單,要修改也只需要修改那一兩個,但是如果這個驗證套用到多次,而且又有不同的類別檔的時候呢?或是系統執行一段時間後,你還記得有哪些地方套用了這個驗證嗎?我想應該不太可能有人有這麼好的記性...
所以MVC提供了讓你擴充自己所需要的資料驗證!要如何實作呢,請看倌們往下看!
先說明一下本篇的案例好了,若其他需求請自行修改!
在小弟的網站上,需要用戶輸入手機號碼,內建的phone的驗證似乎沒有效果,所以只好動手寫一個出來了!

...繼續閱讀 »

【SQL Server | Asp.net MVC】使用WebAPI存取FileTable

【SQL Server | Asp.net MVC】使用WebAPI存取FileTable
首先,先說明一下本篇案例吧!這邊規劃了四個FileTable出來,分別存放Document、Photo、Video以及其他類型的檔案;在檔案上傳的時候就會將使用者上傳的檔案做分類管理避免所有資料都存放在同一個FileTable中,日後再尋找檔案造成不便的困擾而且更好管理這些檔案!
在小弟的案例中,會有四個不同的存放路徑,在這樣的情形要怎麼去處理檔案上傳的路徑呢?或許有人會想寫四個API然後針對四個不同的路徑去做處理,但是這樣子實在太複雜了,後續要維護部好處理,所以小弟這邊就用了一個方法,利用一個stored procedure(下方程式碼),只要傳入FileTable名稱就可以取得相對應的檔案存放路徑,這樣就可以不用寫四個相同功能的API,節省了不少時間!

...繼續閱讀 »

【ASP.net MVC】Cross-Site Request Forgery,CSRF/XSRF

【ASP.net MVC】為你的網站多一點點的安全性(Cross-Site Request Forgery,CSRF/XSRF)
眾多網站攻擊手法之一的CSRF,一直是網站攻擊的前幾名,在OWASP每年公布的十大攻擊手法,排名也是居高不下,至於什麼是CSRF呢?以下做個簡單的說明吧
跨站請求偽造(Cross-site Request Forgery, CSRF/XSRF)對於網站應用安全一直是個嚴重的問題,即駭客利用網站對於合法使用者的信任,以合法使用者的身分向網站發出偽造請求,並在使用者不知情的情況下執行一些惡意行為,甚至執行駭客所指定的行為。此問題的關鍵在於網站會執行該偽造請求而沒有事先證實該請求是否由合法使用者自己發出。在偵測CSRF上所遭遇的問題在於HTTP協定無法辨識那些請求是屬於合法使用者自己發出。(TWISC@NTUST網路應用安全知識庫 )
所謂知己知彼,百戰百勝!先了解攻擊的手法吧!
在使用網路銀行轉帳的時候,通常會使用POST的模式送出,但駭客發現,也可以利用GET的模式送出請求,此時駭客利用這個弱點就可以將您的資產轉入自己的

...繼續閱讀 »

【ASP.net MVC】WebSecurity的小筆記

【ASP.net MVC】揭開WebSecurity的神秘面紗!
一開始MVC中就內建了一個登入的方式,就是WebSecurity的類別;以前在做登入的時候,都會利用FormsAuthentication類別來處理登入的認證狀態,這個類別就變得很少人使用...但其實這個類別,更容易做登入登出的驗證!
傳統FormsAuthentication驗證的寫法:
如果我們改成利用WebSecurity的方法呢?
首先,我們要先將WebSecurity初始化

...繼續閱讀 »

【ASP.net MVC】【WebAPI】Post的陷阱

【ASP.net MVC】【WebAPI】Post的陷阱
本篇為甚麼叫WebAPI的陷阱呢?先說明問題案例好了
小弟因為學校作業要做一個網站,為了有更好的使用者體驗,所以所有的資料傳遞都是透過Ajax以及Signalr。而問題來了,今天在做資料新增的時候,發生了一件怪事,使用Ajax所Post到API的資料都會為null,而且使用Postman傳送也都是null值
以下是小弟一開始所寫出來的WebAPI的Code

...繼續閱讀 »

【ASP.net MVC SignalR】SignalR & MVC 防止XSS(跨網站指令)

【ASP.net MVC SignalR】SignalR防止XSS(跨網站指令)
在做web聊天室的時候,總是會遇到XSS的攻擊,要如何有效防治這類個攻擊呢?待我說明囉!!
首先,我們要在web.config中加入一段文字

加入些文字後,我們就可以直接存取AntiXssEncoder的編碼方式囉!
之後在前幾篇文章所建立的 Chat.cs檔案中,傳送訊息的部份加上了AntiXssEncoder.HtmlEnCode()的編碼

...繼續閱讀 »

【ASP.net MVC SignalR】使用SignalR實作廣播、群組特定對象傳送

【ASP.net MVC SignalR】使用SignalR實作廣播、群組特定對象傳送
在做同步網頁的時候,我們通常都是以廣播的形式去更新,畢竟我們希望讓所有用戶都可以取得最新的資訊;但有時候我們可能會遇到其他特殊的需求,部分的群組更新資訊或是某一個特定的人更新資訊(EX:檔案上傳的Process bar、兩人之間的遊戲對戰...),這時候就會用到群組的特性,或是特定對象的傳送。
廣播、群組特定對象傳送

...繼續閱讀 »

【ASP.net MVC SignalR】SignalR連接模式更改與錯誤提示

【ASP.net MVC SignalR】SignalR連接模式更改與錯誤提示
在上一篇的文末,已經有說明用NuGet下載了SignalR,在今天想做出一個可以區分群組的方法,無意間發現了可以更改SignalR的傳輸方法,先做一個小小的紀錄,避免以後忘記還需要重新尋找
Install-Package Microsoft.AspNet.SignalR (SignalR下載的 NuGet指令)
在connection起始的時候,其實可以接上一個transport的參數進去,而這個參數接收的剛好是上一篇所說的網站同步的四種方式(webSockets、longPolling、serverSentEvents、foreverFrame)
假如以WebSocket或Server-Sent Event的方法,在許多瀏覽器上會出錯,所以我們在連接的時候,需要去判斷是否成功開啟連接

...繼續閱讀 »

【ASP.net MVC | SignalR】建立RealTime的網頁(SignalR)

【ASP.net MVC】建立RealTime的網頁
之前有需要一個可以承載多人並且網頁可以即時的更新變化,過去的作法很多人是用 Ajax(Asynchronous JavaScript and XML)來實現這個功能,小弟我也不例外...,但最這個方法Server要足夠的吞吐量,也需要大量的平寬,設置的成本提高許多,萬一Server吞吐量不足,就好像我們寫DDoS 的Code攻擊自己的Server,而最近(應該有一段時間了...) 看到一個比較好的方法,SignalR這個技術,就想來試試看!
SignalR的重點是在於即時性!當伺服器端(Server)有新的資料出現時,即時向用戶端(Clinet)推送訊息

...繼續閱讀 »

【ASP.net MVC】專案放置 Facebook 登入-- OAuth 認證(3)

【ASP.net MVC】專案放置 Facebook 登入-- OAuth 認證(3)
前一篇,已經跟各位說明如何透過範本建立Facebook的驗證,但是取得的資料有限,可能有部分網站只需要幾項註冊資訊就可以使用了,但是可能比較複雜的註冊網站,可能需要出生日期、所在地點、性別...的資料,此時內建的驗證所取得的資料就不太符合我們的需求了!所以,這邊接下來要讓使用者登入Facebook帳號後,直接取得使用者的資訊!雖然這個可以利用讓使用者後續透過輸入的方式處理,但是通常使用者很懶得再去輸入這些資料。
接下來,我們需要去撰寫一些程式碼,才有辦法達到我們所要求的資料(當然,還是使用者按下同意按鈕,才有辦法取得)!
首先,我們需要把底層的OAuth的驗證做些修改((這些修改,幾乎把我們要用的類別都改寫了...)),以下是小弟在網路上搜尋到的程式碼,部分有稍作修改,並且加入了註解,以供閱讀!

...繼續閱讀 »

【ASP.net MVC】ASP.net MVC Model篇—資料驗證(3)

【ASP.net MVC】ASP.net MVC Model篇—資料驗證(3)
繼前兩篇的資料驗證(資料驗證(1) 資料驗證 (2) )之後相信都會對資料驗證有大部分的了解,而這一篇呢,要說明自定義的錯誤訊息,要如何快速的建立!

在各種驗證中,我們錯誤訊息可能不會每次都用手動去Key In,可能會透過複製...之類的手法去快速建立,此時可以利用String Format 去自動幫我們產生,是不是很幫呢?

各種驗證的部分,有一些特定的用法可以提供給大家參考:

...繼續閱讀 »

【ASP.net MVC】專案放置 Facebook 登入-- OAuth 認證(2)

上一篇(【ASP.net MVC】專案放置 Facebook 登入-- OAuth 認證(1)),向各位說明了如何去申請Facebook的應用程式,也相信大家都躍躍欲試,網站中融入Facebook的社群登入了吧?

接下來我們就用MVC本身的範本做登入囉!



首先我們先開啟一個專案,記得要選擇MVC4的應用程式喔!

...繼續閱讀 »