ASP.NET MVC AJAX Formular Absenden verlieren ListBoxFor/MultiSelectList bei senden/post Aktion

Question

Meine selectedActiveRoles und selectedInactiveRoles kommen nicht durch den Controller als Teil meines Ansichtsmodells beim Senden über Ajax und ich habe nichts gefunden, das dies spezifisch angeht. Es funktionierte gut, als ich gerade das Formular posten wollte.

Meine Form:

@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> 
} 

Modell:

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

Controller:

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

Answer 1

Sie senden keine gültigen Daten an die Steuerung, da in $(this).serialize(),, this die Ajax-Anfrage, nicht das Formular ist. Sie müssen die Formulardaten vor dem Ajax-Aufruf serialisieren

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

Allerdings gibt es zahlreiche andere Probleme mit Ihrem Code.

sollte Ihr ListBoxFor() Code

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

1. Es gibt keinen Punkt sein multiple="multiple" Zugabe, weil die Methode bereits hinzufügen.
2. Es gibt keinen Punkt Hinzufügen name= "inactiveRoles" weil es absolut nichts tut - dem HTML-Ihrem Stromerzeuger überprüfen und Sie werden sehen, dass sein name="SelectedInactiveRoles", nicht name="inactiveRoles" (was sonst das Glück, Sie das name Attribut außer Kraft setzen könnten, die in Modell führen würden Bindung versagt)
3. es keinen Sinn, den 4. Parameter hinzuzufügen, wenn die SelectList Erzeugung - dessen den Wert der Eigenschaft, die, was ausgewählt bestimmt (Sie können setzen, was Werte, die Sie in der 4. Parameter wollen, und Sie werden sehen, dass sein nach der Methode ListBoxFor() ignoriert)

Schließlich entfernen $('#SelectedInactiveRoles, #SelectedActiveRoles').prop('selected', true); (es macht keinen Sinn, und tut nichts) und das [Bind] Attribut aus dem Controller-Methode.