MVC Web API用に2つの面を持つマルチセレクションjqueryプラグインを実装する

Question

私は、ユーザーが左のリストボックスから右のリストボックスに項目を選択できるようにする「マルチセレクション」というJQueryプラグインを実装しようとしています。私はMVCのWeb APIとそれを実装しようとすると、「へ」配列パラメータが空で、スクリーンショットから見ることができるようにしかし、それは:-(

失敗した。「ID」パラメータが来ていますうまく超える（それは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> 

Answer 1

この答えは、私がこれを理解するのに費やした多くの時間の欲求を惜しまないことを願っています。この問題は、COMPLEXタイプとSIMPLEタイプをサーバーに送信することの違いを知ることに関するものです。ほとんどの私の開発では、「複雑な」タイプを使用しています（シリアル化されたデータをビューモデルまたはデータ転送オブジェクトに送信します）。このまれなケースでは、単純な型（文字列、整数、またはブール型の単一のデータ型パラメータ、私の場合は文字列の配列）を送信しています。

のWeb APIを行わなければならないの微調整のカップルを除いて、「複雑な」タイプとほとんど同じ方法で「シンプル」扱い：

1）あなたの「シンプル」タイプのパラメータの前に[FromBody]含めますあなたのWeb API関数で（パラメータの名前は関係ありませんあなたはあなたが欲しい、この任意の名前を付けることができ、それはあなたのセレクタの名前と一致する必要はありません。）：）

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

2をするためにあなたのAjax呼び出しを変更します空のデータパラメータを送信します。data：{''：rec}したがって、私の場合のコード全体は次のようになります。

ウェブ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); 
     } 
    }); 
});