使用 JavaScript 将数据传递到 Modal

Question

现在我有一个弹出模态框，其中包含我的模型的一些细节。当用户单击列表项时，它会弹出。 我做了什么，我将模态添加到一个 foreach 循环中，我知道这不是最好的方法。它可以工作，但它会为每个列表项创建一个模式...

有没有办法在 foreach 循环之外使用模态并在点击事件时填充内容？

这是我的模态：和 foreach 循环

@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