Как сделать эквивалент @ Ajax.DropDownList?

Question

В моем приложении MVC3 / Razor есть частичное представление для разбивки сетки, которая в настоящее время работает довольно хорошо. Когда я AJAXified его, я преобразовал все вызовы @ Html.ActionLink в @ Ajax.ActionLink. Теперь я хочу добавить DropDownList, но @ Html.DropDownList не приводит к тому, что раздел AJAX отправляет сообщения назад, и @ Ajax.DropDownList отсутствует.

Что я могу сделать, чтобы выпадающий список снова отображал изменения?

Редактировать: По предпочтению лучше всего написать что-то в свой собственный помощник @ Ajax.DropDownList. Я уверен, что приведенные ниже решения на основе jQuery работают, и я буду использовать их при необходимости, но я уверен, что мне понадобится эта функциональность в другом месте, и я бы предпочел, чтобы все эти маленькие сценарии не использовались .

Answer 1

Вы можете использовать обычный Html.DropDownListFor, применяя к нему некоторый пользовательский класс CSS, а затем подписаться на событие .change и инициировать запрос AJAX вручную:

$(function() {
    $('.someClassYouHaveAddedToYourDdl').change(function() {
        var page = $(this).val();
        $.ajax({
            url: '@Url.Action("SomeActionResponsibleForPagination")',
            type: 'POST',
            data: { page: page }, // The page parameter might need adapting
            success: function(result) {
                // TODO: here you could refresh the part of the DOM containing
                // the grid with the new results. Use $('.someSelector').html(result);
            }
        });
    });
});

Answer 2

Добрый вечер!Я переписываю некоторые функции следующим образом:

public static MvcHtmlString DropDownList(this AjaxHelper html, 
   string action, 
   AjaxOptions options, 
   IEnumerable<SelectListItem> selectItems, 
   IDictionary<string, object> listHtmlAttributes)

, но я не могу написать рабочий код с HtmlAttributes.Вот мой вариант:

@Ajax.DropDownList("ApplSort", new AjaxOptions() { 
                         HttpMethod = "POST", 
                         InsertionMode = InsertionMode.Replace,  
                         UpdateTargetId = "target", 
                         LoadingElementId = "AjaxSearch" }, 
   new[]
   {
      new SelectListItem { Value = "0", Text = "Заявки от новых к старым" },
      new SelectListItem { Value = "1", Text = "Заявки от старых к новым" }
   }, 
   new IDictionary<string, object>  { id = "DropDownListSort", @class = "chosen" }
)

или

@Ajax.DropDownList("ApplSort", new AjaxOptions() { 
                         HttpMethod = "POST", 
                         InsertionMode = InsertionMode.Replace,  
                         UpdateTargetId = "target", 
                         LoadingElementId = "AjaxSearch" },
    new[]
    {
       new SelectListItem { Value = "0", Text = "Заявки от новых к старым" },
       new SelectListItem { Value = "1", Text = "Заявки от старых к новым" }
    }, 
    new  { id = "DropDownListSort", @class = "chosen" }
)

Как мне правильно написать?

Проблема решена.Написал два расширения, и все заработало:

public static MvcHtmlString DropDownList(this AjaxHelper html, string action, RouteValueDictionary routeValues, AjaxOptions options, IEnumerable<SelectListItem> selectItems, object htmlAttributes)
    {
        return DropDownList(html, action, routeValues, options, selectItems, new RouteValueDictionary(htmlAttributes));
    }

    public static MvcHtmlString DropDownList(this AjaxHelper html, string action, AjaxOptions options, IEnumerable<SelectListItem> selectItems, object htmlAttributes)
    {
        return DropDownList(html, action, options, selectItems, new RouteValueDictionary(htmlAttributes));
    }

Answer 3

Вот то, что я придумал - первоначально он был вдохновлен ответом Дарина, но я взял его в совершенно ином направлении.

    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);
    }

Answer 4

С помощью jQuery вы можете инициировать событие изменения следующим образом, а затем либо отправить форму, либо выполнить желаемую запись AJAX по желаемому маршруту.

<script type="text/javascript">
    $("#dropDownList").change(function() {
        // your code here

     });
</script>