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」來做介紹。

 


想要了解 Visual Studio 2013 Update 3 RC 有些什麼樣的內容,可以看看 Channel 9 的影片介紹:
Visual Studio 2013 Update 3 RC | Visual Studio Toolbox

 

ASP.NET MVC 5.1.2 以前的作法

以往如果要在 ASP.NET MVC (不要問我 WebForm 裡面要怎麼做) 做一個含有 optgroup 標籤的下拉選單,的確是蠻麻煩的,還不知道什麼是 optgroup 的朋友,可以參考以下的連結:

HTML/Elements/optgroup - W3C Wiki

HTML Tag: optgroup

HTML <optgroup> 标签

在 ASP.NET MVC 有很多種作法能夠達成,例如以下這一篇的作法:
Radu Enuca's Blog - ASP.NET MVC – Extending the DropDownList to show the items grouped by a category

我想應該有些人大致看過一遍之後就會自動跳過,其實也是可以另外從 View 去用迴圈加上組 Html Tag 的方式來完成,雖然這樣的作法雖然可以達到需求,但是並不是很聰明的作法,而且重用性不好,於是有人就做成了套件,然後放上 Nuget,我們只要從 Nuget 上面安裝這個套件在專案裡,一樣可以完成這個需求。

開發環境:Visual Studio 2013 Update 2, LocalDB
專案:ASP.NET MVC 5.1.2, Entity Framework 6.1.1

首先,我有一份這樣的資料「台灣鄉鎮市區郵遞區號」,我們要用這一份資料來完成有 optgroup 的下拉選單,在下拉選單裡顯示全部的鄉鎮市區與郵遞區號,然後 optgroup 就是使用各個縣市來做顯示,

image

接著在專案裡開啟 Nuget,安裝「DropDownList.Optgroup.MVC」,或是透過 Console 下指令「Install-Package DropDownList.Optgroup.MVC」來安裝,

image

NuGet Gallery | DropDownList Optgroup MVC 1.0.0
https://www.nuget.org/packages/DropDownList.Optgroup.MVC/

image

Controller

image

View

這邊要注意,是使用「DropDownGroupList」而不是「DropDownList」

image

執行結果

image

image

 

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

是的,在這一次的 ASP.NET MVC 5.2 更新裡有多了這樣新增的功能,我們就不用在另外安裝套件就可以完成需求,

https://aspnetwebstack.codeplex.com/workitem/1486

開發環境:Visual Studio 2013 Update 2, LocalDB
專案:ASP.NET MVC 5.2, Entity Framework 6.1.1

開啟一個新的專案之後,透過 NuGet 將專案從 MVC 5.1.2 更新為 MVC 5.2

image

image

image

Controller

在 Controller 裡的程式與前面的程式作法差不多,不過這邊用的是內建的 SelectList 類別,你應該有發現到不一樣的地方,在後面多載的方法有多了 dataGroupField 還有 disabledGroup 的參數欄位,

image

image

 

View

這邊使用的是「DropDownList」,使用方式沒有任何改變,

image

執行結果

image

image

 


大致的使用操作情況就是這樣,如果說有關於 ASP.NET MVC 5.2 對於 DropDownList 使用 optgroup 還有什麼比較需要的地方,其實是有的,那些比較特殊的就在下一篇文章來做介紹。

P.S.
老實說,我比較喜歡「DropDownList.Optgroup.MVC」這套件的作法。

 

別忘了還有第二篇,其實第二篇才是重點喔

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

 

參考連結

ASP.NET MVC 5.2 / Web API 2.2 / Web Pages 3.2 がリリースされました - しばやん雑記

What’s New in ASP.NET MVC 5.2 | The ASP.NET Site

GitHub: aspnetwebstack/src/System.Web.Mvc/SelectList.cs at master · ASP-NET-MVC/aspnetwebstack

 

以上

沒有留言:

張貼留言

提醒

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