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.*助手？

第一步是使用真实视图模型并避免视图中的标记汤。视图不应该排序数据或其他任何东西这不是他们的责任。视图用于显示从控制器以视图模型的形式发送给它们的数据。当我在你看来看到这个OrderBy时，它只会让我生病。因此，定义一个干净的视图模型并在控制器中进行排序，以便在视图中只需：

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

如何异步处理下拉列表更改事件？

1 个答案: