I'm facing an issue with passing an ID to my modal.
My goal is to have the details of an event displayed in the modal when the corresponding link (which represents the event) is clicked. However, I'm struggling to retrieve the ID and show the event name in the modal...
I tried implementing a solution from a post on Stack Overflow, but unfortunately, the outcome remains negative...
@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">×</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>
}