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

  • Question

  • User-79977429 posted

    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

    Saturday, April 25, 2020 7:28 PM

Answers

  • User-79977429 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 25, 2020 10:34 PM

All replies

  • User1120430333 posted

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

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

    Saturday, April 25, 2020 8:29 PM
  • User-79977429 posted

    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!

    Saturday, April 25, 2020 8:48 PM
  • User1120430333 posted

    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.

    Saturday, April 25, 2020 9:37 PM
  • User-79977429 posted

    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

    Saturday, April 25, 2020 9:52 PM
  • User1120430333 posted

    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);
                }
            });
        }
    }

    Saturday, April 25, 2020 10:30 PM
  • User-79977429 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 25, 2020 10:34 PM