ドロップダウンリストの選択モーダルを表示する

Question

私は選択/ onchangeイベントのドロップダウンリストを含むモーダルを持っています。新しいビューをモーダルで表示したいと思います。私は複数のモーダルオーバーレイを実現するためにthis solutionを使用しているし、変更のにonclickのからJavaScriptを変更しようとしたが、運

マイ部分図

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

マイレイアウトページ

<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

JSを他のハンドラーと同じように引き出し、次のようにすることをお勧めします。

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

これは、フォームを送信してアクションにポストバックすることに注意してください。そのアクションは結果を表示するために何らかの種類のビューを返します。あなたは別のモーダルを示しましたが、同期ポストバックはあなたを現在のビューから遠ざけるでしょう。