Как обработать событие изменения выпадающего списка асинхронно?

Question

У меня есть выпадающий список, на который мне нужно реагировать асинхронно.Я не могу заставить Ajax.BeginForm фактически выполнять асинхронную обратную передачу, он только выполняет полную обратную передачу.

               using (Ajax.BeginForm("EditStatus", new AjaxOptions { UpdateTargetId = "divSuccess"}))
            {%>
                <%=Html.DropDownList(
                    "ddlStatus",
                    Model.PartStatusList.OrderBy(wc => wc.SortOrder).Select(
                        wc => new SelectListItem
                                  {
                                      Text = wc.StatusDescription,
                                      Value = wc.PartStatusId.ToString(),
                                      Selected = wc.PartStatusId == Model.PartStatusId
                                  }),
                                                                                            new { @class = "input-box", onchange = "this.form.submit();" }
                                      )%>
                <div id='divSuccess'></div>
        <%
            }

Когда пользователь выбирает элемент из списка, он выполняет полную обратную передачу и возврат метода контроллеразначение является единственным выходом на экране.Я ожидаю, что возвращаемое значение метода контроллера будет отображаться в "divSuccess".

        [AjaxAwareAuthorize(Roles = "Supplier_Administrator, Supplier_User")]
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult EditStatus(PartPropertiesViewModel partPropertiesViewModel)
    {
        var part = _repository.GetPart(partPropertiesViewModel.PartId);
        part.PartStatusId = Convert.ToInt32(Request.Form["ddlStatus"]);

        _repository.SavePart(part);

        return Content("Successfully Updated Status.");
    }

Answer 1

Как насчет того, чтобы сделать это правильно, используя ненавязчивый jQuery и избавившись от этих Ajax.* помощников?

Первый шаг - использовать реальные модели представления и избегать супа с тегами в ваших представлениях. Представления не должны упорядочивать данные или что-то еще. Это не их ответственность. Представления предназначены для отображения данных, отправляемых им в форме модели представления из контроллера. Когда я вижу этот Порядок, по-вашему, меня тошнит. Поэтому определите модель чистого представления и выполните упорядочивание в вашем контроллере, чтобы, по вашему мнению, вы просто получили:

<% using (Html.BeginForm("EditStatus", "SomeControllerName", FormMethod.Post, new { id = "myForm" }) { %>
    <%= Html.DropDownListFor(
        x => x.Status,
        Model.OrderedStatuses,
        new {
            @class = "input-box",
            id = "myDDL"
        }
    ) %>
<% } %>

<div id="divSuccess"></div>

и, наконец, в совершенно отдельном файле javascript подпишитесь на событие изменения этого DDL и обновите div:

$(function() {
    $('#myDDL').change(function() {
        var url = $('#myForm').attr('action');
        var status = $(this).val();
        $.post(url, { ddlStatus: status }, function(result) {
            $('#divSuccess').html(result);
        });
    });
});

Предполагается, что в действии вашего контроллера вы прочитали бы текущее состояние следующим образом:

[AjaxAwareAuthorize(Roles = "Supplier_Administrator, Supplier_User")]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditStatus(PartPropertiesViewModel partPropertiesViewModel, string ddlStatus)
{
    var part = _repository.GetPart(partPropertiesViewModel.PartId);
    part.PartStatusId = Convert.ToInt32(ddlStatus);
    _repository.SavePart(part);
    return Content("Successfully Updated Status.");
}

И когда вы видите это, вы можете спросить себя, действительно ли вам нужна форма в этом случае и какова ее цель, где у вас может быть просто выпадающий список:

<%= Html.DropDownListFor(
    x => x.Status,
    Model.OrderedStatuses,
    new Dictionary<string, object> {
        { "class", "input-box" },
        { "data-url", Url.Action("EditStatus", "SomeControllerName") },
        { "id", "myDDL" }
    }
) %>
<div id="divSuccess"></div>

, а затем просто:

$(function() {
    $('#myDDL').change(function() {
        var url = $(this).data('url');
        var status = $(this).val();
        $.post(url, { ddlStatus: status }, function(result) {
            $('#divSuccess').html(result);
        });
    });
});