實現多選jquery插件，雙面用於MVC Web API

我試圖實現一個名爲「Multiselect」的雙面JQuery插件，允許用戶從右側列表框中選擇左側列表框中的項目。但是，當我嘗試用MVC的Web API來實現它，它:-(實現多選jquery插件，雙面用於MVC Web API

失敗，正如你從截圖中可以看到，「到」陣列參數爲空。「標識」參數來了。在就好了（因爲它的URI的一部分），這裏是jQuery的：

$("body").on("click", "#post-multi", function() { 
    var btn = $("#post-multi"); 
    var src = btn.attr("post-src"); 
    var formMethod = btn.attr("post-method"); 
    var rec = $("#multiselect_to>option").map(function() { 
     return $(this).val(); 
    }).get(); 

    $.ajax({ 
     url: src, 
     method: formMethod, 
     data: rec, 
     dataType: "json", 
     traditional: true, 
     success: function (response, status, xhr) { 
      location.reload(); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      bootbox.alert("Error: " + errorThrown); 
     } 
    }); 
});

這裏是包含用戶選擇的選擇「正確」列表框中的HTML：

<div class="col-xs-5"> 
     <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select> 
    </div>

來源

2017-02-21 Keith Harris

請求之前什麼是'rec'變量的值？ – styopdev

rec：mnu_about，mnu_cntct，mnu_faq，mnu_home，mnu_svc，mnu_login –

我只希望rec變量中描述的選項的值。我不需要用它的「標籤」。所以我期待我可以添加到權限表中的簡單數組值。 –

希望這個答案可以解救出那些我曾經花了很多時間去解決這個問題。這個問題關於瞭解將COMPLEX類型和SIMPLE類型發送到服務器的區別。在我的大部分開發中，我使用「複雜」類型（我發送序列化爲視圖模型或數據傳輸對象的數據）。在這種罕見的情況下，我發送一個「簡單」類型（單個數據類型參數，類型爲string，integer或bool;在我的情況下，是一個字符串數組）。

的Web API處理的是幾乎相同的方式，只是一對夫婦的調整的，必須取得「複雜」類型「簡單」：

1）包括[FromBody]在您的「簡單」類型參數的前在Web API函數（參數的名字是無關緊要的，您可以命名任何你想要的;它沒有以匹配您選擇的名稱。）：

public IHttpActionResult AlterPerms(int id, [FromBody] string[] to) 
     { 
      . . . 
     }

2）改變你的Ajax調用發送一個空的數據參數：data：{''：rec}因此，在我的情況下，整個代碼如下所示：

的Web API：

 //api/perms/3 
     [Route("api/perms/{id}")] 
     [ResponseType(typeof(void))] 
     [HttpPost] 
     public IHttpActionResult AlterPerms(int id, [FromBody] string[] to) 
     { 
      permSvc.AlterPermissions(id, to); 
      permSvc.Save(); 
      return StatusCode(HttpStatusCode.NoContent); 
     }

JQuery的：

$("body").on("click", "#post-multi", function() { 
    var btn = $(this); 
    var src = btn.attr("post-src"); 
    var formMethod = btn.attr("post-method"); 
    var rec = $("#multiselect_to>option").map(function() { 
     return $(this).val(); 
    }).toArray(); 

    $.ajax({ 
     url: src, 
     method: formMethod, 
     data: { '': rec }, 
     dataType: "json", 
     success: function (response, status, xhr) { 
      location.reload(); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      bootbox.alert("Error: " + errorThrown); 
     } 
    }); 
});

來源

2017-02-21 18:51:02

實現多選jquery插件，雙面用於MVC Web API

回答

相關問題