且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用JavaScript将数据传递到模态

更新时间:2023-12-03 16:35:46

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

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