Bootstrap 模态传递 ID 无效

Question

我在模态中传递 id 时遇到问题。

我想要做的是，通过单击 link（对应于一个事件），它会打开该事件的详细信息。但是我无法在我的模态中获取 ID 并显示 nefusque 这个事件的名称 ...

受到Passing data to a bootstrap modal的启发，但结果还是否定的...

@model jak.formulaire.Models.Events

<div class="container">
    @* Datatable of Events member *@
    <div>
        <table id="example" class="table table-hover" style="width:100%; margin-top:2%">
            <thead>
                <tr>
                    <th scope="col">Event Name</th>
                    <th scope="col">Start Date</th>
                    <th scope="col">End Date</th>
                    <th scope="col">Status</th>

                </tr>
            </thead>
        </table>
    </div>
</div>

@* Modal Details *@
<div class="modal" role="dialog" id="myModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Details</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div id="myModalContent">
                    <form id="myForm">
                        <div class="form-horizontal">
                            <div class="form-group">
                                @Html.LabelFor(model => model.Event_Name, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-8">
                                    @Html.EditorFor(model => model.Event_Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Name", @id = "Name" } })
                                </div>
                                @Html.ValidationMessageFor(model => model.Event_Name, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </form>
                </div>


                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

    <script>
        $(document).ready(function () {
            $('#example').DataTable({

                ajax: {
                    "url": '@Url.Action("GetHistoric", "Events")',
                    "dataSrc": "",
                    "type": "GET",
                    "datatype": "json"
                },
                columns: [
                    {
                        'data': 'Name', "render": function (data) {
                            return '<a href="#" class="open-Details" data-toggle"modal" data-id="' + data + '" id="' + data + '">' + data + '</a>';
                        },
                    },
                    { 'data': 'Date_Begin_cU' },
                    { 'data': 'Date_End_cU' },
                    { 'data': 'Status' },

                ],
                "paging": false,
                "info": false,
                "searching": false
            });
            $(document).on("click", ".open-Details", function () {
                $('#Name').val(this.id);
                $('#myModal').modal('show');
            });


        });
    </script>
}

Answer 1

你有：

data-id="data" id="' + data + '"

在您尝试从数据属性获取 ID 时写入您的 jquery 代码，即：

$('#Name').val($(this).data('id'));

应该是这样的：

data-id="'+data+'" id="' + data + '"

所以整行是：

return '<a href="#" class="open-Details" data-toggle"modal" data-id="'+data+'" id="' + data + '">' + data + '</a>';

现在如下：

$('#Name').val($(this).data("id"));

可以正常工作。

您需要设置 data 变量而不是 "data" 文字或使用 this.id 如：

$('#Name').val(this.id);

Bootstrap 模态传递 ID 无效

Bootstrap Modal pass an ID is not working

javascript

asp.net-mvc

asp.net-ajax

bootstrap-4