如何異步處理下拉列表更改事件？

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