1.7.1.Calling an API using jQuery

• 1.Add ID and class for table and button:

  • You can use "data-" prefix

    <table id ="customers" class="table table-bordered table-hover">
    <tr>
      <th>Customer</th>
      <th>Discount rate</th>
      <th>Delete</th>
    </tr>
    @foreach (var customer in Model)
    {
      <tr>
          <td>
              <a href="@Url.Action("Edit", "customers", new { id = customer.Id })">@customer.Name</a>
          </td>
          <td>@customer.membershipType.Name</td>
          <td>
             <button data-customer-id="@customer.Id" class ="btn-link js-delete">Delete</button>
          </td>
      </tr>
      }
    </table>

• 2.Add jQuery function binding to the button, you can add to @section scripts directly

    @section scripts
    {
   <script>
   $(document).ready(function () {
    $("#customers .js-delete").on("click", function () {
     var button = $(this);
  
     if (confirm("Are you want to delete this customer?")) {
      $.ajax({
       url: "/api/customers/" + button.attr("data-customer-id"),
       method: "DELETE",
       success: function () {
        button.parents("tr").remove();
        console.log("sucess");
       }
      });
     }
    });
   });
  </script> 
  }