顯示具有 DropDownList 標籤的文章。 顯示所有文章
顯示具有 DropDownList 標籤的文章。 顯示所有文章

2015年6月14日 星期日

ASP.NET MVC DropDownList 範例 @ GitHub

這個部落格裡有關 DropDownList 的文章就寫了相當多,也因為這樣每天就可以看到有很多的流量都是來看這些相關文章,不過因為 DropDownList 的文章在每個不同的時期都有寫,有些文章會有提供比較完整的範例,而有些只有提供部分的內容,於是就乾脆把這些文章裡所提到的內容與程式都做了整理,然後把這些文章的範例程式都集中在一起然後放到 Github 上,讓大家可以方便去做瞭解。

這些範例程式有些部分是去年(2014) SkillTree 的 ASP.NET MVC 5 實戰營課程裡的範例,但不盡然全部相同,有做了部分的修改,這些大概只有佔 50% 左右,而另外則是重新部落格文章的範例程式。

 


2014年9月15日 星期一

ASP.NET MVC - 下拉選單的日期選擇器 @ GitHub

之前發了一連串的系列文章,雖然不是多麼厲害或是精要的內容,我還是希望大家能夠藉由這些文章來瞭解如何使用 Editor Templates 以及 Data Annotation 的應用,讓初學者或是不瞭解而亂做的人可以擺脫過往所慣用的拼裝做法,雖然如此,但是在部落格文章的瀏覽數量來看,我相當不解為何頭尾兩篇的瀏覽次數會那麼地多,而中間真正重點的 Editor Templates 的瀏覽次數卻是與頭尾兩篇不成比例的低呀,不知道是不是大家都已經知道做法,還是大家根本不想知道,因為第七篇「Validation」的內容要是沒有三四五篇的基礎也是做不出東西呀,讓我對大家瀏覽文章的行為實在是完全搞不懂呀。

我已經將這系列文章裡所使用的範例程式碼放到 GitHub 上面了,想要瞭解的朋友可以到 GitHub Repository 去瀏覽原始碼或是下載程式。

 


2014年9月5日 星期五

ASP.NET MVC - 下拉選單的日期選擇器 - 年齡限制

前面七篇有關 ASP.NET MVC 的下拉選單日期選擇器已經完成了基本的功能,而現在這邊要講的是比較進階一些而且也算是另外附加的功能,有些線上的服務在做申請的時候會有年齡的限制,例如限制需要在 18 歲以上、18 ~ 65 歲之間或是不能超過 70 歲等等,ASP.NET MVC 裡的 DataAnnotation 有提供一個 RangeAttribute 類別,不過 Range 主要是針對數值型資料來進行驗證,無法針對輸入的日期資料進行驗證,所以這邊就必須要另外自行去建立一個新的 Validation Attribute 類別。

這一篇就要來說明如何讓已經完成的下拉選單日期選擇器再增加年齡限制的驗證,雖然說是年齡限制,不過也可以應用在年資、使用年限等資料的驗證。

 


2014年8月18日 星期一

ASP.NET MVC - 下拉選單的日期選擇器 Part.7 - Validation

前面有關下拉選單日期選擇器都講得差不多,該注意的地方甚至於不該講的都講了,但還是有個部分沒有提到,那就是資料驗證的部分,ASP.NET MVC 其中的一個特點就是資料驗證,從後端到前端的部分都有提供了功能與支援,尤其是前端與 jQuery Validation 的整合,我們在模型類別裡加註適當資料驗證的 Attribute,在前端的表單輸入就能夠做到資料驗證與錯誤訊息的顯示。

而我們到目前為止已經完成的 DateDropDownList 在資料驗證上還有什麼需要注意以及需要修改的地方呢?就看這一篇的說明。

 


2014年8月17日 星期日

ASP.NET MVC - 下拉選單的日期選擇器 Part.6 - @helper ?

前面有用了三篇在說明將下拉選單日期選擇器建立為 Editor Templates,在 ASP.NET MVC 的開發時可以有很大的彈性,不過呢…… 我卻是很少看到有人在專案裡使用,尤其是獨自學習或是在短時間囫圇吞棗般的硬學 ASP.NET MVC 的朋友。有些朋友對於 ASP.NET MVC 的學習態度是很嚴謹,但也有一些朋友會認為學習 ASP.NET MVC 不需要多久的時間,甚至有人還說出只需要兩小時的說法,學習態度嚴謹的朋友在學習上就會追根究柢、鉅細靡遺,而沒有花時間、下功夫學習的人,就只會看到 ASP.NET MVC 的皮毛而已。

而 @helper (razor helper)是個相當方便的功能,可以提供很多靈活與彈性的操作,但是好用的功能也應該用在適當的情境與場合,但如果是將這個下拉選單日期選擇器改用 razor helper 的方式來建立與使用呢?

 


2014年8月16日 星期六

ASP.NET MVC - 下拉選單的日期選擇器 Part.5 - Editor Templates

前一篇已經將一個相當陽春而且設定也不方便的 DateDropDownList 做了修改,在 Html Helper 裡透過 addtionalViewData 傳遞 DateDropDownList 的前端設定資料,如此一來在任何頁面裡都可以依據各自的需求用設定的方式來決定下拉選單日期選擇器的顯示內容。

不過前一篇的最後也提出了一個會遇到的情境,那就是假如網站裡所使用的下拉選單日期選擇器所顯示的樣式都是固定的,那麼是不是就要在每個有使用到的頁面裡,在 Html Helper 都要去加入 addtionalViewData 的設定呢?又或者就乾脆放棄 Part.4 的方法而直接使用 Part.3 的方法,然後再去 site.js 裡面直接去增加各種不同使用情境的顯示設定。

其實每一種作法都是可行的,不管是麻煩的、強調彈性的或是只想要簡單的,每種作法都有其適合的情境,不過還是強調一點,盡可能去尋找出最大的可能性,總是會有方法的。

 


2014年8月15日 星期五

ASP.NET MVC - 下拉選單的日期選擇器 Part.4 - Editor Templates

上一篇已經說明將下拉選單日期選擇器給做成 Editor Templates 的方式在 ASP.NET MVC 裡使用,但是上一篇所說明的只是基本的應用,所以有很多地方缺乏了彈性,在實際專案的應用將會有很多的困難,於是這一篇我們繼續將這個下拉選單日期選擇器的 Editor Templates 給加以改善。

 


2014年8月14日 星期四

ASP.NET MVC - 下拉選單的日期選擇器 Part.3 - Editor Templates

第一篇「ASP.NET MVC - 下拉選單的日期選擇器 Part.1」建立了由前端處理的下拉選單日期產生器,說明了基本的使用與可以顯示民國年以及其他一些的設定。

第二篇「ASP.NET MVC - 下拉選單的日期選擇器 Part.2」則是進一步說明如何在 ASP.NET MVC 網站裡做整合使用,除了一般的建立表單裡的使用,也有說明如何在編輯表單裡設定既有的日期讓下拉選單日期選擇器去做顯示。

這一篇就來說明怎麼將這個下拉選單日期選擇器改為 Editor Templates 來使用,在 ASP.NET MVC 的開發裡,使用 Editor Templates 會有很大的彈性與可維護性,與第二篇所採用頁面裡「組裝」的方式相比之下,我會建議各位使用 Editor Templates,就來看看要如何製作這個下拉選單日期選擇器的 Editor Templates。

 


2014年8月13日 星期三

ASP.NET MVC - 下拉選單的日期選擇器 Part.2

上一篇「ASP.NET MVC - 下拉選單的日期選擇器 Part.1」裡已經完成了前端功能,並且也可以正常的運作,如果要把這個下拉選單的日期選擇器與 ASP.NET MVC 做整合使用的話,有很多種方式可以達成,這一篇就先來說明基本的使用方式。


2014年8月12日 星期二

ASP.NET MVC - 下拉選單的日期選擇器 Part.1

以往都會一直強調在表單的日期輸入應該要使用日期選擇器(DatePicker),而避免直接使用一般的文字輸入框來讓使用者直接輸入日期,為了要避免輸入格式的紊亂之外,最重要的還是要確保使用者所輸入的日期是正確的,例如現在常常會看到許多人使用的「bootstrap-datepicker」,或者是在以前有曾經介紹過的「My97 DatePicker」,雖然說 Chrome 有支援 HTML 5 的日期格式,讓使用者輸入日期時就有 DatePicker 可以讓使用者使用,不過目前大部分的瀏覽器還沒有提供支援。

image

如果客戶不希望使用 DatePicker ,而是想要使用下拉選單來選擇年月日的方式輸入日期的話,也是可以的,這並非難事,有些人會選擇自己做,而也有很多人會直接到網路上尋找是否有符合功能需求的現有 jQuery Plugins。

這篇就來說明如何在 ASP.NET MVC 的專案裡去使用下拉選單的日期選擇器,另外也可以將年份選則由西元年改以民國年來顯示。

 


2014年7月4日 星期五

ASP.NET MVC 5.2 New Feature - optgroup in DropDownList with SelectListItem

上一篇「ASP.NET MVC 5.2 New Feature - Support HTML optgroup in DropDownList」介紹在 ASP.NET MVC 5.2 所新增加的功能 optgroup in DropDownList,另外也介紹了怎麼在 ASP.NET MVC 5.1.2 版本的網站裡安裝套件的方式來完成 optgroup in DropDownList 的功能需求。

上一篇裡面是使用 SelectList 來做說明,但如果想要使用 SeletListItem 的話,應該怎麼做呢?這一篇就來告訴你(事情並沒有想像中的簡單哩)。

 


2014年7月3日 星期四

ASP.NET MVC 5.2 New Feature - Support HTML optgroup in DropDownList

ASP.NET MVC 5.2 在日前 ( 2014-07-02 ) 已經正式發佈,現在的更新頻率已經是越來越頻繁,經過這兩年更新的狀況之後,相信各位應該已經習慣並且熟悉這樣的更新頻率,現在的更新已經不是四五年前那樣要隔個一年或是更久才會有一次的更新,現在的更新大概每幾個月就會有一次,連 Visual Studio 2013 的 Update 3 都已經 RC 囉,相信 Update 3 的 Release 應該是快了。

我不想對每個更新或是新增的功能來做說明,詳細的內容可以查看官網的文章內容:
What's New in ASP.NET MVC 5.2 | The ASP.NET Site
What's New in ASP.NET Web API 2.2 | The ASP.NET Site
What's New in ASP.NET Web Pages 3.2 | The ASP.NET Site

這一篇文章將會針對這次 MVC 5.2 的更新「Support HTML optgroup in DropDownList」來做介紹。

 


2013年9月23日 星期一

ASP.NET MVC 建立可重複使用的縣市鄉鎮市區連動下拉選單 (Reuseable Cascade DropDownList)

這個部落格裡,光是連動下拉選單為主題的文章我就寫了好幾篇,如下:

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

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

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

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

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

其實連動下拉選單的功能並不難做,當頁面上需要有連動下拉選單功能時,都需要再去動手做,從頁面、Javascript 程式以及後端程式,一次兩次的需求的話是還好,不會太麻煩,但是有很多頁面都需要做連動下拉選單的時候,就會覺得很麻煩了,最常見的就是「縣市鄉鎮市區連動下拉選單」,尤其是當有一堆表單或是同一個頁面上有很多個別欄位都需要縣市與鄉鎮市區資料的時候。

所以這邊就使用 ASP.NET MVC 的 Partial View 把縣市鄉鎮市區連動下拉選單的做成可以重複使用,而且可以應付同一個頁面有多組資料都需要縣市、鄉鎮市區連動下拉選單的需求。

P.S. 此功能是顯示台灣的縣市與鄉鎮市區資料。

 


2013年9月15日 星期日

當 ASP.NET MVC 的 DropDownList 遇到了 ViewData or ViewBag

這個部落格有關 DropDownList 的文章有 10 篇,而主要在講解 DropDownList HtmlHelper 有以下兩篇:

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

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

另外進階一點的有:

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

不過還是時常會遇到有人在問 ASP.NET MVC DropDownList 怎麼設定以及卡關的問題,而這些問題中就屬有關 ViewData or ViewBag 的最多,甚至於有很多遇到問題的人會視為 Bug 或是列為絕對不能用的作法。其實這都是沒有詳細去追查原因的擅自定論,如果花點時間去追查一下 ASP.NET MVC 的原始碼就會知道原因,而且也會知道怎麼去正確的設定 DropDownList。

 


2013年2月18日 星期一

DropDownList DataAnnotation 於 MVC 3, MVC 4 的差異狀況

這篇是記錄一下在之前某一次 twMVC 週四固定聚會時有一位朋友所提出問題的解決方式,這一個問題其實不難,只因為是 MVC 3, MVC 4 兩個版本不同而造成的差異狀況,最根本的解決方式就是改用 MVC 4 來做網站,而如果無法升級為 MVC 4 的話,那就使用我的土砲方式也是可以的。

狀況:一個簡單的類別,各屬性都有標註 DataAnnotation Validation 標籤,其中一個屬性在前端會以下拉選單方式呈現,所以當前端的下拉選單沒有選值時就會顯示驗證訊息:如果把這個簡單類別包裝在一個 ViewModel 類別中,那麼在 MVC 3 專案中,這個下拉選單的驗證就會失效,而 MVC 4 專案則是完全正常。

在 ASP.NET MVC 3 環境下:

image

在 ASP.NET MVC 4 環境下:

image

接下來就來看看這是怎麼一回事。


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年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年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 更新:文末附上範例程式檔案連結。

提醒

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