VisualStuidioCommunity2015/Fw4.5.2/C#

前回に続いて基本的なHTMLヘルパーのうち、今回は下記のヘルパー見ていきます。

DropDownList/ DropDownListFor
ListBox / ListBoxFor
EnumDropDownListFor

入力要素のレンダリング

DropDownList/ DropDownListFor

まずはDropDownListです。

ドロップダウンリストの選択肢リストの作成にはIEnumerable<SelectListItem>を使用する方法とSelectListを使用する方法があります。
下記のサンプルはIEnumerable<SelectListItem>を使用した方法です。
選択肢の作成と同時に選択状態を表すselectedプロパティを指定します。
ビューで選択肢リストを作成していますが、コントローラーで作成しViewBag経由で引き渡してもいいですし、ビューモデル経由で引き渡してもいいです。

@{ 
    var items= new List<SelectListItem>()
        {
            new SelectListItem() {Value = "1", Text = "日曜日" },
            new SelectListItem() {Value = "2", Text = "月曜日" },
            new SelectListItem() {Value = "3", Text = "火曜日" , Selected = true},
            new SelectListItem() {Value = "4", Text = "水曜日" },
            new SelectListItem() {Value = "5", Text = "木曜日" },
            new SelectListItem() {Value = "6", Text = "金曜日" },
            new SelectListItem() {Value = "7", Text = "土曜日" },
        };
}
DropDownList:
@Html.DropDownList("DropDownListID", items)

DropDownList(selectListitem)の出力:
<select id="DropDownListID" name="DropDownListID">
<option value="1">日曜日</option>
<option value="2">月曜日</option>
<option selected="selected" value="3">火曜日</option>
<option value="4">水曜日</option>
<option value="5">木曜日</option>
<option value="6">金曜日</option>
<option value="7">土曜日</option>
</select>

次にSelectListを使用する方法です。
SelectListは1つの項目を選択できる一覧を表すクラスです。
IEnumerable<SelectListItem>を実装しています。

まず選択肢リストになるIEnumerableなリストを作成します。
そして選択肢リスト、選択値用フィールド名、表示用フィールド名、および選択値を指定して、SelectListインスタンスを作ります。
DropDownListメソッドには作成したSelectListを指定します。

@{

    var items = new List<KeyValuePair<string,string>>()
        {
            new KeyValuePair<string,string>("1", "日曜日"),
            new KeyValuePair<string,string>("2", "月曜日"),
            new KeyValuePair<string,string>("3", "火曜日"),
            new KeyValuePair<string,string>("4", "水曜日"),
            new KeyValuePair<string,string>("5", "木曜日"),
            new KeyValuePair<string,string>("6", "金曜日"),
            new KeyValuePair<string,string>("7", "土曜日"),
        };

    var list = new SelectList(items,    //選択肢リスト
                        "Key",          //Value値に指定するプロパティ名
                        "Value",        //Text値に指定するプロパティ名
                        "4");           //選択値
}
DropDownList(SelectList):
@Html.DropDownList("DropDownListID", list)

続いてDropDownListForです。
こちらはIEnumerable<SelectListItem>を使用しても、選択値はモデルから設定できます。

@{
    var items = new List<SelectListItem>()
        {
            new SelectListItem() {Value = "1", Text = "日曜日" },
            new SelectListItem() {Value = "2", Text = "月曜日" },
            new SelectListItem() {Value = "3", Text = "火曜日" },
            new SelectListItem() {Value = "4", Text = "水曜日" },
            new SelectListItem() {Value = "5", Text = "木曜日" },
            new SelectListItem() {Value = "6", Text = "金曜日" },
            new SelectListItem() {Value = "7", Text = "土曜日" },
        };
}
DropDownListFor:
@Html.DropDownListFor(mdl => mdl.DropDownValue, items)

SelectListを使用した方法です。

@{ 
    var items = new List<KeyValuePair<string, string>>()
            {
                new KeyValuePair<string,string>("1", "日曜日"),
                new KeyValuePair<string,string>("2", "月曜日"),
                new KeyValuePair<string,string>("3", "火曜日"),
                new KeyValuePair<string,string>("4", "水曜日"),
                new KeyValuePair<string,string>("5", "木曜日"),
                new KeyValuePair<string,string>("6", "金曜日"),
                new KeyValuePair<string,string>("7", "土曜日"),
            };

    var list = new SelectList(items,"Key","Value"); 
}
@Html.DropDownListFor(mdl => mdl.DropDownValue, list)

ListBox/ ListBoxFor

複数選択できるリストボックスです。
ドロップダウンリストの選択肢リストの作成にはIEnumerable<SelectListItem>を使用する方法とMultiSelectListを使用する方法があります。

まずはListBoxです。
下記のサンプルはIEnumerable<SelectListItem>を使用した方法です。

@{ 
    var items= new List<SelectListItem>()
        {
            new SelectListItem() {Value = "1", Text = "日曜日" },
            new SelectListItem() {Value = "2", Text = "月曜日" },
            new SelectListItem() {Value = "3", Text = "火曜日" , Selected = true},
            new SelectListItem() {Value = "4", Text = "水曜日" },
            new SelectListItem() {Value = "5", Text = "木曜日" },
            new SelectListItem() {Value = "6", Text = "金曜日" },
            new SelectListItem() {Value = "7", Text = "土曜日" , Selected = true},
        };
}
ListBox:
@Html.ListBox("ListBoxID", items)

ListBoxの出力:
<select id="ListBoxID" multiple="multiple" name="ListBoxID">
<option value="1">日曜日</option>
<option value="2">月曜日</option>
<option selected="selected" value="3">火曜日</option>
<option value="4">水曜日</option>
<option value="5">木曜日</option>
<option selected="selected" value="6">金曜日</option>
<option value="7">土曜日</option>
</select>

次にMultiSelectListを使用する方法です。
MultiSelectListは複数の項目を選択できる一覧を表すクラスです。
IEnumerable<SelectListItem>を実装しています。

{
    var items = new List<KeyValuePair<string, string>>()
        {
            new KeyValuePair<string,string>("1", "日曜日"),
            new KeyValuePair<string,string>("2", "月曜日"),
            new KeyValuePair<string,string>("3", "火曜日"),
            new KeyValuePair<string,string>("4", "水曜日"),
            new KeyValuePair<string,string>("5", "木曜日"),
            new KeyValuePair<string,string>("6", "金曜日"),
            new KeyValuePair<string,string>("7", "土曜日"),
        };
    var selectedItems = new String[] { "3", "6" };

    var list= new MultiSelectList (items, "Key", "Value", selectedItems);
}
ListBox:
@Html.ListBox("ListBoxID", list)

つづいてListBoxForです。
IEnumerable<SelectListItem>を使用する例です。
ビューモデル

public class HtmlHelperViewModels
{
    public string[] ListBoxValues { get; set; }
}

コントローラー

public class HtmlHelperController : Controller
{
    public ActionResult Index()
    {
        var mdl = new Models.HtmlHelperViewModels();
        mdl.ListBoxValues = new string[] { "3", "6" };
        return View(mdl);
    }
}

ビュー

@{
    var items = new List<SelectListItem>()
        {
            new SelectListItem() {Value = "1", Text = "日曜日" },
            new SelectListItem() {Value = "2", Text = "月曜日" },
            new SelectListItem() {Value = "3", Text = "火曜日" },
            new SelectListItem() {Value = "4", Text = "水曜日" },
            new SelectListItem() {Value = "5", Text = "木曜日" },
            new SelectListItem() {Value = "6", Text = "金曜日" },
            new SelectListItem() {Value = "7", Text = "土曜日" },
        };
}
ListBoxFor:
@Html.ListBoxFor(mdl => mdl.ListBoxValues, items)

次にMultiSelectListを使用する方法です。

@{
    var items = new List<KeyValuePair<string, string<<()
        {
            new KeyValuePair<string,string>("1", "日曜日"),
            new KeyValuePair<string,string>("2", "月曜日"),
            new KeyValuePair<string,string>("3", "火曜日"),
            new KeyValuePair<string,string>("4", "水曜日"),
            new KeyValuePair<string,string>("5", "木曜日"),
            new KeyValuePair<string,string>("6", "金曜日"),
            new KeyValuePair<string,string>("7", "土曜日"),
        };
    var selectedItems = new String[] { "3", "6" };
    var list = new MultiSelectList(items, "Key", "Value", selectedItems);
}
ListBoxFor(SelectList):
@Html.ListBoxFor(mdl => mdl.ListBoxValues , list)

EnumDropDownListFor

ASP.NET MVC 5.1 からは列挙帯からDropDownListを生成することができます。
モデル

namespace Practice.Models
{
    public class HtmlHelperViewModels
    {
        public WeekdayType EnumValue { get; set; }
    }

    public enum WeekdayType
    {
        Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
    };
}

コントローラー

namespace Practice.Controllers
{
    public class HtmlHelperController : Controller
    {

        public ActionResult Index()
        {
            Models.HtmlHelperViewModels mdl = new Models.HtmlHelperViewModels();
            mdl.EnumValue = Models.WeekdayType.Thursday;
            return View(mdl);
        }
    }
}

ビュー

@Html.EnumDropDownListFor(mdl => mdl.EnumValue)

EnumDropDownListForの出力: 
<select data-val="true" data-val-required="EnumValue フィールドが必要です。" id="EnumValue" name="EnumValue">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option selected="selected" value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>

EnumHelper.GetSelectListメソッドを使用すると、列挙帯からIList<SelectListItem>オブジェクトを生成することもできます。

@{ 
    IList<SelectListItem> enumList = 
            EnumHelper.GetSelectList(typeof(Practice.Models.WeekdayType));       
}
DropDownListFor:
@Html.DropDownListFor(mdl => mdl.EnumDropDownValue, enumList)

DropDownList:
@Html.DropDownList("EnumDropDownListID", new SelectList(enumList,"Value","Text","2"))

DropDownListの表示する値を列挙子の名前ではなく、他の表示名にしたい場合は、列挙子にDisplay属性で表示名を指定します。

using System.ComponentModel.DataAnnotations;
・・・省略・・・
public enum WeekdayType
{
    [Display(Name = "月曜")]
    Monday,
    [Display(Name = "火曜")]
    Tuesday,
    [Display(Name = "水曜")]
    Wednesday,
    [Display(Name = "木曜")]
    Thursday,
    [Display(Name = "金曜")]
    Friday,
    [Display(Name = "土曜")]
    Saturday,
    [Display(Name = "日曜")]
    Sunday
};

yan note

ASP.NET MVC 12_HTMLヘルパー～その4～

入力要素のレンダリング

DropDownList/ DropDownListFor

ListBox/ ListBoxFor

EnumDropDownListFor

0 件のコメント:

VisualStudio(C#)から「Publish AWS Serverless Application」するとAspNetCoreFunctionRoleがCREATE_FAILEDになる。

ページ

このブログを検索

ASP.NET MVC 12_HTMLヘルパー ～その4～

入力要素のレンダリング

DropDownList/ DropDownListFor

ListBox/ ListBoxFor

EnumDropDownListFor

0 件のコメント:

VisualStudio(C#)から「Publish AWS Serverless Application」するとAspNetCoreFunctionRoleがCREATE_FAILEDになる。

ASP.NET MVC 12_HTMLヘルパー～その4～