【ASP.NET MVC】【Razor】【VB】 Razor ~ ビュー・ヘルパー / サンプル編 [3] ~

はじめに

 ドロップダウンリストの optgroup を考える

 まず、実装が、ASP.NET MVCのバージョンによって異なる。

   * ASP.NET MVC 5.2以上 : SelectListGroupを利用
http://qiita.com/rryu/items/0fdfde55a62a44f0add0
http://www.buildinsider.net/web/bookaspmvc5/040206
   * ASP.NET MVC 4 : 以下で対応?
http://www.jquery2dotnet.com/2014/01/html5-dropdownlist-optgroup-tag-in-mvc.html

【1】サンプル (ASP.NET MVC 5.2版)

モデル

HelloModel.vb
Imports System.Web.Mvc

Namespace Models
    Public Class HelloModel
        Private Property _Car As CarCompany
        Private Property _CarSelectListItems As IEnumerable(Of SelectListItem)

        Public Property Car As CarCompany
            Get
                Return Me._Car
            End Get
            Set(ByVal value As CarCompany)
                Me._Car = value
            End Set
        End Property

        Public Property CarSelectListItems As IEnumerable(Of SelectListItem)
            Get
                Return Me._CarSelectListItems
            End Get
            Set(ByVal value As IEnumerable(Of SelectListItem))
                Me._CarSelectListItems = value
            End Set
        End Property

        Public Enum CarCompany
            None
            Toyota
            Honda
            VolksWagen
        End Enum
    End Class
End Namespace

コントローラ

HelloController.vb
Imports System.Web.Mvc
Imports WebAppli.Models
Imports WebAppli.Models.HelloModel

Namespace Controllers
    Public Class HelloController
        Inherits Controller

        ' GET: Sample
        Function Index() As ActionResult
            Dim model As HelloModel = New HelloModel()

            Dim groupJp As SelectListGroup = New SelectListGroup() With {.Name = "Japan"}
            Dim groupForeign As SelectListGroup = New SelectListGroup() With {.Name = "Foreign"}

            model.CarSelectListItems = New List(Of SelectListItem)(New SelectListItem() {
                New SelectListItem() With {.Value = CarCompany.Toyota, .Text = CarCompany.Toyota.ToString(), .Group = groupJp},
                New SelectListItem() With {.Value = CarCompany.Honda, .Text = CarCompany.Honda.ToString(), .Group = groupJp},
                New SelectListItem() With {.Value = CarCompany.VolksWagen, .Text = CarCompany.VolksWagen.ToString(), .Group = groupForeign}
            })

            Return View(model)
        End Function
    End Class
End Namespace

ビュー

Index.vbhtml
@ModelType WebAppli.Models.HelloModel

<h2>View</h2>

@Using (Html.BeginForm())
@Html.DropDownListFor(Function(model) model.Car, Model.CarSelectListItems)
End Using

【1】サンプル (ASP.NET MVC 4版)

 * 表示はできたが、Selected/Disabledが効かなかった

準備:環境設定

http://blogs.yahoo.co.jp/dk521123/35596847.html
で行ったNuGetでインストールする

[1] Visual Studio で [ツール]-[NuGetパッケージ マネージャー]-[パッケージ マネージャー コンソール]を選択
[2] コマンド「Install-Package DropDownList.Optgroup.MVC」入力する
https://www.nuget.org/packages/DropDownList.Optgroup.MVC/

出力結果

PM> Install-Package DropDownList.Optgroup.MVC
'.NETFramework,Version=v4.6' を対象とするプロジェクト 'WebAppli' に関して、パッケージ 'DropDownList.Optgroup.MVC.1.0.0' の依存関係情報の収集を試行しています
DependencyBehavior 'Lowest' でパッケージ 'DropDownList.Optgroup.MVC.1.0.0' の依存関係の解決を試行しています
パッケージ 'DropDownList.Optgroup.MVC.1.0.0' をインストールするアクションを解決しています
パッケージ 'DropDownList.Optgroup.MVC.1.0.0' をインストールするアクションが解決されました
パッケージ 'DropDownList.Optgroup.MVC.1.0.0' をフォルダー 'C:\XXX\Projects\WebAppli\packages' に追加しています
パッケージ 'DropDownList.Optgroup.MVC.1.0.0' をフォルダー 'C:\XXX\Projects\WebAppli\packages' に追加しました
パッケージ 'DropDownList.Optgroup.MVC.1.0.0' を 'packages.config' に追加しました
'DropDownList.Optgroup.MVC 1.0.0' が WebAppli に正常にインストールされました
PM> 

モデル

HelloModel.vb
Imports System.Web.Mvc

Namespace Models
    Public Class HelloModel
        Private Property _Car As CarCompany
        Private Property _CarSelectListItems As IEnumerable(Of GroupedSelectListItem)

        Public Property Car As CarCompany
            Get
                Return Me._Car
            End Get
            Set(ByVal value As CarCompany)
                Me._Car = value
            End Set
        End Property
        Public Property CarSelectListItems As IEnumerable(Of GroupedSelectListItem)
            Get
                Return Me._CarSelectListItems
            End Get
            Set(ByVal value As IEnumerable(Of GroupedSelectListItem))
                Me._CarSelectListItems = value
            End Set
        End Property

        Public Enum CarCompany
            None
            Toyota
            Honda
            VolksWagen
        End Enum
    End Class
End Namespace

コントローラ

HelloController.vb
Imports System.Web.Mvc
Imports WebAppli.Models
Imports WebAppli.Models.HelloModel

Namespace Controllers
    Public Class HelloController
        Inherits Controller

        ' GET: Sample
        Function Index() As ActionResult

            Dim model As HelloModel = New HelloModel()

            model.CarSelectListItems = New List(Of GroupedSelectListItem)(New GroupedSelectListItem() {
                New GroupedSelectListItem() With {.Value = CarCompany.Toyota, .Text = CarCompany.Toyota.ToString(), .GroupName = "Japan", .GroupKey = "1"},
                New GroupedSelectListItem() With {.Value = CarCompany.Honda, .Text = CarCompany.Honda.ToString(), .GroupName = "Japan", .GroupKey = "1", .Disabled = True},
                New GroupedSelectListItem() With {.Value = CarCompany.VolksWagen, .Text = CarCompany.VolksWagen.ToString(), .GroupName = "Foreign", .GroupKey = "2", .Selected = True}
            })

            Return View(model)
        End Function
    End Class
End Namespace

ビュー

Index.vbhtml
@ModelType WebAppli.Models.HelloModel
@Code
    ViewData("Title") = "View"
End Code

<h2>View</h2>

@Using (Html.BeginForm())
@Html.DropDownGroupListFor(Function(model) model.Car, Model.CarSelectListItems)
End Using


関連記事

Razor ~入門編~

http://blogs.yahoo.co.jp/dk521123/35586581.html

Razor ~ ビュー・ヘルパー / サンプル編 ~ [1]

http://blogs.yahoo.co.jp/dk521123/35592671.html

Razor ~ ビュー・ヘルパー / サンプル編 ~ [2]

http://blogs.yahoo.co.jp/dk521123/35591389.html

Razor ~ ビュー・ヘルパー / 構文編 ~

http://blogs.yahoo.co.jp/dk521123/35681489.html