[.Net Tool] 使用bootstrap-multiselect實作帶checkbox與optGroup的DropDownList(使用ajax with json或model binding)

說明：
下拉式選單(DropDownList)是網頁常見的元素(element)，
如果要做出帶有群組(optGroup)，且項目前都有核取方塊(checkbox)，如下圖：

該怎麼做呢?


這裡使用bootstrap-multiselect套件，使用BSD 3-Clause License，
商業使用須加上作者的版權聲明。

本例資料來源從Localdb產生，table為Country，如下圖：

並將資料整理成bootstrap-multiselect需要之格式，
如：
var data = [{
    label: 'America',
    children: [{ label: 'Canada', value: '2042101B-A6AF-4603-B04A-10D9257821CD' },
                    { label: 'American', value: '7E35A8AC-D415-4ED3-B572-725ACF7074FB' }]
    }, {
    label: 'Asia',
    children: [{ label: 'Taiwan, ROC', value: 'EB9A0E48-A541-430B-AAEA-C85D98DBA384' },
                    { label: 'Singapore', value: '0A5D7D14-9698-4AAA-B3F6-586EED21D0CD' }]
}];


定義GetAll方法來做這件事：

以下兩張圖是自訂的類別(轉換成Json用)

Controller部分，其中LoadAllCountries取得CountryService中的GetAll，
Update則是取得選擇的country Ids：

View部分，使用jQuery.ajax取得下拉式選單的資料，
使用form表單post選擇的country Ids：

呈現結果：

 

送出表單後，可取得多選的Ids：

to be continued...