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

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文件认购更改事件OD这个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); 
     }); 
    }); 
});