Question

I have a partial view in my MVC3/Razor app for paging a grid which works fairly well currently. When I AJAXified it, I converted all the @Html.ActionLink calls to @Ajax.ActionLink. Now I want to add a DropDownList, but @Html.DropDownList doesn’t cause the AJAX section to post back, and there’s no @Ajax.DropDownList.

What can I do to get this dropdown to post back on change?

Edit: By preference, something that I can write into my own @Ajax.DropDownList helper would be best. I’m sure the jQuery-based solutions below work, and I’ll use them if necessary, but I’m sure I’m going to want this functionality elsewhere, and I’d prefer to not have all these little scripts floating around.

Answer 1

Here’s what I came up with – it was originally inspired by Darin’s answer, but I took it in a completely different direction.

    public static MvcHtmlString DropDownList(this AjaxHelper html, string action, RouteValueDictionary routeValues, AjaxOptions options, IEnumerable<SelectListItem> selectItems, IDictionary<string, object> listHtmlAttributes)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);

        // Wrap it in a form
        var formBuilder = new TagBuilder("form");


        //  build the <select> tag
        var listBuilder = new TagBuilder("select");
        if (listHtmlAttributes != null && listHtmlAttributes.Count > 0) listBuilder.MergeAttributes(listHtmlAttributes);
        StringBuilder optionHTML = new StringBuilder();
        foreach (SelectListItem item in selectItems)
        {
            var optionBuilder = new TagBuilder("option");
            optionBuilder.MergeAttribute("value", item.Value);
            optionBuilder.InnerHtml = item.Text;
            if (item.Selected)
            {
                optionBuilder.MergeAttribute("selected", "selected");
            }

            //optionBuilder.Attributes["onchange"] = "($this.form).attr('action', '" + url.Action(action, routeValues).Replace("___", item.Value) + "');$(this.form).submit();";
            optionHTML.Append(optionBuilder.ToString());
        }
        listBuilder.InnerHtml = optionHTML.ToString();
        listBuilder.Attributes["onchange"] = "$(this.form).attr('action', '" + url.Action(action, routeValues).Replace("___", "' + $(this).first('option:selected').val() + '") + "');$(this.form).submit();";
        formBuilder.InnerHtml = listBuilder.ToString();

        foreach (var ajaxOption in options.ToUnobtrusiveHtmlAttributes())
            formBuilder.MergeAttribute(ajaxOption.Key, ajaxOption.Value.ToString());
        string formHtml = formBuilder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(formHtml);
    }