title: How to create bootstrap 4 confirmation modal for delete in ASP.NET MVC
body: <p>I'm having trouble creating bootstrap confirmation modal in ASP.NET MVC. I've managed to successfully call modal when clicking on delete link inside view, but when I want to confirm, nothing happens.</p>
  
  <p>Index View()</p>
  
  <pre><code>&lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  &lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.CurrentGrade.GradeName)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Name)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Surname)
          &lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.CurrentGrade.GradeName)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Name)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Surname)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
              @Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
              @Html.ActionLink("Delete", "Delete", new { id=item.StudentId }, new { @class="element", @data_toggle = "modal", @data_target = "#exampleModalCenter" })
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is modal that I'm calling:</p>
  
  <pre><code>&lt;div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&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;h6&gt;Are you sure that you want to delete this?&lt;/h6&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger"&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally, here is my simple js script. </p>
  
  <pre><code>    $(document).ready(function () {
          $('.element').click(function (e) {
  
              $('#exampleModalCenter').modal('show');
              if (confirm) {
                  return true;
              } else {
                  return false;
              }
          });
  });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried edit js code according to link that Soham provided but without any luck.</p>
  
  <pre><code>$(document).ready(function () {
          $('#exampleModalCenter').on('show.bs.modal', function (e) {
              $(this).find('.btn-danger').attr('href', $(e.relatedTarget).data('href'));
              $('.debug-url').html('Delete URL: &lt;strong&gt;' + $(this).find('.btn-danger').attr('href') + '&lt;/strong&gt;');
          });
      });
  </code></pre>
  
  <p>Maybe problem lies in @Html.ActionLink for Delete?</p>
  
  <pre><code> @Html.ActionLink("Delete", "Delete", new { id = item.StudentId }, new { @data_toggle = "modal", @data_target = "#exampleModalCenter" })
  </code></pre>