Convert a boolean property editor to a dropdownlist in MVC view

Question

I currently have scaffolded a view where a boolean property of my model gets passed to the Html.EditorFor helper:

@Html.EditorFor(model => model.EndCurrentDeal)

All well and good, but what I'm really looking to do is massage that into a dropdown like:

<select>
    <option value="true" selected="selected">Yes</option>
    <option value="false">No</option>
</select>

What's the easiest way to achieve that?

Thanks,

Chris

see this response http://stackoverflow.com/a/9885229/138071 – andres descalzo Mar 18 '13 at 16:06 — andres descalzo, Mar 18 '13 at 16:06

score 29 · Accepted Answer · edited May 23 '17 at 12:02

29

You can try something like here:

<%= Html.DropDownList(
    "", 
    new SelectList(
        new[] 
        { 
            new { Value = "true", Text = "Yes" },
            new { Value = "false", Text = "No" },
        }, 
        "Value", 
        "Text",
        Model
    )
) %>

If you want a default Value :

<%= Html.DropDownList(
        "", 
        new SelectList(
            new[] 
            { 
                new { Value = "", Text = "None" },
                new { Value = "true", Text = "Yes" },
                new { Value = "false", Text = "No" },
            }, 
            "Value", 
            "Text",
            Model
        )
    ) %>

edited May 23 '17 at 12:02

Community

1
1

answered Mar 18 '13 at 14:57

Francois Borgies

2,378
31
38

What if the `bool` value is nullable? How to create a null option? – Dylan Czenski Jun 20 '16 at 21:41
I see the update thank you. Can I also do `value = "null"`? – Dylan Czenski Jun 21 '16 at 16:15

score 24 · Answer 2 · answered Oct 02 '13 at 15:47

MVC 4

@*/////////////////// bool ////////////////////////////////*@
@model bool

@Html.DropDownListFor(m => m, new SelectList(
        new[] 
        { 
            new { Value = "true", Text = "Yes" },
            new { Value = "false", Text = "No" },
        },
        "Value",
        "Text",
        Model
    ))

@*/////////////////// bool? ////////////////////////////////*@    
@model bool?

@Html.DropDownListFor(m => m, new SelectList(
        new[] 
        { 
            new { Value = "", Text = "(none)" },
            new { Value = "true", Text = "Yes" },
            new { Value = "false", Text = "No" },
        },
        "Value",
        "Text",
        Model
    ))

score 10 · Answer 3 · answered Jan 16 '14 at 13:21

You can also try Dictionary approach is a bit cleaner and can be easily added to your constructor for View Model.

ViewModel

 //Define IDictionary interface
 public IDictionary<bool, string> options { get; set; }

public YourViewModel()
{
  // Default constructor
        this.options = new Dictionary<bool, string>();
        this.options.Add(false, "no");
        this.options.Add(true, "yes");
}




@Html.DropDownListFor(model => model.yourPropertyToEdit, new SelectList( Model.options, "Key", "Value"))

score 5 · Answer 4 · answered Dec 04 '16 at 07:59

I got inspired with the very useful answer from Francois Borgies, so I decided to write a custom method that creates SelectList for Boolean value that can be used in @Html.DropDownList. When you have a helper method that can be used in every view, then it reduces the amount of code needed in razor views.

My project has CustomHelpers.cs class in folder: App_Code/Helpers

namespace YourProjectName.App_Code.Helpers
{
    public static class CustomHelpers
    {
        public static SelectList SelectListForBoolean(object selectedValue = null)
        {
            SelectListItem[] selectListItems = new SelectListItem[2];

            var itemTrue = new SelectListItem();
            itemTrue.Value = "true";
            itemTrue.Text = "Yes";
            selectListItems[0] = itemTrue;

            var itemFalse = new SelectListItem();
            itemFalse.Value = "false";
            itemFalse.Text = "No";
            selectListItems[1] = itemFalse;

            var selectList = new SelectList(selectListItems, "Value","Text", selectedValue);

            return selectList;
        }           
    }
}

In the create view you can use it as follows:

@model Foo
@using YourProjectName.App_Code.Helpers;
...
@Html.DropDownList("EndCurrentDeal", CustomHelpers.SelectListForBoolean(), "-select-")

for edit view

@model Bar
@using YourProjectName.App_Code.Helpers;
...
@Html.DropDownList("EndCurrentDeal", CustomHelpers.SelectListForBoolean(Model.EndCurrentDeal), "-select-")

Although my helper method is not pure HTML Helper because it creates SelectList, - it nevertheless follows same functionality that was presented by Rahul Rajat Singh, in his excellent article An Absolute Beginner's Tutorial on HTML Helpers and Creating Custom HTML Helpers in ASP.NET MVC

Convert a boolean property editor to a dropdownlist in MVC view

4 Answers4

Linked