Zeige Modal auf Dropdown-Liste Auswahl

Question

Ich habe ein Modal mit einer Dropdown-Liste, auf Auswahl/Onchange-Ereignis Ich möchte die neue Ansicht in einem modalen angezeigt werden. Ich habe this solution für die Implementierung mehrerer modal Overlays verwendet und habe versucht, von Onclick zu auf Änderung die Javascript ändern, aber es gab kein Glück

Meine Teilansicht

@using (Html.BeginForm("GameAssignerTable", "Admin", FormMethod.Post, new {role = "form"})) 
{ 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span></button> 
     <h3 class="modal-title">Select Investigator Group</h3> 
    </div> 
    <div class="modal-body"> 
     @Html.DropDownListFor(m => m.SelectedGroupUserId, Model.GroupList, "Select Investigator Group", new { @class = "form-control modal-link3", onchange = "this.form.submit();" }) 
    </div> 
} 

Meine Layoutseite

<div class="container"> 
    <div class="row"> 
     <div id="modal-container3" class="modal fade" tabindex="-1" role="dialog"> 
      <div class="modal-dialog"> 
       <div class="modal-content col-sm-8 col-lg-offset-2"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
     $(document).on('show.bs.modal', '.modal', function() { 
      var zIndex = 1040 + (10 * $('.modal:visible').length); 
      $(this).css('z-index', zIndex); 
      setTimeout(function() { 
       $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); 
      }, 0); 
     }); 

     // Initialize popover 
     $(function() { 
      $('[data-toggle="popover"]').popover({ html: true }); 
     }); 

     // Used for modals 
     $(function() { 
      // Initialize modal dialog 
      // attach modal-container bootstrap attributes to links with .modal-link class. 
      // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog. 

      $('body').on('change', '.modal-link3', function (e) { 
       e.preventDefault(); 
       $(this).attr('data-target', '#modal-container3'); 
       $(this).attr('data-toggle', 'modal'); 
      }); 

      // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
      $('body').on('click', '.modal-close-btn', function() { 
       $('#modal-container').modal('hide'); 
      }); 
      //clear modal cache, so that new content can be loaded 
      $('#modal-container3').on('hidden.bs.modal', function() { 
       $(this).removeData('bs.modal'); 
      }); 
      $('#CancelModal').on('click', function() { 
       return false; 
      }); 
     }); 

    </script> 

Answer 1

Ich würde empfehlen, die JS wie die anderen zu einem Handler zu ziehen und folgendes zu tun:

$("#@Html.IdFor(m => m.SelectedGroupUserId)").on("change", function(e) { 
    $(this).closest("form").trigger("submit"); 
}); 

Beachten Sie, dass dies das Formular absendet und zur Aktion zurückgibt. Diese Aktion würde dann eine Art von Sichtweise zurückgeben, um die Ergebnisse zu zeigen. Sie haben ein anderes Modal angegeben, aber ein synchrones Postback wird Sie von Ihrer aktuellen Ansicht wegbringen.