使用JavaScript将数据传递到模态 [英] Pass data into a Modal using JavaScript

问题描述

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

for now I have a pop up modal box with some details from my model. It pops up when a user clicks on a list item. What i did i have added the Modal into a foreach loop which i know is not the best way of doing it. It works but it creates a modal per list item...

有没有一种方法可以让模态在foreach循环之外，并仅在click事件中填充内容?

Is there a way of having the modal outside the foreach loop and just populating the content on click event?

这是我的模态:和foreach循环

This is my modal: and foreach loop

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

            }

推荐答案

在这里您可以像这样进行.

Here you can proceed like.

您的行列表

@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

这篇关于使用JavaScript将数据传递到模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！