I’ve really been enjoying the html helpers baked into the ASP.Net MVC framework. To compliment the SelectList extensions that I use, I often use this extension as well.  It displays a drop down of enum values for the specified property.  It will attempt to get the name via the DisplayAttribute.  If the attribute is not present, then it will just get the name from the enum value.

I created an extension method to get the Name of an enum value (as described above):

private static readonly Dictionary<Enum, string> NameCache = new Dictionary<Enum, string>();
public static string GetName(this Enum type)
{
  if (NameCache.ContainsKey(type))
    return NameCache[type];

  var enumType = type.GetType();
  var info = enumType.GetField(type.ToString());
  if (info == null)
    return string.Empty;

  var displayAttribute = info.GetCustomAttributes(false).OfType<DisplayAttribute>().FirstOrDefault();
  var value = string.Empty;
  if (displayAttribute != null)
    value = displayAttribute.GetName() ?? string.Empty;

  NameCache.Add(type, value);

  return value;
}

I then make use of that extension with the enum dropdown helper:

public static MvcHtmlString DropDownListForEnum<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
  return htmlHelper.DropDownListForEnum(expression, null, null);
}
public static MvcHtmlString DropDownListForEnum<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
{
  return htmlHelper.DropDownListForEnum(expression, new RouteValueDictionary(htmlAttributes));
}
public static MvcHtmlString DropDownListForEnum<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> htmlAttributes)
{
  return htmlHelper.DropDownListForEnum(expression, null, htmlAttributes);
}
public static MvcHtmlString DropDownListForEnum<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string optionLabel)
{
  return htmlHelper.DropDownListForEnum(expression, optionLabel, null);
}
public static MvcHtmlString DropDownListForEnum<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string optionLabel, object htmlAttributes)
{
  return htmlHelper.DropDownListForEnum(expression, optionLabel, null);
}
public static MvcHtmlString DropDownListForEnum<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string optionLabel, IDictionary<string, object> htmlAttributes)
{
  if (expression == null)
    throw new ArgumentNullException("expression");

  var member = expression.Body as MemberExpression;
  if (member == null)
    throw new ArgumentNullException("expression");

  var selectedValue = string.Empty;
  var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
  if (metadata.Model != null)
  {
    selectedValue = metadata.Model.ToString();
  }
  var enumType = Nullable.GetUnderlyingType(member.Type) ?? member.Type;

  var listItems = new List<SelectListItem>();
  foreach (var name in Enum.GetNames(enumType))
  {
    var type = Enum.Parse(enumType, name) as Enum;
    listItems.Add(new SelectListItem
    {
      Text = type.GetName(),
      Value = name,
      Selected = name == selectedValue
    });
  }

  return htmlHelper.DropDownListFor(expression, listItems, optionLabel, htmlAttributes);
}

The beauty of this extension method is that it uses the DropDownListFor(…) helper baked into the framework already. So validation, etc is wired up for me. Also worth noting, this extension works with nullable and non-nullable properties. Hope this helps someone save some time…

I wanted to share some extensions I use for dealing with the Asp.Net MVC select lists (DropDownList/ListBox) helpers.  Why the mvc helper apis are not more friendly in this area, I do not know…

Now some examples of how to use these extensions:

A single dropdown:

@Html.DropDownListFor(x => x.PropertyId, Model.AllProperties.ToSelectListItems(x => x.Name, x => x.Id.ToString(), x => x.Id == Model.PropertyId))

A multiselect dropdown:

@Html.ListBoxFor(x => x.PropertyIds, Model.AllProperties.ToMultiSelectListItems(x => x.Name, x => x.Id.ToString(), x => Model.PropertyIds.Contains(x.Id)))

For the current project I’m working on, I have a search box at the top of the site.  I wanted to add ajax suggestions (like Google Suggest) to it and thought it was a good exercise for the new JQuery UI 1.8 Autocomplete widget.  The autocomplete widget seems to be more suited for quickly searching pre-populated lists, but it offers nice extension points that allow you to easily customize its behavior.  Rather than having the control fetch a list of suggestions to just complete the word in the search box, I wanted the drop down to display a list of selections that when clicked, would navigate directly to the intended URL.

According to the documentation, you can pass in  three types of sources:

1. A string representing a url that will return JSON data
2. An array of strings (or objects)
3. A callback that lets you define your own data

I’ll show you how to accomplish it using an array, but you can easily use one of the other methods as well.  If you want to use a different data source method, just make sure the result has the same object array signature as below.

1. Format the data source correctly

The autocomplete widget expects the source to be formatted as an array of strings or as an array of objects with specific properties.  Since we want to be able to assign a URL to each suggested item, we need to create an array of label/value pairs that represent each item:

var source = [{ label: 'My First Item', value: '/items/1' }, { label: 'My Second Item', value: '/items/2'}];

Now, when I pass that as the source to the autocomplete, we get items returned as a drop down menu.

2. Display the correct text for items

Unfortunately, when you hover over an item, it will replace the text in the search box with the value of the item:

To fix that behavior, the autocomplete widget allows you to hook into the focus event, that fires when an item in the drop down menu is hovered over/navigated to.  So we want to alter the behavior to use the label instead of value:

focus: function (event, ui) {
  $(event.target).val(ui.item.label);
  return false;
}

Now we get the label showing up in the textbox when we hover over an item:

3. Have the browser navigate to a URL when an item is selected

We’re almost there.  The last step that is needed is to wire up the item so that we navigate to the appropriate url when an item is selected:

select: function (event, ui) {
  $(event.target).val(ui.item.label);
  window.location = ui.item.value;
  return false;
}

A couple notes about what is happening in the select function. We set the value of the search box to the label value. This allows the control to auto complete in case the user gets anxious and wants to click Search before the browser redirects. After that, we instruct the browser to redirect to the selected item’s url.  Finally, we cancel the select event to make sure the default autocomplete behavior does not put the item value in the search box.

Putting it all together

We have the following:

$("#Query").autocomplete({
	source: [{ label: 'My First Item', value: '/items/1' }, { label: 'My Second Item', value: '/items/2'}]
	,focus: function (event, ui) {
		$(event.target).val(ui.item.label);
		return false;
	}
	,select: function (event, ui) {
		$(event.target).val(ui.item.label);
		window.location = ui.item.value;
		return false;
	}
});