Question

I’m rockin my own custom HtmlHelper to enable AutoComplete support on a Select List.

This is working alright, except I need to be able to support the DataAnnotations in my ViewModel.

Here’s my current (working) HtmlHelper (sans validation)

    <Extension()>
    Public Function AutoCompleteDropDownList(ByVal helper As HtmlHelper, name As String, autoCompleteSelectListItem As List(Of AutoCompleteSelectListItem), htmlAttributes As Object) As MvcHtmlString
        Dim selectBuilder As New TagBuilder("select")
        selectBuilder.MergeAttribute("name", name)
        selectBuilder.MergeAttributes(New RouteValueDictionary(htmlAttributes))
        selectBuilder.MergeAttribute("autocorrect", "off")
        selectBuilder.MergeAttribute("autocomplete", "off")

        Dim selectListBuilder As New TagBuilder("option")
        selectListBuilder.MergeAttribute("value", "")
        selectListBuilder.MergeAttribute("selected", "selected")

        Dim innerHtmlBuilder As New StringBuilder
        innerHtmlBuilder.Append(selectListBuilder.ToString(TagRenderMode.Normal))


        For Each item In autoCompleteSelectListItem
            selectListBuilder = New TagBuilder("option")
            selectListBuilder.MergeAttribute("value", item.Value)
            selectListBuilder.MergeAttribute("data-alternative-spellings", item.AlternativeSpellings)
            selectListBuilder.MergeAttribute("data-relevancy-booster", item.RelevancyBooster)
            selectListBuilder.InnerHtml = item.Label
            innerHtmlBuilder.Append(selectListBuilder.ToString(TagRenderMode.Normal))
        Next

        selectBuilder.InnerHtml = innerHtmlBuilder.ToString()

        Return MvcHtmlString.Create(selectBuilder.ToString(TagRenderMode.Normal))
    End Function

How would one rewrite this to support validation? Something like AutoCompleteDropDownListFor()

PS: a C# solution is perfectly acceptable, the project I’m working on is in VB, but I don’t mind translating.

---

PS: I’m flipping through the source code on http://aspnet.codeplex.com and I can’t find any reference to DropDownListFor

Answer 1

You will have to download the source code and you will find the implementation of the DropDownListFor helper inside mvc3-rtm-sources.zip\mvc3-rtm-sources\mvc3\src\SystemWebMvc\Mvc\Html\SelectExtensions.cs. To enable client side validation you have to emit HTML5 data-* attributes on the drop down. This is done towards the end of the SelectInternal method by calling htmlHelper.GetUnobtrusiveValidationAttributes method.

<Extension()>
Public Function AutoCompleteDropDownList(ByVal helper As HtmlHelper, name As String, autoCompleteSelectListItem As List(Of AutoCompleteSelectListItem), htmlAttributes As Object) As MvcHtmlString
    Dim selectBuilder As New TagBuilder("select")
    selectBuilder.MergeAttribute("name", name)
    selectBuilder.MergeAttributes(New RouteValueDictionary(htmlAttributes))
    selectBuilder.MergeAttribute("autocorrect", "off")
    selectBuilder.MergeAttribute("autocomplete", "off")

    Dim selectListBuilder As New TagBuilder("option")
    selectListBuilder.MergeAttribute("value", "")
    selectListBuilder.MergeAttribute("selected", "selected")

    Dim innerHtmlBuilder As New StringBuilder
    innerHtmlBuilder.Append(selectListBuilder.ToString(TagRenderMode.Normal))


    For Each item In autoCompleteSelectListItem
        selectListBuilder = New TagBuilder("option")
        selectListBuilder.MergeAttribute("value", item.Value)
        selectListBuilder.MergeAttribute("data-alternative-spellings", item.AlternativeSpellings)
        selectListBuilder.MergeAttribute("data-relevancy-booster", item.RelevancyBooster)
        selectListBuilder.InnerHtml = item.Label
        innerHtmlBuilder.Append(selectListBuilder.ToString(TagRenderMode.Normal))
    Next

    selectBuilder.InnerHtml = innerHtmlBuilder.ToString()
    selectBuilder.MergeAttributes(helper.GetUnobtrusiveValidationAttributes(name))

    Return MvcHtmlString.Create(selectBuilder.ToString(TagRenderMode.Normal))
End Function

---

UPDATE:

As requested in the comments section, here’s how a strongly typed version of the helper would look like:

<Extension()>
Public Function AutoCompleteDropDownListFor(Of TModel, TProperty)(helper As HtmlHelper(Of TModel), expression As Expression(Of Func(Of TModel, TProperty)), autoCompleteSelectListItem As List(Of AutoCompleteSelectListItem), htmlAttributes As Object) As IHtmlString
    Dim name = ExpressionHelper.GetExpressionText(expression)
    Dim fullHtmlFieldName As String = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name)

    Dim selectBuilder = New TagBuilder("select")
    selectBuilder.MergeAttribute("name", fullHtmlFieldName)
    selectBuilder.MergeAttributes(New RouteValueDictionary(htmlAttributes))
    selectBuilder.MergeAttribute("autocorrect", "off")
    selectBuilder.MergeAttribute("autocomplete", "off")

    Dim selectListBuilder = New TagBuilder("option")
    selectListBuilder.MergeAttribute("value", "")
    selectListBuilder.MergeAttribute("selected", "selected")

    Dim innerHtmlBuilder = New StringBuilder()
    innerHtmlBuilder.Append(selectListBuilder.ToString(TagRenderMode.Normal))

    For Each item In autoCompleteSelectListItem
        selectListBuilder = New TagBuilder("option")
        selectListBuilder.MergeAttribute("value", item.Value)
        selectListBuilder.MergeAttribute("data-alternative-spellings", item.AlternativeSpellings)
        selectListBuilder.MergeAttribute("data-relevancy-booster", item.RelevancyBooster)
        selectListBuilder.InnerHtml = item.Label
        innerHtmlBuilder.Append(selectListBuilder.ToString(TagRenderMode.Normal))
    Next

    selectBuilder.InnerHtml = innerHtmlBuilder.ToString()
    selectBuilder.MergeAttributes(helper.GetUnobtrusiveValidationAttributes(name))

    Return MvcHtmlString.Create(selectBuilder.ToString(TagRenderMode.Normal))
End Function