Передача данных в модальный с помощью JavaScript

Question

пока у меня есть всплывающее окно с некоторыми деталями из моей модели. Он появляется, когда пользователь нажимает на элемент списка. Что я сделал, я добавил Modal в цикл foreach, который, как я знаю, не лучший способ сделать это. Он работает, но он создает модальный элемент списка ...

Есть ли способ иметь модальный вне цикла foreach и просто заполнять контент на событие click?

Это моя модальный: и петля Еогеаспа

@foreach (var item in Model.Where(p => p.CurrentStatus == "Start" && p.member == "budyn")) 
      { 
       <!-- Modal --> 
       <div class="modal fade" id="myModal" 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">@item.JobID</h4> 
          </div> 
          <div class="modal-body"> 
           <p>@item.JobTitle</p> 
           <!-- etc... --> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
         </div> 

        </div> 
       </div> 
       <li class="list-group-item"> <a data-toggle="modal" data-target="#myModal">@item.JobID @item.JobTitle </a> </li> 

      } 

Answer 1

Здесь Вы можете продолжить подобные.

Ваш список строк

@foreach (var list in Model) 
{  
    //You can put other rows data like data-id and get them on popup open     
    <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id="@list.PrimaryKey">Click</button> 

} 

Ваш модальный снаружи петли

<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">Details</h4> 
         </div> 
         <div class="modal-body"> 
          <input id="primaryKeyValue"> 
         </div> 
         <div class="modal-footer"> 
          <form asp-controller="Billing" asp-action="Delete" method="post" class="form-inline" role="form"> 
<input type="hidden" id="id"> 
           <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 

модальных открытой

$(document).ready(function() { 
      $('#myModal').on('show.bs.modal', function (event) { 
       var button = $(event.relatedTarget);//Button which is clicked 
       var clickedButtonId= button.data('id'); 

       $("input #primaryKeyValue").val(clickedButtonId); 

// If there are many values you want to show or want to make ajax call, you can do it here, and then setthem inside modal(popup) 

     }); 

см для более подробной информации о начальной загрузке событиях https://getbootstrap.com/javascript/#modals-related-target