Javascript 引导模式传递ID无效

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

我想做的是，通过点击链接（对应于一个事件），它会打开这个事件的详细信息。 但我无法获取id并在模式中显示此事件的名称

我受到了启发，但结果仍然是负面的

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

@model jak.formulaire.Models.Events
@*事件成员数据表*@
事件名称
开始日期
结束日期
地位
@*模态细节*@
细节
&时代；
@LabelFor（model=>model.Event_Name，htmlAttributes:new{@class=“controllabel col-md-4”}）
@EditorFor（model=>model.Event_Name，new{htmlAttributes=new{@class=“form control”，@placeholder=“Name”，@id=“Name”}）
@Html.ValidationMessageFor（model=>model.Event_Name，“，new{@class=“text danger”}）
模态体文本在这里

保存更改
接近
@节脚本{
$（文档）.ready（函数（）{
$（'#示例'）。数据表({
阿贾克斯：{
“url”：“@url.Action（“GetHistorical”、“Events”），
“dataSrc”：“，
“类型”：“获取”，
“数据类型”：“json”
},
栏目：[
{
“数据”：“名称”，“呈现”：函数（数据）{
返回“”；
},
},
{“数据”：“开始日期”}，
{'data'：'Date_End_cU'}，
{“数据”：“状态”}，
],
“分页”：false，
“信息”：错误，
“搜索”：错误
});
$（文档）。在（“单击”，“打开详细信息”，函数（）{
$（'#Name'）.val（this.id）；
$（'myModal'）.modal（'show'）；
});
});
}

您有：

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>';

那就行了

您需要设置

数据

变量而不是

数据

文字，或者使用

此.id

如下：

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

你有：

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>';

那就行了

您需要设置

数据

变量而不是

数据

文字，或者使用

此.id

如下：

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

---

现在我只收到“UncaughtTypeError:$（…）.modal不是函数”并且我的modal没有打开，请猜猜看？这似乎是脚本错误，检查是否所有必需的js文件都加载正确Yokey，我必须使用javascript.Noconflict来避免此错误，现在我可以再次打开我的模式，但我的数据仍然没有传入我的模式感谢您的帮助，它工作得很好，必须将$（'Name'）更改为$（'Event_Name'）。。。快速提问，我的“id”实际上是我活动的名称，这不是一个问题吗？您正在执行

$（“name”）

？它应该是

$（'#Name'）

现在我只收到“uncaughttypeerror:$（…）.modal不是一个函数”并且我的modal没有打开，请猜猜看？这似乎是脚本错误，检查所有需要的js文件是否正确加载了Yokey，我必须使用javascript.Noconflict来避免这个错误，现在我可以再次打开我的模式，但我的数据仍然没有传入我的模式感谢您的帮助，它工作得很好，必须将$（'Name'）更改为$（'Event_Name'）。。。快速提问，我的“id”实际上是我活动的名称，这不是一个问题吗？您正在执行

$（“name”）

？它应该是

$（“#Name”）

您可能会发现这里的示例对datatables很有帮助：您可能会发现这里的示例对datatables很有帮助：