2012年12月31日 星期一

ASP.NET MVC - ViewModel 參考文章與其他說明

一開始必須再三地強調,這裡所說的 ViewModel 與 MVVM 所謂的 View Model 是不同的,所以 Sliverlight WPF  XAML 所會用到的 View Model 不在此篇文章的討論範圍內。

請務必先看過前面兩篇有關 ASP.NET MVC - ViewModel 的文章:

ASP.NET MVC 的 ViewModel - 基礎篇

ASP.NET MVC - 為什麼不建議在 ViewModel 裡加入行為

而這一篇將會列出國外一些有提到 ASP.NET MVC - ViewModel 的文章與討論,並且就這些內容提出我的想法。

 


2012年12月27日 星期四

ASP.NET MVC - 為什麼不建議在 ViewModel 裡加入行為

一開始必須再三地強調,這裡所說的 ViewModel 與 MVVM 所謂的 View Model 是不同的,所以 Sliverlight WPF  XAML 所會用到的 View Model 不在此篇文章的討論範圍內。

為什麼連兩篇有關 ViewModel 為主題的文章會一再地強調與 MVVM 的 View Model 有所區別,這是因為 MVVM 的 View Model 是要加入行為的,然而 MVC 的 ViewModel 卻是不建議加入。

因為看到有人把 MVVM 的 View Model 使用方式改拿到 MVC 來用,我覺得相當不妥,違反單一職責原則以及違背了 MVC 所強調的關注點分離,所以在一篇文章裡提出我之所以不建議在 ViewModel 裡加入行為(方法)的看法。

 


2012年12月24日 星期一

ASP.NET MVC 專案分層架構 Part.5 - 建立 Service 層

2014-12-02 補充說明:
這一系列的文章並不適合初階及中階的開發人員,如果你是程式開發的初學者或是 ASP.NET MVC 初學者,甚至是開發經驗少於兩年的開發人員,請馬上離開此篇文章。

這一篇距離上一篇「ASP.NET MVC 專案分層架構 Part.4 - 抽出 Model 層並建立為類別庫專案」相隔了好一段時間,除了說工作比較忙碌而沒有時間外,其實主要是為了這個系列的章節順序傷腦筋,因為想要先說其他的部份,但是如果不先說 Service 層的話,後續的章節也不見得會比較好寫,但寫了 Service 層會把之前的一些東西給推翻掉,怕會引起太多的反彈,內容就這樣反反覆覆,文章也寫得斷斷續續,最後還是決定先說明 Service 層。

看這一篇之前一定要先看過「分層架構」的 Part.1 ~ Part.4 這四篇文章。

 


2012年12月23日 星期日

觀察 ADO.NET Entity Framework 5.0 產生的 SQL Command 與取得 Entity 對應的 Table Name

這篇的文章標題蠻長的,其實這與以前的兩篇文章是有關連的,

觀察 Entity Framework 轉換所產出的 SQL Command

動態取得 Entity Framework 中 Entity 對應的 TableName

這兩篇文章都是以使用 ADO.NET Entity Framework 4.0 以及 .NET 4.0 為背景,不過換成 ADO.NET Entity Framework 5.0 與 .NET 4.5 的使用情境下就會有所不同了,那兩篇文章內所說的方法就行不通,所以就必須要換另外的方式來完成需求。


2012年12月22日 星期六

ASP.NET MVC 的 ViewModel - 基礎篇

有鑑於蠻多初學 ASP.NET MVC 開發人員對 ViewModel 的不了解,甚至於有些公司雖標榜採用 ASP.NET MVC 開發專案,但卻沒有詳細規範並定義 ViewModel 的使用方式而產生很多的誤用、亂用、隨便用的亂象,所以對 ViewModel 做個說明。

 


2012年12月20日 星期四

連動下拉選單 - 使用 jQuery EasyUI ComboBox

前一篇文章「jQuery 練習題:ASP.NET MVC 連動下拉選單與 jQuery UI Autocomplete ComboBox」是使用了 jQuery UI 的 Autocomplete ComboBox 來完成連動下拉選單的功能,其實想要在 ASP.NET MVC 網站裡做出 ComboBox 以及 Autocomplete 的功能也不是只能使用 jQuery UI,也可以使用其他的套件來完成,所以這一篇文章將會說明使用 jQuery EasyUI 的 ComboBox 來實作一個三層式的連動 ComboBox 選單功能。



2012年12月16日 星期日

jQuery 練習題:ASP.NET MVC 連動下拉選單與 jQuery UI Autocomplete ComboBox

嗯…… 我很少使用 jQuery UI,應該說除非必要,不然我不會在專案中去使用 jQuery UI,它是個好物,尤其是在專案需要一個整合性的前端 UI 處理介面又必須要與 jQuery 來搭配時,jQuery UI 往往是很多人的首選,但我還是很少會去使用它,因為總覺得就像開發 ASP.NET Web Forms 專案時去使用 Server Controls 或是 AJAX Control Tool Kit 一般,是可以帶來很多立即可見的功能,但如果想要在這個基礎上面去做客製的處理就必須要花時間與下功夫,我必須說 jQuery UI 是個好物,只是我對它真的很不熟,因為不熟所以也就會有上面的一些誤解看法。

既然不熟的話,那為什麼要寫這篇文章哩?

因為有位朋友向我問了有關 jQuery UI Autucomplete ComboBox 與連動下拉選單的問題,所以花了一點時間看文件並試做了類似情境的操作,覺得把這個過程給記錄下來以免日後遇到相似狀況時我會忘記怎麼做解決的。


2012年12月14日 星期五

Visual Studio 2012 - jQuery 程式碼片段 (Code Snippets)

使用 ASP.NET MVC 開發網站並且在前端 View Page 大多都會編寫 jQuery 的前端程式,在 VS2010 的時候就已經加強了對 jQuery 編輯時的 intellisense 輔助,但還是會需要手動去加入 jQuery.min 或是 vsdoc 檔案的引用並更新 JScript Intellisense 之後才會有 jQuery Intellisense 的顯示,

image

而到了 VS2012 之後就不會再去重複上面的動作,直接在頁面中就能有 jQuery Intellisense 的輔助支援,

image

雖然有  jQuery Intellisense 的輔助,但前端程式寫久了總是會覺得想要有更快速的輸入方式,另一方面也可以減少輸入太多的程式碼,在編寫 C# 的程式時我們可以利用 Code Snippets 的方式來達到這樣的需求,而我也曾經就這個功能寫過一篇文章「使用Code Snippet 增加寫程式效率並使用Snippet Editor做管理」,而 jQuery 同樣的也可以使用 Code Snippets 來達到這樣的需求,差別在於有人整理好將近 130 多個 jQuery Code Snippets,而我們只要在 VS2012 裝好這些 jQuery Code Snippets 後就可以讓我們編寫 jQuery 程式時有 Code Snippets 可以使用。

 


2012年11月19日 星期一

MVC Themed App - 修改 jQuery Plugin「DataTables」顯示文字為正體中文

事情是這樣的,昨天有位朋友在「ASP.NET MVC 3 使用新的專案樣板–MVC Themed App」這篇文章提出問題,一開始給我的訊息是說修改 MVC Themed App 內建 T4 Templates 內容後會出現錯誤,原本想要顯示中文的地方卻是顯示為亂碼,以致於一開始我的回答是以解決 T4 Template 亂碼的方向,

image

但後來這位朋友給了一個比較明確的線索,

image

我想有使用過 jQuery.DataTables.js 的朋友應該知道要怎麼解決,不過我在這邊記錄怎麼解決置換中文顯示的方法。

 


2012年11月18日 星期日

ASP.NET MVC 專案分層架構 Part.4 - 抽出 Model 層並建立為類別庫專案

2014-12-02 補充說明:
這一系列的文章並不適合初階及中階的開發人員,如果你是程式開發的初學者或是 ASP.NET MVC 初學者,甚至是開發經驗少於兩年的開發人員,請馬上離開此篇文章。

經過了前面三篇的過程,我們使用了 Repository Pattern 把有關資料存取的部分從 Controllers 程式中抽離出來,而現在我們接下來要做的是把專案中有關資料存取的部分給抽出來,另外建立一個 Project 來放置這些抽離出來的資料存取層。

把 Model 層從 Web 專案中抽離出來,這表示 Web 專案只關注於資料呈現以及系統控制流程的部份,凡是要跟資料打交道的存取操作就不會出現在 Web 專案中,讓兩個專案有各自的職責與關注的事物。

 


2012年11月16日 星期五

Oracle ODAC + ASP.NET MVC 佈署

我在去年以及今年年初的時候有寫了一系列介紹使用 ODAC with Oracle Developer for Visual Studio,讓我們可以在 Visual Studio 開發 ADO.NET Entity Framework 時可以使用 Oracle 資料庫,那一陣子 ODAC 的版本是從 Release 3 開始講,之後做了一次的更新說明 Release 4,而隨著 Visual Studio 2012 的上市,所以 Oracle ODAC 也做了一次的更新,Release 5 於 2012-09-11 發佈,可以支援 Visual Studio 2012 以及 .NET 4.5。

但這是一連串都是在開發相關的事項中來做討論,而開發網站總是會有上線的一天,而網站佈署與網站開發都屬於專案開發的一部分,佈署網站本身就不是一件容易的事情,尤其專案的資料庫是使用 Oracle 以及專案的資料存取又是使用 EF + ODAC 的時候。

這一篇文章是補齊之前那一系列文章的內容,把最後的佈署也做個說明。

 


2012年11月7日 星期三

ASP.NET MVC 專案分層架構 Part.3 - 個別 Repository 的資料存取操作

2014-12-02 補充說明:
這一系列的文章並不適合初階及中階的開發人員,如果你是程式開發的初學者或是 ASP.NET MVC 初學者,甚至是開發經驗少於兩年的開發人員,請馬上離開此篇文章。

離上一篇「ASP.NET MVC 專案分層架構 Part.2 抽出 Repository 裡相同的部份」的發佈也隔了一段時間,我們繼續這一個主題,上一篇的內容是把原本分成個別 Repository 中的相同部分給抽出來,並且應用泛行的特性而另外建立一個 GenericRepository 來處理這些基本的資料存取操作,但非每一個類別的資料操作都是相同的,不是建立一個 GenericRepository 就可以滿足所有的需求,當各個類別有不同的資料存取需求時,應該怎麼做呢?

 


2012年11月4日 星期日

使用 Team Foundation Service

很多 .NET 開發人員聽過或是有用過 Team Foundation Server(TFS),這不只是一套版本控管的產品,TFS 也涵蓋了軟體開發管理的功能,如果只是把 TFS 單純當做版控工具來使用就大材小用了,而這一篇文章所要講的則是「Team Foundation Service」,簡單來說,Team Foundation Service 是 TFS 的雲端線上版,為何要加上「雲端」這名詞呢?原本的 TFS 就有提供線上版的功能,不過只存在於各自建置的 TFS 服務上,但是 Team Foundation Service 所強調的是「可以從任何地方進行存取,且支援各平台的開發環境及開發工具。

不久前 Microsoft Build 2012 (2012-10-31) 發佈了這一項 Team Foundation Service 的更新,這一項服務在去年的 Build conference 就可以經推出了預覽版(preview),一開始是採用「邀請碼」的機制,只有獲得邀請的人才有機會體驗這一項服務(就像一開始的 Gmail 與 Google Plus 一樣),到了今年的六月時就取消了邀請制,而讓這一項服務成為公開預覽版,任何人都可以試用,而現在這項服務更新為正式版本。

Team Foundation Service updates - Oct 31

Team Foundation Service 正式推出後就勢必會有費用上的考量,現在的收費方案還不是很明朗,如何收費以及什麼樣的費用可以使用到什麼樣的服務內容,這些要等到 2013 年時才會正式的發佈,現階段只知道對 MSDN 訂閱者是完全免費,不過 Team Foundation Service 卻蠻佛心的提供了免費使用的方案,這個免費方案(Free Plan)是可以讓五個以下的 User 而且是沒有限制專案數量的使用,是不是看了很心動呢?

 


2012年10月28日 星期日

ASP.NET MVC 專案分層架構 Part.2 抽出 Repository 裡相同的部份

2014-12-02 補充說明:
這一系列的文章並不適合初階及中階的開發人員,如果你是程式開發的初學者或是 ASP.NET MVC 初學者,甚至是開發經驗少於兩年的開發人員,請馬上離開此篇文章。

經過「ASP.NET MVC 專案分層架構 Part.1 初學者的起手式」這一篇之後,雖不能說對於分層架構有很詳細的理解,但至少對於分層架構有了初步的概念與想法,上一篇我們已經做到了把各個 Model 的資料存取抽離出來並另外建立個別的 Repository,而這也只是剛開始而已,上一篇文章有人反應篇幅過長,以致無法耗費太多時間將整篇文章看完,所以這一篇就不再長篇大論,只專注於一個主題上,接下來要說的是把個別 Repository 中相同的部份給抽離出來,讓我們關注於這一點吧!

 


2012年10月22日 星期一

ASP.NET MVC 專案分層架構 Part.1 初學者的起手式

2014-12-02 補充說明:
雖然標題包含「初學者」但不表示這是給連 ASP.NET MVC 初學者甚至是程式初學者所看的,對象為已經具有一定程式開發基礎但是對於簡單的分層架構不太瞭解以及沒有概念的開發人員。

上星期(10/13 六)是 twMVC 第五場研討「活動宣傳 - 2012-10-13 twMVC 第五次研討會 … 雲端、專案系統架構」,上半場的主題是由 Bibby 所帶來的「ASP.NET MVC 之實戰架構探討」,有關於專案架構的資訊是每一次 twMVC 研討會後問卷上一定會有人提到想要聽的主題,所以這一次就由 Bibby 來說明,Bibby 在這一場的內容包含了專案架構相關的內容,而會後的問卷結果看來,大家的接受度都相當地高,不過也有些朋友反應說要看一點實作面的內容。

分層開發架構並不是 ASP.NET MVC 獨有的,任何的專案開發不管使用什麼樣的技術都應該要做好專案架構的分層,不管是同一個專案中的分層處理或是不同職責方法的獨立專案分層架構,專案分層架構其目的就是為了要職責確立、關注點分離,讓不同的方法或類別去做該做的事情而且只專注於這些方法、類別的職責上。

接下來的幾篇文章將會以初學者對象,將大雜匯式的專案開發內容逐步的改變,讓專案改為分層架構,所以對於進階開發人員,或是已經會分層架構的朋友就可以跳過這幾篇文章。

而我這邊所講述的分層架構方法也不是絕對或標準、唯一的方法,每個人、每個團隊對於程式的寫法、架構的區分都個有不同,對於架構的見解與實作的方式也有不同,所以我所說明的內容也只是將我的部份見解給寫出來,就如同標題一樣,對象是「初學者」。


2012年10月7日 星期日

ASP.NET MVC 資料分頁與 Route - Part.3


上一篇「ASP.NET MVC 資料分頁與 Route - Part.2」說明如何使用產品分類編號以及 Route 設定讓 URL 格式可以有比較好的 SEO,不過必須說的是,修改前與修改後的 URL 格式對於 SEO 其實沒有多大的差別,

修改前:http://localhost:5511/Product/List?category=1&page=2

修改後:http://localhost:5511/Product/Category/1/Page/2

因為我們使用的產品分類的參數值是用「CategoryID」,這並沒有明確的給「Category」有特別的意義,CategoryID 只是用數字組成的編號,對於產品資料的搜尋上並沒有多大的幫助,如果將 URL 中的 Category 使用 CategoryName 來取代的話,在 SEO 就會有比較好的效果,

ex:http://localhost:5511/Product/Beverages/2

在這一篇的內容當中將會逐一介紹。

 


2012年10月5日 星期五

ASP.NET MVC 資料分頁與 Route - Part.2


前一篇「ASP.NET MVC 資料分頁與 Route - Part.1」說明了資料分頁的 Route 設定方式,然而資料分頁並不會這麼單純地只有把全部資料拿出來做分頁,最常遇到的情況就是產品資料依據分類來做顯示,而且還要可以分頁,這一次就是要來說明產品資料依據分類來做顯示並且資料分頁的情況下如何做 Route 設定。

 


2012年10月4日 星期四

ASP.NET MVC 資料分頁與 Route - Part.1


用 ASP.NET MVC 所開發的網站與 ASP.NET Web Forms 網站有一個比較名顯的不同的就是「網址」,ASP.NET MVC 不像 Web Forms 網站專案,是由一個一個的 ASPX 檔案所構成的,任何的 Request 都是需要透過 Route,然後再到 Controller 的 Action 進行處理,所以 ASP.NET MVC 的網站不像 ASP.NET Web Forms 網站的網址那樣會需要有個「aspx」的檔案結尾,Web Forms 可以透過例如 Url Rewrite 或是使用 URL Routing ( .NET 4.0 ) 來達到與 ASP.NET MVC 一樣的網址格式,

例如:Easy URL routing in ASP.NET 4.0 web forms

ASP.NET MVC 預設的 Route 設定就已經可以應付絕大部分的狀況,但有時候難免會想要讓 URL 看起來更漂亮一些,或是說讓網站因為 URL 的關係而有比較好的 SEO,總之就是讓 URL 可以更為直覺與方便輸入,接下來簡單敘述 ASP.NET MVC 在分頁功能下的 Route 設定。

 


2012年9月30日 星期日

活動宣傳 - 2012-10-13 twMVC 第五次研討會 … 雲端、專案系統架構


這一次研討會距離上次八月份所舉辦的第四次研討會差不多有兩個月的時間,因為九月 twMVC 有參加 Microsoft tech.days 2012 活動,在會場有個小小的攤位,「twMVC @ Microsoft tech.days Taiwan 2012 - (2012.09.18 ~ 09.20)」。

由於 twMVC 的成員都分屬在不同的公司,所以 tech.days 時是無法看到我們全員集合的狀態,而平常我們的工作也都相當忙碌,九月份光是要忙 tech.days 的活動(demo 在 tech.days 有講課喔)並且兼顧工作,就讓我們實在分身乏術,實在沒有多餘的時間在九月舉辦研討會,不過漫長地等待絕對是值得的,因為十月份的研討會我們的主題是相當多人詢問的內容:

「ASP.NET MVC 之實戰架構探討」

「開發與移轉 ASP.NET MVC 4.0 應用程式到 Windows Azure Platform」

報名網址:http://registrano.com/events/twmvc5

活動時間:2012-10-13(六)PM 01:00 ~ 05:00

 


2012年9月29日 星期六

ASP.NET MVC 學習資源整理 Part.2 - 國外部落格


在今年四月的時候有整理了一篇 ASP.NET MVC 的學習資源:「ASP.NET MVC 學習資源整理 Part.1」,那一篇介紹的是比較著重於微軟官方所提供的資源,官方的學習資源已經相當豐富,而每當有人問我可以到哪裡找有關 ASP.NET MVC 的學習資源時,我總是會先問對方是否已經看完官方的資源,要先看完微軟所提供的教學內容之後再去找其他的資源才是。

往往很多人會忽視官方所提供的學習資源,其一就是有蠻多人會不想要看英文的內容,再來有些人會認為官方所提供的資源都是很簡單或是很基本的內容,所以就不會想去看,其實有以上想法的人就大錯特錯了, 微軟所提供的教學內容真的是學習 ASP.NET MVC 的最佳入門途徑,很多觀念與基本操作在官方教學內容中都會教到,而且這些教學內容不光是文字與圖片,很多都還有影片教學,官方教學內容都看得差不多,而且已經會使用 ASP.NET MVC 寫出網站的時候,這表示已經具備不錯的能力了。

當開發 ASP.NET MVC 一段時間後就會想要學習更進階的內容,或是想要時常獲得 ASP.NET MVC 的相關訊息,此時官方網站就無法滿足你的需求了,這時候就會開始在 google 裡到處尋找相關的網站或部落格,但是 google 搜尋出來這麼多的相關內容中,有哪些網站或是部落格是有幫助的呢?這一篇文章會介紹幾個國外 ASP.NET MVC 開發人員都應該要追縱的部落格。

 


2012年9月24日 星期一

ASP.NET MVC - 修改 CheckBoxList、增加 RadioButtonList


在今年初我有發表一篇有關於可以水平、垂直顯示的 CheckBoxList Extensions,其實這個 Html Helper Extensions 是沒有什麼問題,「ASP.NET MVC 擴充HtmlHelper 加入 CheckBoxList 功能 - 2」,前不久在看 DropDownList() 原始碼時想到,為什麼不直接使用既有的 SelectListItem 呢?實在是沒有必要另外去建立一個相同結構的 CheckBoxListInfo 類別,所以這次就做個小修改,捨棄原先的 CheckBoxListInfo 類別而改使用既有 SelectListItem 類別,而既然 CheckBoxList 都已經做出來了,那長得差不多的 RadioButtonList 也就動手做了出來,以下就是這兩個 Html Helper Extensions 的介紹。

 


2012年9月22日 星期六

ASP.NET MVC 3 - DropDownListFor 的設定方式


上一篇「ASP.NET MVC 3 - DropDownList 的基本設定方式」的最後有提到了 Html.DropDownListFor() 的設定,最後的內容說到了 Html.DropDownListFor() 為何有時候會無法正確的顯示預設選取項目的問題,如果是對於ASP.NET MVC 熟悉的朋友應該可以一眼看出我設定的方法是有明顯錯誤的,至於哪個地方設定錯誤?而又為什麼設定錯誤會有不一樣的顯示結果呢?

在這一篇文章中會來做個說明。


2012年9月16日 星期日

ASP.NET MVC 3 - DropDownList 的基本設定方式


怎麼突然要講起這麼基本的設定方式呢?

說實在話,我很少用 ASP.NET MVC 所預設的 DropDownList 方法,常看我 Blog 的朋友應該都知道我的 DropDownList 都是用我自己的方法來產出的,而這個設定並產出 DropDownList 的方法, 我在 Blog 中分享出來過:「ASP.NET MVC 後端產生DropDownList」。

不過近來時常都被問到有關 Html.DropDowbnList 的相關問題以及一個讓人疑惑的地方,於是我就著手寫下這一篇,這一篇跟之前「ASP.NET MVC 3 - 加入 ASP.NET MVC 3 原始碼來偵錯」是一樣的,都是用來鋪路的,因為必須要先把基本以及關鍵的地方先點出來,這樣下一篇的重點就會讓大家更加明白了。

 


2012年9月15日 星期六

twMVC @ Microsoft tech.days Taiwan 2012 - (2012.09.18 ~ 09.20)


是的,一年一度的 Microsoft tech.days 又來到了,每年的 tech.days 就有如 Microsoft 的技術大祭典一樣,想要了解新的技術或是想要知道有啥新鮮的微軟技術,在為期三天的 tech.days 中有許多的課程可以滿足你,看著課程表的時候,好多有興趣的課程都很想聽,遇到衝堂的時候就恨不得能有多個分身可以去聽課。

相信也很多人也知道 twMVC 也有參與這一次 tech.days 的盛會,但 twMVC 並不是廠商、教育訊中心,twMVC 而是以「合作社群」的身分來參與盛會,twMVC 有幸可以成為此次 tech.days 「唯三」的合作社群(感謝台灣微軟),另外兩個社群,一個是「iT邦幫忙」而另一個則是與 twMVC 相同性質的「Study4.tw」,屆時我們 twMVC 將在 tech.days 會期的三天中於會場有個小小的攤位,而 twMVC 的成員也會在這攤位上輪番駐點,雖然 twMVC 無法像其他廠商可以提供贈品或是活動,但我們會在攤位上竭盡所能的向各位回答任何問題或是提供技術上的諮詢,歡迎大家來攤位找我們聊聊天(不然我們會很無聊 … Orz)。

 


2012年9月14日 星期五

ASP.NET MVC 3 - 加入 ASP.NET MVC 3 原始碼來偵錯

為什麼閒閒沒事要寫這一篇呢?

又為什麼沒事要加入 ASP.NET MVC 3 的原始碼來偵錯呢?

這是因為遇到了讓我覺得弔詭的事情,所以必須要追根究柢的來詳細地追查清楚,但又發覺到,加入 ASP.NET MVC 3 的原始碼這件事情跟原本加入 ASP.NET MVC 2 的情況又有些不同,於是就記錄一下這整個操作流程,以方便讓我這時常忘東忘西的腦袋可以有個地方來恢復記憶,也讓有需要這麼做的朋友提供一個參考。

PS. 其實寫這一篇是為了後續的文章先鋪路,不然下一篇文章會長長一大篇。


2012年9月11日 星期二

ELMAH - 設定錯誤通知信件的主旨


在以前的 ELMAH 文章有介紹過怎麼讓 ELMAH 所捕捉到的訊息寄出 Email 到指定的電子信箱中:

ASP.NET MVC + ELMAH 監控並記錄你的網站錯誤資訊 3 
(elmah 的信件通知設定與 favicon.icon 404 錯誤過濾)

另外也有在另一篇文章中說明對特定的 Exception 使用不同的 mail 設定做寄發錯誤通知信的處理:

ELMAH - 自訂錯誤通知郵件的設定(於特定Exception)

上面的那兩篇文章都有提到錯誤通知信件的主旨要怎麼設定,但是上面文章中所說的設定方式卻會讓每次寄發出去的錯誤通知信件主旨都會是一樣的,為了可以方便地分辨錯誤通知信的不同,所以我們可以對信件主旨來做點不一樣的設定。



2012年9月4日 星期二

ASP.NET MVC 與 Javascript Alert

現在寫網站應該很少不會碰到 Javascript 的,尤其是現在 Javascript Framework 越來越多樣、強大,不再是多年之前只被一般人視為用來做「特效」的前端功能而已,現在開發 ASP.NET MVC 網站時也一定會用到 Javascript,我在 View 的這個部分就會使用 jQuery 來完成前端作業,我們將網站切分為 M, V, C 三個部分的模式下,我們應該要使用「關注點分離」的觀念來開發每個部分,有關 Javascript 的操作,都會在 View 來完成,很少有機會在 Controller 去做處理,Model 就更不用說(是不會處理到前端的顯示),而所謂的「很少有機會在 Controller 去做處理」這個意思指的是在後端去「組 Javascript 程式碼」。

在開發 ASP.NET Web Forms 時,假如遇到要顯示一個 Javascript Alert 的動作,很多時候都是在後端去組 Javascript 程式碼,當 PostBack 後,頁面就會執行 Javascript Alert,但是這個動作到了 ASP.NET MVC 就會變得不一樣了,在 ASP.NET MVC 中用 ASP.NET Web Forms 相同的處理方式是行不通的,以致於很多人就會在這邊一直撞牆,這邊就簡單說明一下在 ASP.NET MVC 中對於 javascript Alert 的處理方式。

 


2012年8月25日 星期六

ELMAH.MVC 2.0.1 - 可以自訂瀏覽路徑

在今年六月的時候,我有寫了一篇有關 ELMAH.MVC 2.0.0 的介紹文章:「Elmah.MVC 2.0.0」,其中討論了有關 Elmah Dashboard 瀏覽路徑的設定問題,原本 Elmah.MVC 2.0.0 不能夠讓我們自己去設定瀏覽路徑,而我也到作者的 Blog 中向他反應這個問題,但是作者的回覆說,基於「security by obscurity」以及加入瀏覽權限設定並且只限定 local 讀取 Elmah 就不需要擔心,不過在 2012-08-16 所更新的 Elmah.MVC 2.0.1,在這個版本裡就增加了可以自行定義瀏覽路徑的設定,另外也針對 VB.NET 使用 Elmah.MVC 時所發生的錯誤也做了修正(由 KKBruce 向作者提出),接下來說明一下有關自行定義 Elmah Dashboard 瀏覽路徑的設定與該注意的地方。


2012年8月24日 星期五

Visual Studio 2012 功能選單文字的大小寫設定

在 Visual Studio 2012 RC 發佈後,我就有安裝來體驗使用,整體的感覺跟 VS2010 是有很大的差異,而上個星期(8/15)RTM 正式發佈後,我也迫不及待地趕緊下載安裝,因為我並沒有 MSDN 訂閱權限,所以我所下載以及安裝的版本是 90 天的試用版,各位如果想要體驗並且熟習這新版的開發工具,可以到微軟 Visual Studio 官網下載試用版,網址如下:

http://www.microsoft.com/visualstudio/11/zh-tw/downloads

其實一開始使用 VS2012 時並沒有特別的去注意功能選單文字,但使用了 VS2012 英文版的時候才發現到這個比較特殊的地方,如下圖所示:

image

大家可以發現到 VS2012 的功能選單文字都是全部大寫的方式來呈現,這個功能選單文字全部大寫的顯示是不分語言版本的,只要是選單功能文字是英文就一律以大寫來顯示,所以這邊就記錄一下改變功能選單文字大小寫的方式。


2012年8月19日 星期日

使用 Javascript 讓區塊或圖片變成灰階

一段時間沒有寫文章了,算了算時間… 剛好是一個月,這麼久沒有寫文的結果就是忘了該怎麼寫文,所以就來寫個簡單的前端 Javascript 應用來暖暖身,這是我工作的專案中實際碰到的情況與解決方式,目前的專案中有一個區塊是依據會員的等級來顯示某些產品圖片,客戶主管想要讓更多的圖片可以顯示在區塊中,為了想要讓圖片做出區隔,於是就決定讓符合會員等級的產品圖片就還是以彩色顯示,而尚未符合等級的產品圖片就用灰階顯示,一開始的構想是如果要以灰階顯示產品圖片,就在處理產品圖片上傳的時候,以 C# 程式來產生一張灰階的圖片檔,但是專案已經有一堆的產品圖片資料了,不可能因為要做這個灰階顯示而讓既有的產品圖片重新上傳一次來產生灰階圖片檔案,或是另外寫程式去處理灰階檔案的產生,而且萬一以後客戶的需求不再只是圖片灰階顯示,而是想要讓顯示產品資訊的區塊也做灰階處理時,上述的方式就只是做一半而已…

於是就想到可以用前端的 Javascript 來處理這一個需求,但是 google 相關的 Javascript 套件都是會用到 HTML5 的 Canvas,為了避免客戶端無法顯示灰階效果的情況發生,所以就不能使用這些用到 Canvas 的套件,最後找到的就是「grayscale.js」這個套件,可以確保在 IE6 中正常顯示灰階效果。


2012年7月20日 星期五

活動宣傳 2012-08-18「ASP.NET MVC 4 新功能介紹(快速上手) 與 Code Templates實戰開發」

期待以久的 twMVC 第四次研討會開放報名啦!

這一次的主題為:

  • ASP.NET MVC 4 新功能介紹(快速上手)
  • ASP.NET MVC - Code Templates實戰開發


講師內容也是相當堅強,分別由兩名現任微軟 MVP主講:


對 ASP.NET MVC 有興趣或是已經開始使用 ASP.NET MVC 開發專案的朋友都相當適合喔!

報名網址:

http://registrano.com/events/twmvc4

 

2012年7月16日 星期一

ASP.NET MVC 3 - 基本三層連動式下拉選單應用

昨天(2012-07-14)是 twMVCASP.NET MVC - 新增、查詢、修改、刪除基本功實戰與資料驗證擴充」研討會,在會後有許多的朋友向研討會講者與 twMVC 的其他成員討論有關 ASP.NET MVC 的問題,有個朋友就問了一個如何在 ASP.NET MVC 中實作「連動式下拉選單」的問題,而稍晚在 twMVC Facebook 粉絲團 就分享了 kevin 在部落格中有關下拉選單操作的三篇文章,

image

分別是:

jQuery 對下拉選單 DropDownList 的操作 - 1

jQuery 對下拉選單 DropDownList 的操作 - 2:連動下拉選單

jQuery 練習題:三層式連動下拉選單(無後端整合)

 

接下來的這篇文章將會逐步說明以基本的 ASP.NET MVC 與 jQuery 功能來實作一個三層連動式下拉選單。

2012-07-16 11:30 更新:文末附上範例程式檔案連結。

2012年7月11日 星期三

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 - 使用 DisplayTemplate 設定分頁樣式

這幾天接連好幾篇介紹 MvcPaging 2.0 的應用,從一般的分頁、AJAX 分頁,最後是使用 jQuery 的 AJAX 分頁,幾乎都把 MvcPaging 2.0 的基本應用都給介紹完了,但其實還有一樣沒有介紹,那就是自訂分頁樣式,這是 MvcPagin 2.0 的一個新功能「DisplayTemplate」,我們可以設定一個 Template 的 PartialView,這個 PartialView 是用來產生 Pager,而產生 Pager 的方法則是使用寫在 View Page 上面的 Razor @helper,有別於以往產生 Pager 內容是必須要從後端的方式,在前端使用 Razor @helper 來產生 Pager 會更為容易。

 

2012年7月10日 星期二

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 - 範例程式下載

提供「ASP.NET MVC 資料分頁 MVCPaging 2.0 應用」這一系列的程式範例下載,

範例程式所使用的開發環境為:.Net Framework 4.0, ASP.NET MVC 3, VS2010, SQL Server 2008 R2

資料存取層使用的是 ADO.NET Entity Framework 4.3.1,

而資料庫所使用的是微軟所提供的 Northwind(北風資料庫)

 


2012年7月9日 星期一

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.4:分頁進階處理

MvcPaging 2.0 的應用在前三篇文章中,從一般的資料分頁開始實作,再修改為 AJAX 資料分頁,到了 Part.3 這一篇的 AJAX 資料分頁就改使用 jQuery 來處理,這一系列的實作應該可以對使用 MvcPaging 來處理資料分頁有了一定的了解,而接下來這一篇將介紹比較進階的操作處理,我們將以「Dynamic LINQ + Entity Framework - Part.4:ASP.NET MVC 進階應用」這一篇的實作範例來做修改。

image


2012年7月8日 星期日

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.3:AJAX 分頁 - jQuery

上一篇「ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.2:AJAX 分頁」用 MvcPaging 所提供的 Ajax 分頁來完成,MvcPaging 的 Ajax 分頁是使用了 System.Web.Mvc.Ajax 的 AjaxOptions 來完成,其實也可以用 jQuery 來完成 Ajax 分頁的功能需求,這一次就來說明使用 jQuery 並且以 POST 方式完成 Ajax 分頁。

 


2012年7月6日 星期五

攻略 ASP.NET MVC - 偵測監控「ASP.NET MVC 偵測監控與 Log 記錄」


這是 2012-06-14 twMVC攻略 ASP.NET MVC - 從無到有 與 偵測監控」研討會中由我所主講的題目,講題的內容包含了有關網站監測與 Log 記錄的工具介紹與使用:

ELMAH

  • ELMAH介紹
  • 使用 Nuget 安裝 ELMAH
  • 將訊息資料儲存設定
  • ELMAH 的安全性設定

NLog

  • NLog介紹
  • 使用 Nuget 安裝 NLog 與設定
  • 將 Log 資料儲存設定
  • 設定並使用 Email 寄發 Log 訊息

Log Reporting Dashboard

  • Log Reporting Dashboard 介紹

 

在這裡將簡報檔以及講題所使用的範例程式檔案做整理,並且列出相關的資訊。

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.2:AJAX 分頁


接續上一篇「ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.1:一般、表單(Form)」,這一篇將會說明如何使用 MvcPaging 的 Ajax.Pager 方式來完成 AJAX 分頁的功能。

 


2012年7月5日 星期四

ASP.NET MVC 資料分頁 MVCPaging 2.0 應用 Part.1:一般、表單(Form)


之前有介紹過 MVCpaging 2.0 的內容「ASP.NET MVC 3 資料分頁 - MvcPaging 2.0.0 Release」,但是那篇文章的內容是著重在 MVCPaging 2.0.0 以之前版本的比較與改變,並沒有說明要如何應用,所以這一篇就要來實際的使用 MVCpaging 來做練習與應用,這一系列的文章將會跟大家來說明如何將一個含有表單的基本資料列表使用 MVCPaging 加上分頁功能,並繼而修改分頁的資料後送伺服端的方式,以及如何修改為 AJAX,這一篇就先從基本的開始吧!

 


2012年7月2日 星期一

LINQPad v4.42.05 Beta 介紹

 

其實目前 LINQPad 的版號雖然不是上次介紹時的 v2.41.2 / v4.41.2,版本已經更新到「v2.42.01 / v4.42.01」

image

之前介紹有關 LINQPad 的文章「看看 LINQPad ( v2.41.2 / v4.41.2 ) 更新了什麼

那既然還沒有更新版本,又為何還要介紹 LINQPad 呢?可以注意文章標題,標題是「LINQPad v4.42.05 Beta

今天收到 LINQPad 所發出的 News Email,看到 Beta 有更新了幾個不錯的功能,所以就跟各位報告!

 

2012年6月30日 星期六

Sublime Text 2 - 同步捲動檔案視窗 Part.2

 

上一篇「Sublime Text 2 - 同步捲動檔案視窗 Part.1」的最後有提到,

因為「Synchronized File Scrolling」只有提供鍵盤操作的功能,並沒有提供滑鼠的操作,

所以必須要用另外一種方法來解決,這一篇文章就是要來介紹這個方法,不多廢話就直接看下去!

 

Sublime Text 2 - 同步捲動檔案視窗 Part.1

 

在比對兩份檔案是否為內容一致或是要看差異性的時候,我們會用 WinMerge 或是 CodeCompare 等工具來輔助,

尤其是遇到檔案簽入版本控管且遇到檔案衝突的時候就一定會用到這樣的工具,

SNAGHTML663bbe0

 

在比對兩份文件的時候,我們可以拖曳視窗的捲軸來上下移動文件,此時兩份文件就會同時上下移動,

這樣同時捲動文件內容就可以很輕易的比對出兩份文件的差異性,

SNAGHTML665ec23

 

在 Sublime Text 2 中有支援多檔案在多個直行或多個橫列中顯示,

SNAGHTML667d3f2

SNAGHTML668519a

但是 Sublime Text 2 並沒有直接提供同時捲動兩份文件的功能,所以比對兩份文件時就必須自己手動去分別去捲動文件,

所以這一篇文章就是要來說明透過安裝 package 來讓 Sublime Text 2 可以有同時捲動文件的功能。

 

2012年6月29日 星期五

Dynamic LINQ + Entity Framework - Part.4:ASP.NET MVC 進階應用

 

其實這一篇原本要寫在「Dynamic LINQ + Entity Framework - Part.3:ASP.NET MVC 應用」的最後面,

但是那一篇文章已經是長長一大篇了,為了避免大家看到睡著或是沒耐心看完全部就離開,

所以就把後面要接續寫的內容給放到這一篇文章裡,

這一篇的進階應用會多加一些功能以及調整一些顯示的方式,都可以應用在實務專案裡。

 

2012年6月28日 星期四

Dynamic LINQ + Entity Framework - Part.3:ASP.NET MVC 應用

 

我都快要忘記有開「Dynamic LINQ + Entity Framework」這個系列的主題,

離這個主題的上一篇文章發佈日期都快要超過三個月了,所以趕快來補一下這個主題的進度,

前兩篇是說基本的整合與程式應用,所以這次就直接進入到 ASP.NET MVC 網站專案的應用,

先藉由幾個簡單的範例來說明「Dynamic LINQ + Entity Framework」在網站專案中的操作應用。

 

Dynamic LINQ 可以在 .NET 的專案中使用,不是只有限定在 ASP.NET MVC 中才能使用,

我目前工作上所開發的專案是 ASP.NET WebForms,也是一樣有使用 Dynamic LINQ。

 

2012年6月27日 星期三

Log Reporting Dashboard 介紹

twMVC 在 2012-06-24 所舉辦的「攻略 ASP.NET MVC - 從無到有 與 效能剖析」研討會中,我所主講的「ASP.NET MVC 偵測監控與 Log 記錄」這個主題內容裡,除了有介紹 ELMAHNLog 之外,在最後的一點時間裡有提到一個整合 Log 記錄的模組,這個模組就是「Log Reporting Dashboard」,其實原本主題說明裡給予 Log Reporting Dashboard 說明介紹的時間就只有一點點,只是向在場的研討會參加者介紹有這麼一個 ASP.NET MVC 網站模組可以用來整合顯示各個 Log 機制的記錄,而當時講完 ELMAH 與 NLog 之後的時間也所剩無幾,所以對於 Log Reporting Dashboard 就只能走馬看花的介紹,所以在這邊就寫一篇文章來稍微詳細的介紹。


2012年6月23日 星期六

Sublime Text 2 - 關於 Indent Guide …

 

之前有網友提出了這個問題:

image

是的,有關 Sublime Text 2 的 Indent Guide 就目前而言,還沒有一個比較有直接修改其樣式顏色的方式或是套件,

我所謂的直接修改,我們在 Sublime2 中只需要去修改或是增加 Preference.sublime-settings 裡面的屬性,

例如顯示字型的種類或是顯示的大小,或是使用的 theme 樣式,只要修改或是增加屬性就能夠改變顯示的樣貌,

而 indent_guide 的修改就沒有辦法這麼做。

 

2012年6月22日 星期五

活動宣傳 2012/07/14「ASP.NET MVC - 新增、查詢、修改、刪除基本功實戰與資料驗證擴充」

 

twMVC 繼上次 2012-06-14「攻略 ASP.NET MVC - 從無到有 與 偵錯監控」的研討會之後,

將在 2012-07-14 週六 下午在台北蛙咖啡舉辦第三場的研討會,這一次也同樣帶來兩個主題:

  • ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰
  • ASP.NET MVC內建驗證活用與擴充

 

這一次特別選在週六下午的時段,讓各位不用在下班之後還要趕赴研討會會場,

而且週末下午的時段讓外縣市的朋友有機會可以共襄盛舉。

 

研討會報名網址:http://registrano.com/events/twmvc-3/

活動時間:2012-07-14(六)下午 01:45 ~ 05:00

活動地點:台北蛙咖啡松江店(新館地下室)台北市松江路69巷3-1號 (捷運蘆洲線,松江南京站,四號出口)

適合人員

  • 剛開始接觸 ASP.NET MVC 的開發人員
  • 想要了解 ASP.NET MVC 新增、查詢、修改、刪除 整套寫法的開發人員
  • 不想用苦工慢慢刻每個表單驗證的開發人員
  • 對於 ASP.NET MVC 有興趣的朋友


場地費用:

  • 新台幣 200 /人 (備有茶水)
  • 如報名截止前(2012-07-11 上午10點)尚未取消報名,而活動當天未到,因場地已訂購將無法退款。

 

2012年6月21日 星期四

NLog - 將 Log 記錄儲存在 SQLite 中

為什麼要把 NLog 的 Log 記錄給儲存在 SQLite 中呢?

因為有時候我們所建置的網站資料庫環境並非那麼容易就可以讓我們建立一個 Database 或是 Table,有的公司或是有的環境,對於資料庫的管理會相當嚴謹,凡是要建立一個新的 Database 或是 Table 都需要層層關卡,甚至於會因為提出的申請需求不明確或是他們覺得沒必要而駁回。

雖然說把 Log 記錄儲存成一個個的文字檔案也是可以,但是事後的 Log 記錄的追查就不是那麼方便,甚至於如果想要自己建立一個瀏覽 NLog 記錄的功能網站或是導入使用 Log Reporting Dashboard,不把 Log 記錄給放到資料庫中是不太可行的,而把 Log 記錄給儲存到 SQLite 的話,在這樣資料庫嚴謹管控的情況下,使用 SQLite 就會是一個蠻適合的解決方案。

這一篇就說明如何將 NLog 的 Log 記錄儲存到 SQLite 中。


2012年6月20日 星期三

NLog 輸出記錄資訊到 Visual Studio Output 視窗

 

NLog 有支援很多不同的 targets,在 NLog 的首頁上有列出一些比較常用到的,

  • Files – single file or multiple, with automatic file naming and archival
  • Event Loglocal or remote
  • Database – store your logs in databases supported by .NET
  • Network – using TCP, UDP, SOAP, MSMQ protocols
  • Command-line console – including color coding of messages
  • E-mail – you can receive emails whenever application errors occur
  • ASP.NET trace

    … and many more

    其中比較常用到的應該是 Files, Database 以及 Email,不過 NLog 能夠支援的 targets 的清單如下:

    http://nlog-project.org/wiki/Targets

    image

     

    而這些 NLog 所記錄的 Log 在我們 Debug 時還要去另外開啟資料庫工具或是開啟檔案、收信等,才能夠看到 Log 內容,

    有時候在 Visual Studio 進入偵錯模式的時候,不會想再分神去開啟別的工具來看這些 Log 檔案,

    而會希望能夠把一些不需要記錄到 Log 資料庫的訊息給顯示在某個地方,讓我們執行到某些地方就可以看到記錄,

    有一些寫 ASP.NET 的朋友最常用的方式就是 …… ResponseWrite() 與 Javascript 的 Alert() ……

    但這不是一個好的方式。

     

  • 2012年6月18日 星期一

    Elmah.MVC 2.0.0


    之前有說到,Elmah.MVC 已經在 2012-06-16 發佈 2.0.0 的更新了,

    之前我們一直使用的版本是 1.3.2,新舊版本的差異性相當地大,所以就覺得有需要做個介紹,

    其實最主要的原因是,在 2012-06-14 twMVC 的研討會活動,我所講述的「ASP.NET MVC 偵測監控與 Log 記錄」中,

    有向在場的朋友介紹使用 Elmah.MVC,當時所使用的版本仍然是 1.3.2,

    雖然 2.0.0 早已經在 2012-06-13 做了 RC 發佈,但當時我是想說應該不會這麼快就有變化,

    沒想到上週六(2012-06-16)在家整理專案的時候,一樣是透過 NuGet 安裝 Elmah.MVC,發現到安裝後有很大的不同,

    當時心裡就覺得大事不妙,心想著假如有參加過研討會的朋友練習使用 Elmah 然後也安裝了 Elmah.MVC,

    發覺到怎麼安裝之後的內容跟我在研討會中所說的不同時,我一定會遭到這些朋友的咒罵,因為是完全兩碼子不同的事!

     

    所以就寫一篇文章來說明一下 Elmah.MVC 2.0.0 有什麼樣的不同與變化!

    2012年6月17日 星期日

    ASP.NET MVC 使用 Elmah 但不安裝 Elmah.MVC 的 location 修改


    在之前的文章:

    ASP.NET MVC + ELMAH 監控並記錄你的網站錯誤資訊 1

    ASP.NET MVC + ELMAH 監控並記錄你的網站錯誤資訊 2

    第一篇是講有關 ASP.NET MVC 網站專案安裝 Elmah 相關 Package 的說明,

    第二篇則是講到有關如何修改 Elmah 的 location 的方法(在文章的下方,雖然說得不是很清楚)。

     

    然後前些日子(2012-06-14)這天的活動「活動宣傳 2012/06/14 「攻略 ASP.NET MVC - 從無到有 與 效能剖析」

    這天我所講述的內容當中也有說明到如何去修改 Elmah 的 location 以及如何去修改 Elmah.MVC 所預設建立的 Area 名稱,

    其實 Elmah.MVC 這個 package 並非一定要安裝,Elmah.MVC 只是提供一個符合 MVC URL 路徑的瀏覽方式,

    如果我們的 ASP.NET MVC 網站有安裝 Elmah 但不想安裝 Elmah.MVC 的話,其實也是可行的,

    這樣的作法就跟 ASP.NET WebForms 網站使用 Elmah 是一樣的。

     

    但因為沒有安裝 Elmah.MVC 的情況下,要如何修改 Elmah 的 location 呢?

    以下就為各位做個說明。

    2012年6月12日 星期二

    Sublime Text 2 - 快速開啟符合搜尋關鍵字的檔案


    事情是這樣的……

    image

    我自己試了一下,使用「Ctrl + P」的方式輸入關鍵字然後開啟檔案,這方式的確很簡單也蠻方便的,

    不過要是想要開啟好幾個符合關鍵字的檔案就沒有辦法這麼做了,難道真的要一個一個開啟嗎?

    要是檔案數量有一堆,豈不是要開到天荒地老嗎?

    不過呢 …… 這還是有方法來達到這樣的操作需求,完全使用鍵盤操作而不必用到滑鼠,

    以下就來看看用什麼樣的方法來達到這樣的操作需求。

     

    2012年6月11日 星期一

    ASP.NET MVC 3 使用 ELMAH 無法記錄正確 Http Status Code ?

     

    最近為了 twMVC攻略 ASP.NET MVC ─ 從無到有 與 偵測監控」其中的講題「ASP.NET MVC 偵測監控與 Log 記錄」而一直在做準備,

    但是這兩天突然看到一個很奇怪的現象,讓我一直很納悶……

    image

    為什麼 ELMAH 沒有記錄到正確的 Http Status Code 呢?原本應該是 500 而 ELMAH 卻是記錄為 0 ……

    這個問題一直困擾著我,所以就試著找出原因來。

     

    2012年6月5日 星期二

    活動宣傳 2012/06/14 「攻略 ASP.NET MVC - 從無到有 與 效能剖析」


    距離 twMVC 第一次的研討會已經過了一個多月,這一次 twMVC 將會帶來兩個主題:

  • ASP.NET MVC網站的從無到有
  • ASP.NET MVC 偵測監控與 Log 記錄

    這一次研討會將會以實戰講解的方式,用實作的方式讓大家了解如何使用 ASP.NET MVC 技術建立網站,

    除了建立網站之外,也會告訴大家如何確切掌握網站錯誤的發生以及發生的原因。


    研討會報名網址:http://www.accupass.com/go/twmvc2

    活動時間:2012/06/14(四)19:00 ~ 22:00

    活動地點:板橋車站六樓(資拓宏宇國際股份有限公司 亞洲廳)

    適合人員:

  • 尚未接觸 ASP.NET MVC 的開發人員
  • 對於 ASP.NET MVC 效能偵測與 Log 機制有興趣的開發人員
  • 對於 ASP.NET MVC 有興趣的朋友

    場地費用:

  • 新台幣 200 /人 (備有小茶點與飲料,費用請於報名時繳納)
  • 如報名截止前(2012-06-12 上午10點)尚未取消報名,而活動當天未到,因場地與餐飲部分已訂購將無法退款。

     

  • 2012年5月29日 星期二

    Sublime Text 2 - Packages 介紹 - 關於 JSON 與 XML 格式


    一段時間沒有寫有關 Sublime Text 2 的文章了,所以今天就介紹兩個有關 JSON 與 XML 格式整理的 Packages,

    有些人看到被 Minifer 過的 JSON, XML 資料會覺得很礙眼,因為很不好辨識,

    所以對資料格式有嚴重潔癖的人來說,接下來所介紹的兩個 Packages 就會有很大的幫助了。

     

    jQuery 練習題:三層式連動下拉選單(無後端整合)

     

    這是一個老掉牙的一個功能,但問題就是常常都會有人問起,以往部落格也有針對連動式下拉選單寫了文章,

    jQuery 對下拉選單 DropDownList 的操作 - 2:連動下拉選單

    因為該文章的內容是有跟 ASP.NET MVC 做整合,所以對於有些沒有接觸過 ASP.NET MVC 的人就會看得模模糊糊的,很多對 Javascript 或是 jQuery 不熟的人做連動式下拉選單,大部分的情況就是直接 Google 然後找一個自己看得懂也改得動的來用,但問題是 …… 有了兩層式連動下拉選單就一定會有三層式連動下拉選單的需求,對於前端程式不是很熟悉而且只會複製貼上、修改的人來說,從兩層式連動換成三層式連動就會不知所措。

    講這麼多,所以這邊文章接下來的內容就將會來練習如何做一個三層式連動的下拉選單,沒有 Server-Side 的程式,完全都是前端程式與文字資料的整合,所以看得懂的就看,看不懂的就回頭去好好練習 Javascript 與 jQuery,如果是想要找一個拿來修改就可以用的三層式連動下拉選單,可以就此打住而不必繼續往下,因為拿回去應該也不能用。

     

    2012年5月28日 星期一

    MiniProfiler 安全性釋疑


    經常來這個部落格的人應該會發現到我一直推薦大家使用 MiniProfiler,大家的反應也都是很好,但卻一直保持觀望,為什麼會這樣呢?其實了解一些朋友的疑慮之後就讓我不禁搖頭,我必須說,好用的工具介紹給大家,各位也必須要自己抓下來安裝之後來做個了解,而不能只是看看文章,覺得東西不錯但有些疑慮擺在心理然後就把這好用的工具給拋在腦後,這樣是不對的啦!

    我這邊聽到最多的都是 MiniProfiler 的安全性以及上線後的 Profiling Popup 的顯示……

    如果是真的有實際玩過 MiniProfiler 的人就不會有這樣的疑問,玩過的人反而會問的是如何設置權限……

    所以就藉著這篇文章來試圖解除還沒有玩過 MiniProfiler 的人存在心中以久的疑慮。

     

    2012年5月25日 星期五

    Visual Studio 2010 更新 NuGet Package Manager 出現錯誤


    一早上班就如同往常一般的開啟 VS2010 準備一天的 Coding 工作,而開啟 VS2010 之後就出現有擴充套件的更新通知,

    image

    開啟擴充管理員就看到原來是 NuGet Package Manager 有新版本要做更新,

    image

    我目前所使用的 NuGet Package Manager 版本是 1.7.30402.9028,雖然說也才更新版本不久,

    但是基於已經變成不用 NuGet 就不會在 VS2010 做專案、寫程式的我,我一定是會更新的,

    但就在下載更新後並安裝時竟然出現一個錯誤訊息給我……

    image

     

    2012年5月15日 星期二

    MiniProfiler with ASP.NET WebForms

    上一篇文章「MiniProfiler 2.0.1」就有說到 MiniProfiler 有支援 ASP.NET WebForms 與 WCF,因為我對 WCF 相當不熟,而目前工作所執行的專案就是使用 ASP.NET WebForms,所以看到 MiniProfiler 有支援 WebForms,我就期待在 WebForms 上可以使用,因為在 MVC 的專案開發時使用 MiniProfiler,的確是有很大的幫助,而如果相同的功能可以在 WebForms 上執行就太好了,不過 MiniProfiler 的官網上的使用說明以及作者的部落格文章裡面對於 WebForms 專案如何配置 MiniProfiler 的設定卻是隻字未提。

    而 github 上所開放的原始碼裡,WebForms 專案看起來就是個測試追蹤 SQLite 的 Demo 專案,如果要看原始碼中 WebForms 專案的配置設定來做為我們專案修改的參考,我必須說一定看不懂啦!不過我在幾次的測試之後整理出如何為 WebForms 專案配置設定 MiniProfiler 的方式,以下就是我所整理出的心得,分享給有需要的朋友做參考。

     


     

    2012年5月14日 星期一

    MiniProfiler 2.0.1

    MiniProfiler 在這個部落格中的很多文章中都有出現過,甚至於也以此為題寫了有四篇的文章:

    哪為什麼現在又要再寫一篇有關 MiniProfiler 的文章呢?

    這絕對不是為了要佔篇幅(這裡不是報紙也不是雜誌),也不是為了要騙稿費(我找誰要稿費呀),而是因為 MiniProfiler 在 2012-02-22 所發佈更新的 v2.0 有了蠻多的變革,而我卻是遲至今日才開始想寫這些內容,工作忙碌、twMVC 準備工作滿檔、懶?

    總之呢 …… 就看下去吧!

     


    2012年5月9日 星期三

    jQuery 練習題 : 圖片即時縮圖並裁剪顯示為正方形


    標題看起來很繞口而且也有些詞不達意,所以就簡單的用幾張圖以及說明文字來讓大家了解,

    一般做網站都會有要製作圖文上稿的功能,有時候一篇文章還需要指定一張封面圖的需求,

    但有時候某些版面的編排製作上,圖片只能夠顯示正方形的圖,如果使用者在後台上了一張長方形的圖,

    image

    而前台只能顯示正方形,所以就會變成……

    image

    在後台裡,我們是可以在使用者上傳圖片後對圖檔做檢查,只要不是符合正方形的圖片就擋回去,

    但有時候我們工程師這樣的作法卻反而會引起很多使用者的反彈,因為不能較使用者都要會圖片裁剪的能力以及工具,

    所以跟使用者拉鋸的情況下,使用者多半都會接納圖片變形的結果,而讓網頁看起來就是充滿變形的圖片。

    其實這種情況也是有多種解決的方法,

    例如說可以用之前介紹的圖片裁剪功能,讓使用者上傳圖片後,再去裁剪要顯示的範圍,不過就要多花功夫去做這部份的功能,

    或者是說,使用者上傳圖片之後,讓程式自動去裁剪要顯示的範圍並另存成新圖檔,這也是個不錯的方式,這以後會講到。

    不過比較簡單的方式還是透過前端 Javascript 程式的操作,讓前端的圖片自動顯示一個正方形範圍而且還有縮圖的效果,

    接下來我們就來練習做這個功能。

    2012年5月6日 星期日

    ASP.NET MVC 3 + jQuery imgAreaSelect + fancyBox


    在今年一月的時候有曾經寫過一篇「圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect」,

    這是因為工作上的需求而延伸出來的,工作上的專案是使用 ASP.NET WebForm,而關於這個主題則是 MVC 與 WebForm 都有實作,

    當初的實作在之後的專案上也做了一些修正,讓使用情境可以更為便利以及合理,所以也將當初的實作加以修正,

    就如本篇文章的主題,這一次的實作有加入使用 fancyBox,使用 fancyBox 是相當簡單的,對於使用者來說是會更加的方便,

    至少不用在上傳、裁剪、主頁等這幾個頁面一直跳來跳去的,

    這一篇文章會著重於修改以及加強功能的說明,所以就不會再從頭到尾的把製作過程鉅細靡遺的詳述一次,

    如果對於本篇文章有完全不懂的地方,會比較建議依序看過以下的幾篇文章,並且把範例程式抓回去看過後再回過頭來看這一篇,

    1. 圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect
    2. 圖片裁剪大頭貼功能 - ASP.NET WebForm + jQuery + imgAreaSelect
    3. 圖片裁剪大頭貼功能 - ASP.NET (MVC, WebForm) + jQuery + imgAreaSelect 原始檔

     

    2012年4月30日 星期一

    ASP.NET MVC 學習資源整理 Part.1

    在上個星期四 (2012-04-26) 完成了 twMVC 第一次的研討會「與 ASP.NET MVC 的第一次親密接觸」之後,在研討會簡報檔案裡面以及說明的時候都有說明到有哪些的 ASP.NET MVC 學習資源,而網路上也有相當多的部落格或是網站都有專門介紹 ASP.NET MVC,但還是有很多人覺得資訊還是很少,甚至於有些人覺得目前網路上的 ASP.NET MVC 資源都比較偏向於進階的內容,對於剛入門或是正在評估或是觀望學習的人來說,太多的資源對他們來說反而是一種困擾,所以我就藉這一篇文章稍微整理一下有關 ASP.NET MVC 的學習資源,將我以往學習 ASP.NET MVC 所接觸並且覺得不錯的網站提供給大家參考。

    2012年4月29日 星期日

    看看 LINQPad ( v2.41.2 / v4.41.2 ) 更新了什麼


    在上週的時候經 twMVC 成員的提醒說,LINQPad 更新了版本,而且這一次的更新在結果輸出上有了一些的不一樣,

    但除了結果輸出的顯示有不同之外,還有哪些的修改呢?

    以下就簡單的說明這次修改的地方,也另外說明有新增了那些的功能。

     

    2012年4月28日 星期六

    Sublime Text 2 - Packages 介紹 - KeymapManager


    Sublime2 有個不錯的優點就是有蠻多好用的 Packages,當我們在 Sublime2 安裝越來越多的 Packages 之後,雖然可以讓我們在 Sublime2 的使用更加地便利,但越來越多的快速鍵就是個問題,有些快速鍵的組合方式又相當地相似,甚至於有的快速鍵會跟其他編輯器的快速鍵是一樣的,不過操作的功能卻是完全不同,像我已經算是很努力地去記住很多的快速鍵了,但還是常常會忘記,或者是要多試好幾次才能把正確的快速鍵給敲出來,所以為了要避免因為輸入錯誤快速鍵或是想不起快速鍵的窘況一再發生,所以就去找了找有無相關的 Packages 可以有效解決,而還真的有一套不錯的 Packages 可以改善記不住 Packages 快速鍵的情況,接下來就會位各位介紹「KeymapManager」這個好用的小工具。

     

    2012年4月24日 星期二

    ASP.NET MVC 3 資料分頁 - MvcPaging 2.0.0 Release

    在去年的時候就已經有寫過一篇關於使用 MvcPaging 製作資料分頁功能的文章,「ASP.NET MVC - 資料分頁(1) 使用MvcPaging」,不過那一篇裡面只有講到比較基本的使用方法,並未做較為進階的操作方式。而在 2012-04-20 時,MvcPaging 也將版本推進到「2.0.0」,

    image

    在下載原始碼並大略瀏覽看過一遍之後,MvcPaging 2.0.0 有做了一些的改變,新版本的設定方式與之前版本相比是顯得有彈性許多,這個部落格「資料分頁」裡的文章都會比較偏重於後台功能的應用以及 AJAX 的應用,不過因為「資料分頁」這些文章都還是使用 MvcPaging 的 MVC 2 版本,並沒有跟進到之後的 MVC 3 版本,以致於現在看「資料分頁」裡面的部份文章內容是落後許多,所以我們就借此機會先來看看之前的版本,也另外比對新版本有做了哪些的改變。

     

    2012年4月21日 星期六

    ASP.NET MVC 3 - ViewBag 裡使用方法(Method)

    看到標題一定會有人聯想到這篇文章應該是要介紹 VidewBag 的「使用方法」,

    但這一篇並不是要說明怎麼用 ViewBag,而是我們去放 Method 在一個 ViewBag 中來使用,

    ASP.NET MVC 在 MVC3 以前,Controller 存放資料到 View 會常常使用到 ViewData,而到了 ASP.NET MVC 3 多了一個 ViewBag 的類別可以拿來放資料,也可以用來當做 Controller 傳遞資料給 View 的媒介,ViewData 與 ViewBag 其實本質上都是同一種的,可以從 ASP.NET MVC 的原始碼中看出,

    public dynamic ViewBag
    
    {
    
        get
    
        {
    
            if (_dynamicViewDataDictionary == null)
    
            {
    
                _dynamicViewDataDictionary = new DynamicViewDataDictionary(() => ViewData);
    
            }
    
            return _dynamicViewDataDictionary;
    
        }
    
    }

    ViewBag 是用 dynamic 這個型別的包裝,dynamic 型別的一項特點就是當要使用 ViewBag 中的某個資料時,可以不必做類別轉換,而要使用 ViewData 中的某個資料時,就必須要做類別轉換,不過 ViewBag 雖然說因為 dynamic 的特點,在使用時可以不用類別轉換,但也因為這樣,在速度上是會比 ViewData 慢一些。

    就剛剛所說的,ViewData 與 ViewBag 兩者所做的工作目的是一樣的,都是為了要讓 Controller 傳遞資料給 View 使用,而 ViewBag 是 ViewData 使用 dynamic 的再包裝,讓我們可以在 View 中使用資料時不必再多做一次類別轉換的動作,資料拿來就可以直接使用。


    2012年4月19日 星期四

    取得 Entity Framework 中 Entity 對應 Table 的原生 Column Name

    上一篇「取得 Entity Framework 中 Entity 的主鍵成員名稱(KeyMember)」裡面我們用了兩種方式來取得 Entity 主鍵成員,那既然都可以取得 KeyMember 的名稱與資訊了,哪麼同樣在 Entity 裡的其他欄位也應該可以拿得到吧!

    當然可以。

    取得的方式在以下的文章之中也提供兩種方式,不過就如同文章標題所說的,我只要取得原本 Table 中的 Column Name,至於其他因為關連而產生的 Entity Property 就不用取出。


    2012年4月18日 星期三

    取得 Entity Framework 中 Entity 的主鍵成員名稱(KeyMember)

    因為之前有一陣子在 Study 有關 Dynamic LINQ 的資訊,所以有時候會在測試時遇到一些問題,例如說這一篇的主題,我要怎麼去抓出每個 Entity 的主鍵成員有哪些?在點部落中「亂馬客」有一篇文章就有說明:

    [EF]如何取得ADO.NET Entity Framework中某Table的主鍵值設定

    不過亂馬客所提供的方法只能取得一個主鍵成員的資料,如果說一個 Entity 不只一個主鍵成員的話,就要做一點小改變。

     

    2012年4月14日 星期六

    Sublime Text 2 - 使用 Dropbox 同步多台電腦的設定


    前一篇「Sublime Text 2 - 使用 SugarSync 同步化多台電腦的設定」說明透過 SugarSync 的資料夾同步功能來同步多台電腦的 Sublime2 設定,

    我所使用的 Cloud Storage 服務並不多,但是大部分都不支援指定資料夾的同步功能,

    而 SugarSync 剛好有我所需要的,而且還有不錯的 GUI 程式操作介面,所以就一開始就介紹給大家。

     

    但是現在比較多人在使用的 Cloud Storage 服務還是「Dropbox」,

    我與 tw.MVC 的夥伴之間的文件共享與同步都是使用 Dropbox,

    然而 Dropbox 卻沒有提供指定資料夾同步的功能,真的是相當可惜,如果有這個功能的話,我就會花錢買服務,

    目前 Dropbox 沒有提供資料夾同步的功能,網路上還是有很多文章有分享如何使用 Symbolic link 的方式來達到資料夾同步的功能,

    但是這些指令操作卻會讓很多想要這個功能的使用者有些卻步,而且這種 Symbolic link 的方式也是有些風險存在,

    所以這一篇文章中將會說明如何使用 Dropbox 來同步多台電腦的 Sublime2 設定,並且說明千萬要注意的細節。

     

    2012年4月6日 星期五

    Sublime Text 2 - 使用 SugarSync 同步化多台電腦的設定

     

    是的,這一篇是說如何使用「SugarSync」來同步多台電腦的 Sublime2 設定,

    為何不使用「Dropbox」來做為同步化的媒介呢?

    其實主要的原因之一是已經有很多文章都在說明如何使用 Dropbox 來同步 Sublime2 的設定,

    還有另外一個因素是,想要試試看 SugarSync 的目錄同步化的功能應用,

    看看 SugarSync 是否適合用於 Sublime2 的同步化,

    至於使用 Dropbox 來做同步化,下一篇文章也來實作一次好了。

     

    2012年4月2日 星期一

    動態取得 Entity Framework 中 Entity 對應的 TableName


    雖然說專案使用 Entity Framework 之後會比較少在程式中去下 SQL Command 做資料存取的執行,

    但有時候還是免不了會有這樣需要的時候,如果說是少數幾個 Entity 才會去執行 SQL Command 的需求時,

    其實會偷懶一下,直接就把整條 SQL Command 給寫死在程式當中,

    但如果有些功能是屬於通用的時候,這種時候就不太可能把 SQL Command 給寫死,

    如果是用字串的方式將每個 Entity 所對應的 TableName 給寫死,這樣的方式又顯得不夠聰明,

    所以比較好一點的方式就是經由 Entity Framework 去動態取得 TableName。

    2012年3月29日 星期四

    Oracle for Entity Framework - LIKE 的查詢操作方式


    資料庫使用 MS SQL Server 在 Entity Framework(EF)中如果要操作「like」查詢時,可以使用「Contains」,

    例如以下的 LINQ Query:

    var query = this.Products
    
        .Where(x=>x.ProductName.Contains("CH"))
    
        .OrderBy(x=>x.ProductID);

    轉出的 SQL Command:

    SELECT 
    
    [Extent1].[ProductID] AS [ProductID], 
    
    [Extent1].[ProductName] AS [ProductName], 
    
    [Extent1].[SupplierID] AS [SupplierID], 
    
    [Extent1].[CategoryID] AS [CategoryID], 
    
    [Extent1].[QuantityPerUnit] AS [QuantityPerUnit], 
    
    [Extent1].[UnitPrice] AS [UnitPrice], 
    
    [Extent1].[UnitsInStock] AS [UnitsInStock], 
    
    [Extent1].[UnitsOnOrder] AS [UnitsOnOrder], 
    
    [Extent1].[ReorderLevel] AS [ReorderLevel], 
    
    [Extent1].[Discontinued] AS [Discontinued]
    
    FROM [dbo].[Products] AS [Extent1]
    
    WHERE [Extent1].[ProductName] LIKE N'%CH%'
    
    ORDER BY [Extent1].[ProductID] ASC
    

    而當資料庫使用 Oracle 時,LINQ Query 的操作還是使用「Contains」,但有些地方還是不同的。

     

    2012年3月28日 星期三

    Dynamic LINQ + Entity Framework - Part.2:Dynamic Expression API (NuGet)


    上一篇「Dynamic LINQ + Entity Framework - Part.1:MS SQL Server, LINQPad」我們說到了可以將 VS2010 Sample Code 的 DynamicQuery 加入到專案中,

    讓我們的專案可以使用字串的方式讓原本強型別的 LINQ Query 能夠動態組合,用比較方便、簡單的方式來解決動態柴詢條件的需求,

    必須要先說明的是,這樣的動態查詢就失去了在設計階段時的強制檢查,當動態組成的查詢條件有錯誤時,就必須等到執行階段才會知道,在專案建置時是無法發現到錯誤,

    所以在專案中使用 LINQ DynamicQuery 時必須要小心,不要因為可以動態的組合查詢而讓各種可能發生錯誤的可能因素到處流竄,

    盡可能限縮組合動態查詢的條件,例如物件屬性(對應到資料庫表格的欄位)就盡可能使用列舉的方式,讓程式開發人員只能使用物件中的屬性名稱,另外輸入的條件值也必須要做點安全性的防護,

    前面幾項說明是提醒各位使用 DynamicQuery 時所要注意的地方。

    前一篇所使用的是 VS2010 的 C# 4.0 Sample Code,所以對於仍使用 .Net 3.5 的專案就必須要另外去使用 VS2008 Sample Code 來建立 for .Net 3.5 的 DynamicQuery 類別庫專案,

    如果你不想自己去建立 DynamicQuery 類別庫專案的話,開發環境是在 VS2010,不管專案是用 .NET 4.0 或 .NET 3.5,

    都可以從 NuGet Gallery 中去把 DynamicQuery 給加入到專案中。

     

    2012年3月27日 星期二

    解決 Visual Studio 2010 出現的「未正確載入套件”VSTS for Database Professionals Sql Server Data-tier Application”」問題


    近來在開啟 Visual Studio 2010 時都會出現這個視窗,而且都會出現好幾次,

    SNAGHTML29e85c

    之前因為不會妨礙到 Visual Studio 2010 正常的執行功能,而且也只有在開啟 VS2010 時才會出現,所以我就一直忽略這個錯誤訊息,

    然而今天突然覺得這個錯誤訊總是出現還真的讓我蠻刺眼的,所以當下就來解決這個問題…

    2012年3月26日 星期一

    Dynamic LINQ + Entity Framework - Part.1:MS SQL Server, LINQPad


    是的,動態LINQ查詢,這並不是一個新的LINQ查詢方式,早在 2008年1月7日時 Scott Guthrie 就已經介紹過了,

    ScottGu’s Blog - Dynamic LINQ (Part 1: Using the LINQ Dynamic Query Library)

    當時候是因應 VS2008 以及 .NET Framework 3.5 的 Release 而出現,那時候大家還正在摸索如何應用 LINQ,

    雖然說現在大部分的專案中都會採用 LINQ to SQL or ADO.NET EF Framework,

    使用並且操作強型別的資料集合對於設計階段有很大的幫助,

    但是使用者的需求是千變萬化,永遠不可能照著系統規格走,甚至永遠都會有萬惡的「需求修改」出現,

    這時候不論你用的技術如何強大或是功力多麼高深,永遠是無法戰勝客戶的需求以及老闆的壓力……

    離題了…

    對於動態查詢的功能,程式設計師使用組 SQL Command 查詢字串的方式是可以讓客戶的無限想像變換為可能,

    但是到了使用LINQ查詢,好像一切都變得好複雜……

    2012年3月14日 星期三

    Sublime Text 2 - 好用的前端程式編輯器 Part.8 - 手動安裝Package



    昨天有人在「Sublime Text 2 - 好用的前端程式編輯器 Part.6 另一種對齊的Package Abacus」提出了問題,

    image

    之前的Package安裝都是透過「Package Control」來進行,如果說要手動安裝Package的話,要如何操作呢?

    這在之前的文章裡面都未曾提及,而這一篇就會針對這個問題來進行手動安裝Package操作說明,

    而手動安裝的Package則選擇「BracketHighlighter」,這是一個可以讓括號高亮顯示的實用小套件,

    在文末也會有手動安裝Package的操作視訊畫面,讓各位可以更加清楚了解整個操作的流程。


    2012年3月13日 星期二

    Sublime Text 2 - 好用的前端程式編輯器 Part.7 - Goto … 操作說明 + Goto Symbol


    使用Sublime2編輯文件的時候,會希望有以下的操作功能:

    • 能夠更加快速且方便地在文件之間跳轉
    • 能夠很快地在文件中找到定義的符號(曾經使用了那些變數名稱,卻一時之間無法很快找到時)
    • 可以快速的移動到文件中指定的行數
    • 能夠列出程式文件中的function,並且快速移到function的位置
    • 在程式文件可以快速移到目前使用function的位置(前項仍須透過Command Palette,而此項就是直接跳到function)

    前面四項的功能要求,其實可以透過Sublime2既有的「Goto …」功能來達成,而最後一項功能需求就必須透過安裝Package「Goto Symbol」來達成囉,接下來的內容就會介紹如何操作這些功能需求。

    2012年3月12日 星期一

    ASP.NET MVC 3 分頁 - 使用jQuery.Templates + MvcSimplePostPager


    上一篇文章「ASP.NET MVC 3 分頁 - 使用jQuery.Templates + jQuery Pagination Plugin」裡,

    我們使用了「jQuery Pagination Plugin」這個jQuery Plugin來做為前端頁面Pager的解決方案,

    然而這個 Pager 所提供的UI介面是有些陽春,

    image

    假如想要增加一些資料在上面讓使用者可以得到更多資訊的話,就要去更改「jquery.pagination.js」程式內容,

    但其實在之前介紹「資料分頁」的時候,我們就已經建立了 MvcSimplePager 與 MvcSimplePostPager ,

    這兩種Pager就已經提供了相當充足的分頁資訊,

    接下來就會介紹如何以前端的jQuery Ajax的方式與jQuery Templates來完成分頁的需求功能。

     

    2012年3月10日 星期六

    ASP.NET MVC 3 分頁 - 使用jQuery.Templates + jQuery Pagination Plugin


    上一篇「ASP.NET MVC 3 資料套用範本 - 使用jQuery.Templates」介紹了如何在ASP.NET MVC 3中使用jQuery.Templates,

    而本部落格也有一系列的分頁文章「資料分頁」,所以這一次就來介紹如何在ASP.NET MVC 3中使用jQuery.Templates完成分頁的功能,

    其實要取得分頁的資料來源是比較容易的,只要在後端處理好每次要取得分頁的資料量與資料內就可以,

    之前一系列「資料分頁」的文章中,我有建立了一個有關生成Pager的HtmlHelper,

    而每一次的分頁不管是GET方式還是POST,從前端傳送需求到後端,後端會連同Pager的內容也一併生成且送回到前端顯示,

    因為我們使用jQuery.Templates所使用的資料是JSON,只會是包含分頁資料本身,也就是說頁面上的Pager我們要在前端處理,

    本篇文章將會在前端使用「jQuery Pagination Plugin」來做為前端的Pager,以作為我們前端分頁操作介面的解決方案。

    2012年3月9日 星期五

    ASP.NET MVC 3 資料套用範本 - 使用jQuery.Templates


    在ASP.NET MVC中想要使用AJAX來顯示一個頁面中某部分資料時,此情境下大部分都會使用PartialView的方式,

    而這個類似的作法也曾經在之前的文章有介紹過:

    ASP.NET MVC - 資料分頁(4) MvcSimplePostPager + AJAX

    雖然那一篇文章內容是用ASP.NET MVC 2來開發,不過分頁內容的顯示就是使用PartialView(部分檢視)方式,

    讓每一個分頁資料的顯示是用jQuery以及AJAX的方式向後端取得該分頁的內容。

     

    然而有的時候我們取得的資料並不會直接給我們一個已經Render好的部分頁面內容,例如:JSON,

    這個時候就必須在前端頁面中以JavaScript程式來套用JSON資料然後顯示在頁面上,

    在之前的專案中就會看到專案其他成員處理這個部分時會在JavaScript程式中去組HTML碼,

    常常一個不小心把HTML碼給組錯,或是同樣一段HTML碼會重複的出現在JavaScript的程式當中,

    當時看到就覺得這樣的方式蠻不好的,而希望把另一種方式介紹給當時的專案成員來使用,

    不過成員對於JavaScript或是jQuery的熟練程度不一,無法讓他們一體適用這種方法,在當時覺得蠻可惜的。

     

    當時想要介紹的方法就是在JavaScript中使用範本(jQuery.Templates)的方式,

    把動態取得的資料套用在事先組織好的HTML範本,然後再Render到頁面上顯示,

    這篇文章接下來就會來演練這方式。

    2012年3月3日 星期六

    Sublime Text 2 - 好用的前端程式編輯器 Part.6 另一種對齊的Package Abacus


    上一篇介紹的 Sublime Text 2 Package「Alignment」是最多人使用的對齊套件,然而也有另一個Package也是做同樣的操作功能,然而卻有一些的不同,所以這邊也同樣介紹給大家,

    image

     


    2012年3月2日 星期五

    Sublime Text 2 - 好用的前端程式編輯器 Part.5 使用Alignment對齊你的Code


    我還不算是個有嚴重程式碼潔癖的人,但至少程式碼看起不要太過於雜亂就好,

    但是在程式碼中看到一些亂亂的地方時,也還是會覺得礙眼…

    image

    如上圖的情況,如果這種沒有對齊的情況不是很多的情況下,很多人一定會選擇忽略,或是動手去調整一下,

    假如這個情況出現的越來越頻繁,或是沒有對齊的地方太多,久而久之就不會多花時間來整理。

    Sublime Text 2有個Package「Alignment」就可以幫我們解決這個問題,

    大部分介紹Sublime2的部落格文章也一定會提到這個Package,當然這裡也不免俗的也要來介紹啦。

    2012年2月29日 星期三

    ASP.NET MVC 3 使用新的專案樣板–MVC Themed App


    雖然說ASP.NET MVC 4會有新的專案預設樣版,不會再是千篇一律的藍色樣式,

    ASP.NET MVC 4 Overview - Part 2: Default template changes and Adaptive Rendering using Viewport and CSS Media Queries

    但是要等到ASP.NET MVC 4發佈也還需要一段時間,而平常專案開發的時候也不會是去使用預設的專案樣板,

    在做一些簡單的專案時,會想要花功夫找樣板套用的工程師應該是不多,

    我就是這樣的程式開發人員,對於預設樣板早就看到膩了,但是要花時間找一個免費的樣板來套用…想到就懶呀!

     

    前幾天在更新VS2010的Extensions的時候,閒來無事就盯著VS2010擴充管理員的線上圖庫,一頁一頁的看,

    看看是不是有新鮮的擴充可以裝來玩玩,因為主要是開發MVC專案,所以就下了關鍵字做搜尋,

    然後就看了一個不曾看過的新東西…

    SNAGHTML1b04523

    練習 jQuery的小工具–jQueryPad


    對於jQuery的初學者來說,常常會找不到一個合適的練習工具,我會建議初學者使用瀏覽器以及開發者工具,

    使用IE瀏覽器,「各主要瀏覽器的開發者工具( Developer Tool ) Part.2 - IE

    使用Google Chrome瀏覽器,「各主要瀏覽器的開發者工具( Developer Tool ) Part.4 - WebKit

    使用Firefox瀏覽器的話,也是可以使用內建的開發者工具,而且Firefox 10的開發者工具則是全新面貌,
    各主要瀏覽器的開發者工具( Developer Tool ) Part.1 - Firefox
    Firefox 10 新增了令人興奮的開發者工具
    Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視

    我心中最理想的jQuery Debug以及練習的工具組合則是:Firefox + Firebug,
    Firefox 開發前端語言時的偵錯工具 Firebug 以及好用的套件

    但是有的人會覺得,只是單純練習個jQuery的指令與操作應該不用大費周章的去搞這些吧?!

    尤其是沒有接觸過開發者工具的人,光是要認識如何使用就相當頭大了,

    所以可以退而求其次,可以使用「jQueryPad」來當做單純練習的工具。

    2012年2月25日 星期六

    Sublime Text 2 - 好用的前端程式編輯器 Part.4 更換主題(Theme)

    前面兩篇文章說明了 Sublime2 安裝以及 Pack Control 的安裝與使用,而這一篇則是要來介紹如何更換主題,雖然說這並不是什麼多重要的功能,也不會為往後的操作上能帶來多大的效益,但是如果能夠把一個會時常面對的工具讓它的外觀可以變得賞心悅目一些,我相信在使用上以及觀看上可以讓我們更加的順眼,你說是吧!?

    2012年2月22日 星期三

    ASP.NET MVC 擴充HtmlHelper 加入 CheckBoxList 功能 - 2


    距離之前那一篇「ASP.NET MVC 擴充HtmlHelper 加入 CheckBoxList 功能 - 1」都已經超過半年了,

    在那篇文章中我們實作出一個水平方向呈現的CheckBoxList,

    image

    有了水平方向呈現的方式,也應該要有垂直方向顯示的吧?!

    因為垂直方向的呈現在那時候於實作的過程中一直處於「卡關」的狀態,一直寫不出來,所以就一直Pending住,

    然而就在隔了這麼久之後終於讓我做出來了,也發現到,這垂直方向的呈現並不是那麼難做,

    也不需要去參考System.Web.UI.WebControls.RepeatInfoRenderVerticalRepeater」,

    總之就是幾個關鍵地方而已,所以就廢話少說,直接進入主題。

    2012年2月21日 星期二

    Sublime Text 2 - 好用的前端程式編輯器 Part.3 安裝Package Control

    Sublime Text 2(以後將會簡稱為 Sublime2)最大的一個特點就是可以安裝多種的 Package,而且 Packages 的種類相當多,有 PHP、Ruby、Java、JavaScript、jQuery 各種相關的 Packages,並不是每一種 Packages 都一定要安裝,當然是安裝對你開發上或是使用上有幫助的 Packages,相信我,這些 Packages 都可以大大地提昇開發與使用的效率,然而新安裝的 Sublime2 要安裝 Packages 是蠻不直覺的,雖然說 Sublime2 的安裝相當簡單,但是如果有一個功能可以簡化安裝步驟的話,將會讓我們使用 Sublime2 會更加隨心所欲。

    2012年2月19日 星期日

    Sublime Text 2 - 好用的前端程式編輯器 Part.2 安裝與簡單使用說明


    上次已經簡單的介紹了「Sublime Text 2」是個什麼樣的工具了,而這一篇將會介紹如何安裝,除了安裝軟體的本身之外,也會簡單的說明幾個使用上的技巧。

    內容概要:
    1. 安裝Sublime Text 2
    2. 使用Sublime Text 2的命令面板(Command Palette)
    3. 使用Console命令列
    4. 開啟/關閉側邊欄(Sider Bar)
    5. 文件切換
    6. 更換編輯顯示模式

     


    2012年2月13日 星期一

    ASP.NET MVC上傳檔案,使用file-uploader : 進階操作 Part.3


    這個系列的文章之前有介紹過了基本操作與幾種進階操作的使用方式,本篇文章將會介紹以下內容後來作為收尾,

  • 設定是否可以多選檔案上傳
  • 設定是否可以拖曳檔案?!
  • 修改拖曳時可以上傳一個檔案而不可上傳多個檔案


    P.S.
    1.後兩個項目的進階操作會去修改到file-uploader.js的原始檔。
    2.此三項功能的修改主要是針對非IE瀏覽器。

  • 2012年2月9日 星期四

    Sublime Text 2 - 好用的前端程式編輯器 Part.1 介紹


    這幾天都一邊看「30 Days to Learn jQuery」一邊重新複習 jQuery,看著教學影片時就有個地方讓我引起好奇,教學影片裡編輯 jQuery 環境是在一個叫做「Sublime Text 2」的 Editor 下,

    image

    這個編輯器看起來相當清爽,而且在編輯前端網頁 HTML 或是 jQuery 時都有提示與自動完成的功能,在 Windows 環境下一直無法找到好用的編輯器,而看到這個雖然是在 Mac 作業系統中執行的 Sublime Text 2,到 Google 搜尋「Sublime Text 2」,看到它也有提供 Windows 版本,於是在好奇的心態下就嘗試使用它,而慢慢摸索 Sublime Text 2 的功能後發現到,Sublime Text 2 對我來說是個相當好用以及方便的編輯器。

    2012年2月3日 星期五

    線上學習資源:30天學jQuery(30 Days to Learn jQuery)


    前幾天我有在Google +專頁上分享兩個線上學習jQuery的網站,

    jQuery Fundamentals
    http://jqfundamentals.com/book/index.html


    jQuery Essentials Slideshow, Version 2
    http://marcgrabanski.com/articles/jquery-essentials-slideshow

    這兩個線上學習的資源都相當不錯,對於初學者來說都可以從中學習到很好的基礎,

    很多人(包括我在內)明明知道有這麼好的學習資源,但如果稍微鬆懈或是事情一忙就會忘了這一回事,

    而最近在網路上看到很多朋友分享了一個線上學習jQuery的資源,所以就在這邊介紹給大家。

     

    2012年2月1日 星期三

    ASP.NET MVC上傳檔案,使用file-uploader : 進階操作 Part.2


    繼續進行 valums file-uploader 的進階操作說明,這一篇文章將會說明以下的內容:


  • 更改出現訊息的方式
  • 上傳時也同時傳送其他參數資料
  • 上傳時、上傳完成時的事件處理
  •  

    2012年1月31日 星期二

    ASP.NET MVC上傳檔案,使用file-uploader : 進階操作 Part.1


    上篇文章「ASP.NET MVC上傳檔案,使用file-uploader : 基本操作」已經簡單的介紹過如何使用file-uploader,

    接下來這篇文章將會介紹如何完成以下的進階操作項目:

    • 自定上傳檔案區塊的文字、上傳檔案清單的文字
    • 限制檔案的上傳大小
    • 限制上傳檔案的種類
    • 修改訊息內容

     

    2012年1月30日 星期一

    ASP.NET MVC上傳檔案,使用file-uploader : 基本操作


    網站專案大都會使用到上傳檔案的功能,而一般我們大多是直接使用form以及type為file的input element來完成,

    例如:

    @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { id="FormUpload", enctype = "multipart/form-data" }))
    {
        <p>
            Upload File:<input type="file" id="uploadFile" name="uploadFile" size="23" />
            <input type="button" id="ButtonUpload" value="Upload file" />
        </p>
    }

    這樣的作法是最基本也是最標準的作法,

    但是這樣的作法在每次送出檔案上傳到server端後,整個網頁都會Reoload,

    於是網路上就有很多AJAX的上傳檔案套件可以讓我們來使用,

    而這邊將會以一系列的文章來介紹如何在ASP.NET MVC的環境下使用「file-uploader」這個套件來製作檔案上傳的功能,

    2012年1月26日 星期四

    Oracle ODAC for Entity Framework + ASP.NET MVC 3 + MiniProfiler.MVC3


    觀察 Entity Framework 轉換所產出的 SQL Command」這一篇文章當中有簡單介紹了在Oracle ODAC For EF 的情境下如何觀察SQL Command,然而並不是每個方式都管用,而且有的方式會需要在偵錯模式下才能觀察(如使用Entity Visualizer),而之前也曾經介紹過一個可以用來偵測ASP.NET MVC執行效能的套件「MVC-Mini-Profiler」,這一個套件除了偵測執行效能外,有使用Entity Framework的話也可以偵測EF所產生的SQL Command,「ASP.NET MVC 3 + MiniProfiler.MVC3 偵測執行效能」文章裡所使用的資料庫是MS SQL Server,而當資料庫改使用Oracle而EF Provider也使用了Oracle ODAC for EF呢?

    這一篇文章就來看看在使用Oracle ODAC for EF的情境下使用MVC-Mini Profiler是否可以偵測到EF所產生的SQL Command。


    2012年1月22日 星期日

    圖片裁剪大頭貼功能 - ASP.NET (MVC, WebForm) + jQuery + imgAreaSelect 原始檔


    之前兩篇文章的簡略說明,我想應該還是有很多人會不了解,我會建議各位不管你是習慣用WebForm開發還是使用MVC開發,最重要的就是要實際的操作一次,經由實作的過程逐一的去排除遇到的各種問題,經由這樣的過程所學習到的經驗是最實際也最為深刻。

    這一篇文章除了說將原始檔分享出來之外,也順便說明一下如何去將網站專案去抽出共用的部份而另外獨立為一個類別庫專案,雖然說很多人還是習慣在開發網站專案的時候把各種的類別都混雜在同一個Project中,小型而且開發人數少的專案或許不會感覺到問題,一旦到了專案規模大了或是參與專案開發的人員一多,那麼把所有類別或是邏輯處理都放在同一個網站專案中的作法就會遇到問題。

    以下的文章內容就會說明如何去抽出各個層級的類別為不同的類別庫專案。


    2012年1月21日 星期六

    圖片裁剪大頭貼功能 - ASP.NET WebForm + jQuery + imgAreaSelect


    前一篇文章「圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect」是說明在ASP.NET MVC架構下去使用 imgAreaSelect 來達成裁剪圖片的功能需求,而其實客戶的專案架構是使用ASP.NET WebForm,而這篇文章就來說明如何在ASP.NET WebForm架構下使用 imgAreaSelect。


    2012年1月19日 星期四

    圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect


    最近專案上客戶提出一個需求,希望做個類似facebook大頭貼的功能,而且操作功能要很簡單而且不要太繁瑣,

    這一類的功能其實也真的不是很難,簡單的說明一下需求內容:

    • 上傳圖片,上傳後判斷是否要使用這張圖片
    • 儲存上傳圖片後,進行裁剪圖片,裁剪圖片不希望只能裁剪固定大小,可以有等比例裁剪的功能(大頭貼有定寬高,在原上傳圖片可以選取任一區域,於裁剪圖片後做等比例的縮圖)
    • 裁剪圖片時,希望可以即時預覽等比例縮圖的結果
    • 可以隨時對原上傳圖片做重新裁剪(原裁剪圖片可以不保留)

    大部分的開發人員在網路上找這一類的jQuery功能套件時,多會採用「jCrop」,這是一個不錯且相當好用的jQuery Plugin,

    不過我卻是採用另一套也是不錯的jQuery Plugin「imgAreaSelect」,使用方式與 jCrop 相差不大,

    另外原專案是使用ASP.NE WebForm開發,而本篇文章內容將會是以ASP.NET MVC的架構下來做說明,

    而在下一篇文章也會說明如何在ASP.NET WebForm中開發這個功能,讓大家可以看看兩個架構下的開發會有什麼樣的差異。

    2012年1月6日 星期五

    觀察 Entity Framework 轉換所產出的 SQL Command

    在前一篇文章「LINQPad + Oracle ODAC for Entity Framework」介紹了可以藉由LINQPad載入專案組件後就可以在LINQPad中操作LINQ Query,以達到程式實作前的測試操作,如果專案所使用的資料庫是 MS SQL Server 的話,在LINQPad中可以直接觀察EF所產出的 SQL Command,但要是專案所使用的資料庫是 Oracle,那麼在LINQPad就無法看到EF所產出的SQL Command,這種情況下就必須要回到Visual Studio中於偵錯模式下進行EF產出SQL Command 的觀察了,所以在本篇文章中將會說明幾種在Visual Studio的偵錯模式下觀察由Entity Framework所產出的SQL Command。

    註:本篇將會著重於 Oracle ODAC for Entity Framework 情境下的解決方式,而有關使用 MS SQL Server 的專案,可以參考以下文章:

    Jerry - 我的Coding :查看LINQ Expression編譯後的SQL語法

     


    2012年1月5日 星期四

    LINQPad + Oracle ODAC for Entity Framework

    如何在 LINQPad 載入使用 Oracle ODAC for Entity Framework 開發的專案組件來執行查詢。

    我在這個部落格的很多文章都會使用LINQPad來做操作說明,尤其是Entity Framework的相關文章,

    例如:

    Oracle ODAC 11.2 Release 4 (11.2.0.3.0) - Includes support for Entity Framework and LINQ

    Oracle ODAC for Entity Framework 關連資料查詢的幾種不同方式

    在文章中都主要是用LINQPad來操作以及說明,並且建議大家能夠使用LINQPad來做程式實作前的測試操作,但是很多人都反應說,他們不清楚要怎麼在LINQPad去加入已開發專案的專案組件然後使用,所以這一篇文章就來做個說明,讓大家了解如何在LINQPad中去加入已開發專案的專案組件然後進行各種的LINQ操作。

    P.S.

    而專案的實體資料模型的資料來源如果是使用MS SQL Server,也是同樣的操作模式,也是可以參考此篇文章的作法。


    2012年1月2日 星期一

    Oracle ODAC for Entity Framework 關連資料查詢的幾種不同方式

    前篇文章「ODAC 11.2 Release 4 (11.2.0.3.0) - Includes support for Entity Framework and LINQ」,在文末的「其他的查詢運算操作」有介紹使用「join + group」的方式來查詢關連資料,而另外也測試了幾種不同的查詢方式,在本篇文章就來看看這幾種不同的查詢方式。



    2012年1月1日 星期日

    Oracle ODAC 11.2 Release 4 (11.2.0.3.0) - Includes support for Entity Framework and LINQ

    Oracle在 2011-12-28 發佈了最新一版的 ODAC with Oracle Developer Tools for Visual Studio,

    image

    ODAC 11.2 Release 3 與 ODAC 11.2 Release 4 更新相隔了一年,而這一次讓我注意到的是 ODAC 11.2 Release 4(11.2.0.3.0) 包含了對 Entity Framework 的支援,也就是說原本還在 BETA 3 的ODAC for MS Entity Framework and LINQ to Entities 已經納入正式版了,所以有使用到 Oracle 資料庫開發的專案,想要在專案中使用Entity Framework技術是已經有 Oracle 所發佈的正式支援,然而在之前文章「ASP.NET MVC + Oracle 11g XE + Entity Framework. Part 4」最後所提到的問題是否在這個版本有獲得解決呢?

    在本篇文章我們就來仔細的瞧瞧!

    提醒

    千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。