Модальный в asp.net view не работает должным образом

Question

В моем строго типизированном представлении я перебираю список объектов, поступающих из базы данных. Каждый из этих объектов представлен в jumbotron, который имеет кнопку «Had role before». При нажатии мода мода открывается, и там я хочу ввести некоторые данные в поля ввода и сохранить их в моей базе данных с помощью вызова ajax. Одна часть данных, которую я хочу ввести, - это уникальный идентификатор, который имеет каждый объект в цикле. С кодом, который у меня до сих пор мне удалось щелкнуть, чтобы получить идентификатор первого объекта, но когда я нажимаю кнопки для остальных объектов, ничего не происходит.

Это сценарий, на мой взгляд:

<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 петлю и внутри нее вы create элементы кнопки с таким же id.

<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. Это неправильно, и именно поэтому вы получаете такое поведение (только первая кнопка работает). Решение: вместо этого используйте классы.