title: Bootstrap Modal pass an ID is not working
body: <p>I have a problem to pass an id in my modal.</p>
  
  <p>What I'm trying to do is that by clicking on the link (which corresponds to an event) it opens the details of this event.
  But I can not get the id and display nefusque the name of this event in my modal ...</p>
  
  <p>I was inspired by <a href="https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal">Passing data to a bootstrap modal</a> but the result is still negative ...</p>
  
  <pre><code>@model jak.formulaire.Models.Events
  
  &lt;div class="container"&gt;
      @* Datatable of Events member *@
      &lt;div&gt;
          &lt;table id="example" class="table table-hover" style="width:100%; margin-top:2%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;Event Name&lt;/th&gt;
                      &lt;th scope="col"&gt;Start Date&lt;/th&gt;
                      &lt;th scope="col"&gt;End Date&lt;/th&gt;
                      &lt;th scope="col"&gt;Status&lt;/th&gt;
  
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @* Modal Details *@
  &lt;div class="modal" role="dialog" id="myModal"&gt;
      &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h4 class="modal-title"&gt;Details&lt;/h4&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  
                  &lt;div id="myModalContent"&gt;
                      &lt;form id="myForm"&gt;
                          &lt;div class="form-horizontal"&gt;
                              &lt;div class="form-group"&gt;
                                  @Html.LabelFor(model =&gt; model.Event_Name, htmlAttributes: new { @class = "control-label col-md-4" })
                                  &lt;div class="col-md-8"&gt;
                                      @Html.EditorFor(model =&gt; model.Event_Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Name", @id = "Name" } })
                                  &lt;/div&gt;
                                  @Html.ValidationMessageFor(model =&gt; model.Event_Name, "", new { @class = "text-danger" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
  
  
                  &lt;p&gt;Modal body text goes here.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @section Scripts{
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"&gt;
      &lt;script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function () {
              $('#example').DataTable({
  
                  ajax: {
                      "url": '@Url.Action("GetHistoric", "Events")',
                      "dataSrc": "",
                      "type": "GET",
                      "datatype": "json"
                  },
                  columns: [
                      {
                          'data': 'Name', "render": function (data) {
                              return '&lt;a href="#" class="open-Details" data-toggle"modal" data-id="' + data + '" id="' + data + '"&gt;' + data + '&lt;/a&gt;';
                          },
                      },
                      { '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');
              });
  
  
          });
      &lt;/script&gt;
  }
  </code></pre>