ASP.NET MVC AJAXフォームSubmit/PostアクションでListBoxFor/MultiSelectListを消失して送信する

Question

私のselectedActiveRolesとselectedInactiveRolesは、Ajax経由でサブミットするときに私のビューモデルの一部としてコントローラに送られず、特にこれに対処するものが見つかりませんでした。私がちょうどフォームを投稿していたとき、それはうまくいきました。

マイ形式：

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "editForm", @class = "form-horizontal" })) 
{ 
    <div class="row"> 
     <div id="dualListBoxContainer"> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label">Available Roles:</label> 
       <div class="col-xs-8 input-group"> 
        @Html.ListBoxFor(model => model.SelectedInactiveRoles, new MultiSelectList(Model.InactiveRoles, "RoleId", "Description", @Model.SelectedInactiveRoles), new { @class = "form-control", name = "inactiveRoles", multiple = "multiple", size = 5 }) 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 text-center"> 
        <button type="button" class="btn btn-sm btn-primary" id="addRole"> <i class="fa fa-arrow-down"></i> Add </button> 
        &nbsp; &nbsp; &nbsp; 
        <button type="button" class="btn btn-sm btn-primary" id="removeRole"> Remove <i class="fa fa-arrow-up"></i> </button> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-2 control-label">Active Roles:</label> 
       <div class="col-xs-8 input-group"> 
        @Html.ListBoxFor(model => model.SelectedActiveRoles, new MultiSelectList(Model.ActiveRoles, "RoleId", "Description", @Model.SelectedActiveRoles), new { @class = "form-control", name = "activeRoles", multiple = "multiple", size = 5 }) 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-xs-8 col-xs-offset-2 text-right"> 
        <button type="submit" class="btn btn-primary" id="saveChanges">Save Changes &nbsp;<i class="fa fa-save"></i></button> 
       </div> 
      </div> 

     </div> 
    </div> 
} 

モデル：

public class MyViewModel 
    { 
     public User User { get; set; } 
     public Client Client { get; set; } 
     public IEnumerable<Role> ActiveRoles { get; set; } 
     public IEnumerable<Role> InactiveRoles { get; set; } 
     public IList<int> SelectedActiveRoles { get; set; } 
     public IList<int> SelectedInactiveRoles { get; set; } 
    } 

JS/jQueryの：

$('#editForm') 
    .submit(function(e) { 
     e.preventDefault(); 

     // modifies the 'selected' options on the list 
     // before finally being submitted by the browser 
     $('#SelectedInactiveRoles, #SelectedActiveRoles') 
      .prop('selected', true); 

     $.ajax({ 
      url: $("#editForm").attr('action'), 
      type: 'post', 
      data: $(this).serialize(), 
      success: function() { 

       $("#modalContainer") 
        .fadeOut(500, 
         function() { 
          $("#modalContainer").empty(); 
         }); 
      } 
     }); 
    }); 

コントローラー：

public ActionResult Edit([Bind] MyViewModel) 
     { 
       return null; 
     } 

Answer 1

$(this).serialize(),のthisは、フォームではなくajaxリクエストであるため、有効なデータはコントローラに送信されません。 ajax呼び出しの前にフォームデータをシリアル化する必要があります

$('#editForm').submit(function(e) { 
    var formData = $(this).serialize(); 
    .... 
    $.ajax({ 
     .... 
     data: formData, 
     success: function() { 

ただし、コードには他にも多くの問題があります。

あなたListBoxFor()コードは、メソッド はすでにそれを追加しますので、multiple="multiple"を追加しても意味がありません

@Html.ListBoxFor(m => m.SelectedInactiveRoles, 
    new SelectList(Model.InactiveRoles, "RoleId", "Description"), 
    new { @class = "form-control", size = 5 } 
) 

1. でなければなりません。
2. それは 絶対に何もしないので、何のポイントはname= "inactiveRoles"を追加することはありません - HTMLをあなたの生成を検査し、あなたは そのname="SelectedInactiveRoles"、ない name="inactiveRoles"は（幸運であるそうあなたが モデルにつながるname属性をオーバーライドすることができていることがわかります が選択されているかを決定財産の価値、あなたは第四 パラメータに好きな値を入れることができますし、あなたが表示されます（ - SelectListを生成するときに失敗 ）
3. を結合することはない点は、4番目のパラメータを追加することはありませんそのはListBoxFor() 法では無視するもの）

最後に、$('#SelectedInactiveRoles, #SelectedActiveRoles').prop('selected', true);（それは意味がないし、全く何もしない）と、お使いのコントローラメソッドから[Bind]属性を削除します。