Model Bind List of Enum Flags

Question

I have a grid of Enum Flags in which each record is a row of checkboxes to determine that record's flag values. This is a list of notifications that the system offers and the user can pick (for each one) how they want them delivered:

[Flag]
public enum NotificationDeliveryType
{
  InSystem = 1,
  Email = 2,
  Text = 4
}

I found this article but he's getting back a single flag value and he's binding it in the controller like this (with a days of the week concept):

[HttpPost]
public ActionResult MyPostedPage(MyModel model)
{
  //I moved the logic for setting this into a helper 
  //because this could be re-used elsewhere.
  model.WeekDays = Enum<DayOfWeek>.ParseToEnumFlag(Request.Form, "WeekDays[]");
  ...
}

I can't find anywhere that the MVC 3 model binder can handle flags. Thanks!

Answer 1

In general I avoid using enums when designing my view models because they don't play with ASP.NET MVC's helpers and out of the box model binder. They are perfectly fine in your domain models but for view models you could use other types. So I leave my mapping layer which is responsible to convert back and forth between my domain models and view models to worry about those conversions.

This being said, if for some reason you decide to use enums in this situation you could roll a custom model binder:

public class NotificationDeliveryTypeModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (value != null )
        {
            var rawValues = value.RawValue as string[];
            if (rawValues != null)
            {
                NotificationDeliveryType result;
                if (Enum.TryParse<NotificationDeliveryType>(string.Join(",", rawValues), out result))
                {
                    return result;
                }
            }
        }
        return base.BindModel(controllerContext, bindingContext);
    }
}

which will be registered in Application_Start:

ModelBinders.Binders.Add(
    typeof(NotificationDeliveryType), 
    new NotificationDeliveryTypeModelBinder()
);

So far so good. Now the standard stuff:

View model:

[Flags]
public enum NotificationDeliveryType
{
    InSystem = 1,
    Email = 2,
    Text = 4
}

public class MyViewModel
{
    public IEnumerable<NotificationDeliveryType> Notifications { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Notifications = new[]
            {
                NotificationDeliveryType.Email,
                NotificationDeliveryType.InSystem | NotificationDeliveryType.Text
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

View (~/Views/Home/Index.cshtml):

@model MyViewModel
@using (Html.BeginForm())
{
    <table>
        <thead>
            <tr>
                <th>Notification</th>
            </tr>
        </thead>
        <tbody>
            @Html.EditorFor(x => x.Notifications)
        </tbody>
    </table>
    <button type="submit">OK</button>
}

custom editor template for the NotificationDeliveryType (~/Views/Shared/EditorTemplates/NotificationDeliveryType.cshtml):

@model NotificationDeliveryType

<tr>
    <td>
        @foreach (NotificationDeliveryType item in Enum.GetValues(typeof(NotificationDeliveryType)))
        {
            <label for="@ViewData.TemplateInfo.GetFullHtmlFieldId(item.ToString())">@item</label>
            <input type="checkbox" id="@ViewData.TemplateInfo.GetFullHtmlFieldId(item.ToString())" name="@(ViewData.TemplateInfo.GetFullHtmlFieldName(""))" value="@item" @Html.Raw((Model & item) == item ? "checked=\"checked\"" : "") />
        }
    </td>
</tr>

It's obvious that a software developer (me in this case) writing such code in an editor template shouldn't be very proud of his work. I mean look t it! Even I that wrote this Razor template like 5 minutes ago can no longer understand what it does.

So we refactor this spaghetti code in a reusable custom HTML helper:

public static class HtmlExtensions
{
    public static IHtmlString CheckBoxesForEnumModel<TModel>(this HtmlHelper<TModel> htmlHelper)
    {
        if (!typeof(TModel).IsEnum)
        {
            throw new ArgumentException("this helper can only be used with enums");
        }
        var sb = new StringBuilder();
        foreach (Enum item in Enum.GetValues(typeof(TModel)))
        {
            var ti = htmlHelper.ViewData.TemplateInfo;
            var id = ti.GetFullHtmlFieldId(item.ToString());
            var name = ti.GetFullHtmlFieldName(string.Empty);
            var label = new TagBuilder("label");
            label.Attributes["for"] = id;
            label.SetInnerText(item.ToString());
            sb.AppendLine(label.ToString());

            var checkbox = new TagBuilder("input");
            checkbox.Attributes["id"] = id;
            checkbox.Attributes["name"] = name;
            checkbox.Attributes["type"] = "checkbox";
            checkbox.Attributes["value"] = item.ToString();
            var model = htmlHelper.ViewData.Model as Enum;
            if (model.HasFlag(item))
            {
                checkbox.Attributes["checked"] = "checked";
            }
            sb.AppendLine(checkbox.ToString());
        }

        return new HtmlString(sb.ToString());
    }
}

and we clean the mess in our editor template:

@model NotificationDeliveryType
<tr>
    <td>
        @Html.CheckBoxesForEnumModel()
    </td>
</tr>

which yields the table:

Now obviously it would have been nice if we could provide friendlier labels for those checkboxes. Like for example:

[Flags]
public enum NotificationDeliveryType
{
    [Display(Name = "in da system")]
    InSystem = 1,

    [Display(Name = "@")]
    Email = 2,

    [Display(Name = "txt")]
    Text = 4
}

All we have to do is adapt the HTML helper we wrote earlier:

var field = item.GetType().GetField(item.ToString());
var display = field
    .GetCustomAttributes(typeof(DisplayAttribute), true)
    .FirstOrDefault() as DisplayAttribute;
if (display != null)
{
    label.SetInnerText(display.Name);
}
else
{
    label.SetInnerText(item.ToString());
}

which gives us a better result:

Answer 2

Darin's code was great but I encountered some trouble using it with MVC4.

In the HtmlHelper extension to create the boxes, I kept getting run-time errors that the model was not an enum (specifically, saying System.Object). I reworked the code to take a Lambda expression and cleaned up this issue using the ModelMetadata class:

public static IHtmlString CheckBoxesForEnumFlagsFor<TModel, TEnum>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression)
{
    ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    Type enumModelType = metadata.ModelType;

    // Check to make sure this is an enum.
    if (!enumModelType.IsEnum)
    {
        throw new ArgumentException("This helper can only be used with enums. Type used was: " + enumModelType.FullName.ToString() + ".");
    }

    // Create string for Element.
    var sb = new StringBuilder();
    foreach (Enum item in Enum.GetValues(enumModelType))
    {
        if (Convert.ToInt32(item) != 0)
        {
            var ti = htmlHelper.ViewData.TemplateInfo;
            var id = ti.GetFullHtmlFieldId(item.ToString());
            var name = ti.GetFullHtmlFieldName(string.Empty);
            var label = new TagBuilder("label");
            label.Attributes["for"] = id;
            var field = item.GetType().GetField(item.ToString());

            // Add checkbox.
            var checkbox = new TagBuilder("input");
            checkbox.Attributes["id"] = id;
            checkbox.Attributes["name"] = name;
            checkbox.Attributes["type"] = "checkbox";
            checkbox.Attributes["value"] = item.ToString();
            var model = htmlHelper.ViewData.Model as Enum;
            if (model.HasFlag(item))
            {
                checkbox.Attributes["checked"] = "checked";
            }
            sb.AppendLine(checkbox.ToString());

            // Check to see if DisplayName attribute has been set for item.
            var displayName = field.GetCustomAttributes(typeof(DisplayNameAttribute), true)
                .FirstOrDefault() as DisplayNameAttribute;
            if (displayName != null)
            {
                // Display name specified.  Use it.
                label.SetInnerText(displayName.DisplayName);
            }
            else
            {
                // Check to see if Display attribute has been set for item.
                var display = field.GetCustomAttributes(typeof(DisplayAttribute), true)
                    .FirstOrDefault() as DisplayAttribute;
                if (display != null)
                {
                    label.SetInnerText(display.Name);
                }
                else
                {
                    label.SetInnerText(item.ToString());
                }
            }
            sb.AppendLine(label.ToString());

            // Add line break.
            sb.AppendLine("<br />");
        }                
    }

    return new HtmlString(sb.ToString());
}

I also extended the model binder so it works with any generic enum type.

public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
    // Fetch value to bind.
    var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
    if (value != null)
    {
        // Get type of value.
        Type valueType = bindingContext.ModelType;

        var rawValues = value.RawValue as string[];
        if (rawValues != null)
        {
            // Create instance of result object.
            var result = (Enum)Activator.CreateInstance(valueType);

            try
            {
                // Parse.
                result = (Enum)Enum.Parse(valueType, string.Join(",", rawValues));
                return result;
            }
            catch
            {
                return base.BindModel(controllerContext, bindingContext);
            }
        }
    }
    return base.BindModel(controllerContext, bindingContext);
}

You still need to register each enum type in Application_Start but at least this eliminates the need for separate binder classes. You can register it using:

ModelBinders.Binders.Add(typeof(MyEnumType), new EnumFlagsModelBinder());

I posted my code on Github at https://github.com/Bitmapped/MvcEnumFlags.

Answer 3

You can try the MVC Enum Flags package (available via nuget). It automatically skips zero-valued enum choices, which is a nice touch.

[The following is from the Documentation and its comments; see there if this is not binding properly for you]

After installation, add the following to Global.asax.cs\Application_Start:

ModelBinders.Binders.Add(typeof(MyEnumType), new EnumFlagsModelBinder());

Then in the view, put @using MvcEnumFlags up top and @Html.CheckBoxesForEnumFlagsFor(model => model.MyEnumTypeProperty) for the actual code.

Answer 4

I use approach described in MVVM Framework.

 enum ActiveFlags
{
    None = 0,
    Active = 1,
    Inactive = 2,
}

class ActiveFlagInfo : EnumInfo<ActiveFlags>
{
    public ActiveFlagInfo(ActiveFlags value)
        : base(value)
    {
        // here you can localize or set user friendly name of the enum value
        if (value == ActiveFlags.Active)
            this.Name = "Active";
        else if (value == ActiveFlags.Inactive)
            this.Name = "Inactive";
        else if (value == ActiveFlags.None)
            this.Name = "(not set)";
    }
}

   // Usage of ActiveFlagInfo class:
   // you can use collection of ActiveFlagInfo for binding in your own view models
   // also you can use this ActiveFlagInfo as property for your  classes to wrap enum properties

   IEnumerable<ActiveFlagInfo> activeFlags = ActiveFlagInfo.GetEnumInfos(e => 
                    e == ActiveFlags.None ? null : new ActiveFlagInfo(e));