引导模式传递ID不起作用

Question

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

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

我受到了将数据传递到引导模式的启发，但结果仍然是负面的。。。

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