Problem to send ajax request to delete item (Returns not found!).[Answered] RSS

• • Reply
  hamed_1983

  Member

  37 Points

  281 Posts

  Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 07:28 PM|hamed_1983|LINK

  Hi

  in my form, i have a list of orders which user can click on delete button to delete each order of specific person. here is my orders list :

  @model IEnumerable<Orders>
  
  <input type="hidden" id="hdnPersonName" value="@ViewData["_personName"]" />
  <button type="button" id="btnNew" class="btn btn-success btn-sm" onclick="newOrderItem(@((int)ViewData["_personID"]))">Create new</button>
  <br />
  <table class="table table-bordered">
      <tr>
          <th>Order ID</th>
          <th>Order Number</th>
          <th>Order Date</th>
          <th>Commands</th>
      </tr>
      @if (Model != null)
      {
          foreach (var item in Model)
          {
              <tr>
                  <td>@item.OrderId</td>
                  <td>@item.OrderNumber</td>
                  <td>@item.OrderDate.Value.ToShamsiDate()</td>
                  <td>
                      <input type="button" id="btnEdit" class="btn btn-warning btn-sm" onclick="editOrderItem(@item.OrderId)" value="Edit" />
                      <input type="button" id="btnDelete" class="btn btn-danger btn-sm" onclick="deleteOrderItem(@item.OrderId)" value="Delete" />
                  </td>
              </tr>
          }
      }
  </table>
  
  <div id="divPopup"></div>

  As you can see in above code, The btnDelete button call 'deleteOrderItem' javascript to delete order as follow :

  function deleteOrderItem(orderID) {
      debugger;
      if (confirm('Are you sure want to delete this item?')) {
          $.ajax({
              type: "POST",
              url: "@Url.Action('DeleteOrder','Home')",
              contentType: "application/json; charset=utf-8",
              data: "{ 'id': '"+orderID+"' }",
              success: function () {
                  setTimeout(function () {
                      debugger;
                      var personID = $('#hdnPersonID').val();
                      var personName = $('#hdnPersonName').val();
                      viewItem(personID, personName);
                  }, 500)
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
      }
  }

  And here is my action code method to delete order from database :

  / POST: Orders/Delete/5
          public async Task<IActionResult> DeleteOrder(int id)
          {
              var orders = await _dbContext.Orders.FindAsync(id);
              _dbContext.Orders.Remove(orders);
              await _dbContext.SaveChangesAsync();
              return Content(id.ToString());
          }

  But at runTime it does not works. when i run on debugging mode (set breakPoint in DeleteOrder action method) it does not fire & i think it can not find my action (or something else).

  Can anybody help me where is my problem & how to solve it?

  Thanks in advance

• • Reply
  DA924

  Contributor

  4983 Points

  4265 Posts

  Re: Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 08:29 PM|DA924|LINK

  Where is the HTTPPost attribute over the DeleteOrder(int id) method?

  https://www.tutorialsteacher.com/mvc/actionverbs-in-mvc

  If you find the post has answered your issue, then please mark post as 'answered'.
• • Reply
  hamed_1983

  Member

  37 Points

  281 Posts

  Re: Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 08:48 PM|hamed_1983|LINK

  Thanks for reply

  i've add HTTPPost attribute in my action method as follow :

  [HttpPost]
          public async Task<IActionResult> DeleteOrder(int id)
          {
              var orders = await _dbContext.Orders.FindAsync(id);
              _dbContext.Orders.Remove(orders);
              await _dbContext.SaveChangesAsync();
              return Content(id.ToString());
          }

  But still i'm facing the same result!

• • Reply
  DA924

  Contributor

  4983 Points

  4265 Posts

  Re: Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 09:37 PM|DA924|LINK

  https://docs.microsoft.com/en-us/previous-versions/windows/desktop/legacy/hh968260(v%3Dvs.85)

  You can depress F12-key and use the F12 developer tools. You can use the Network tab and examine the URL that was sent by Ajax to access the action method. If the URL is not right, then it will not find the action method. The parm you trying to pass on the URL has to be in the right format too, otherwise you'll get the not found.

  If you find the post has answered your issue, then please mark post as 'answered'.
• • Reply
  hamed_1983

  Member

  37 Points

  281 Posts

  Re: Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 09:52 PM|hamed_1983|LINK

  Thanks for reply

  Yes! as u told i've checking in network tab & find out the url has problem! so, i've change my javascript function as follow :

  function deleteOrderItem(orderID) {
      debugger;
      if (confirm('Are you sure want to delete this item?')) {
          $.ajax({
              type: "POST",
              url: "DeleteOrder",
              contentType: "application/json; charset=utf-8",
              data: "{ 'id': '"+orderID+"' }",
              success: function () {
                  setTimeout(function () {
                      debugger;
                      var personID = $('#hdnPersonID').val();
                      var personName = $('#hdnPersonName').val();
                      viewItem(personID, personName);
                  }, 500)
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
      }
  }

  Now, this request send to my action method, but the parameters (which set as data in ajax request) not sent!

  Where is the problem?

  Thanks

• • Reply
  DA924

  Contributor

  4983 Points

  4265 Posts

  Re: Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 10:30 PM|DA924|LINK

  Try it see if it works.

  function deleteOrderItem(orderID) {
      if (confirm('Are you sure want to delete this item?')) {
          $.ajax({
              type: "POST",
              url: "DeleteOrder?id=" + orderID,
              success: function () {
                  setTimeout(function () {
                      debugger;
                      var personID = $('#hdnPersonID').val();
                      var personName = $('#hdnPersonName').val();
                      viewItem(personID, personName);
                  }, 500)
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
      }
  }

  If you find the post has answered your issue, then please mark post as 'answered'.
• • Reply
  hamed_1983

  Member

  37 Points

  281 Posts

  Re: Problem to send ajax request to delete item (Returns not found!).

  Apr 25, 2020 10:34 PM|hamed_1983|LINK

  Thanks for reply

  I've used this code & it works :

  function deleteOrderItem(orderID) {
      if (confirm('Are you sure want to delete this item?')) {
          $.ajax({
              type: "POST",
              url: "DeleteOrder",
              data: { id: orderID },
              success: function () {
                  setTimeout(function () {
                      debugger;
                      var personID = "@ViewData['_personID']";
                      var personName = $('#hdnPersonName').val();
                      viewItem(personID, personName);
                  }, 500)
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  alert(jqXHR.responseText);
              }
          });
      }
  }

  As u see in my above code, I've changed data parameters & remove qutation mark!

  Best regards