asp.netビューのモーダルが正しく機能しない

Question

私の強く型付けされたビューでは、データベースから来るオブジェクトのリストをループしています。これらのオブジェクトのそれぞれはジャンボトロンに表示されます。ジャンボトロンには「前に役割があります」というボタンがあります。クリックするとモーダルが開き、そこにいくつかのデータを入力ボックスに入力し、それをajax呼び出しでデータベースに保存します。入力したいデータの一部は、ループ内の各オブジェクトに固有のIDです。私が今まで持っていたコードでは、最初のオブジェクトのIDを取得するためにクリックして管理しましたが、残りのオブジェクトのボタンをクリックしても何も起こりません。

これが私の見解ではスクリプトです：

<script type="text/javascript"> 
    $(document).ready(function() { 

    $(function() { 

     var idW; 
    $('#mdl').on('click', function() { 
     var parent = $(this).closest('.jumbotron'); 
     var name = parent.find('input[name="mdlname"]').val(); 
     var id = parent.find('input[name="mdlwrid"]').val(); 
     var idW = id; 

     console.log(idW); 
     var titleLocation = $('#myModal').find('.modal-title'); 
     titleLocation.text(name); 

     $('#myModal').modal('show'); 

    }); 
}); 

    $('#mdlSave').on('click', function() { 
     console.log('x'); 
     addPastRoleAjax(); 

    }); 
    function addPastRoleAjax() { 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("addPastRole", "WorkRoles")', 
      dataType: "json", 
      data: { 

       wrId: idW, 
       dateStart: $("#wrdateStart").val(), 
       dateEnd: $("#wrknamedateEnd").val() 


      }, 
      success: successFunc 
     }); 

     function successFunc(data, status) { 


      if (data == false) { 
       $(".alert").show(); 
       $('.btn').addClass('disabled'); 

       //$(".btn").prop('disabled', true); 
      } 

     } 


</script> 

ループ：

@foreach (var item in Model) 
{ 

    <div class="jumbotron"> 
     <input type="hidden" name="mdlwrid" value="@item.WorkRoleId" /> 
     <input type="hidden" name="mdlname" value="@item.RoleName" /> 

     <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1> 
     <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p> 
     <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p> 
     <p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p> 
    </div> 

} 

モーダル：

<div id="myModal" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
      <input id="wrdateStart" class='date-picker' /> 
      <input id="wrknamedateEnd" class='date-picker' /> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" id="mdlSave" class="btn btn-default" data-dismiss="modal">Save</button> 
     </div> 
    </div> 
</div> 

Answer 1

あなたの問題は、次の作品でありますコード：

@foreach (var item in Model) 
    { 
     <div class="jumbotron"> 
      <input type="hidden" name="mdlwrid" value="@item.WorkRoleId" /> 
      <input type="hidden" name="mdlname" value="@item.RoleName" /> 
      <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1> 
      <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p> 
      <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p> 
      <p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p> 
     </div> 
    } 

あなたはforeachループを使用し、同じidとそれあなたcreateボタン要素の内側います。だから、

<button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> 

、foreachは同じidで多くのボタンを作成するようにしましょう。それは間違っているので、あなたはその行動（最初のボタンの仕事のみ）を得るのです。 解決策：代わりにクラスを使用してください。