重新加载网页未按预期工作 asp.net MVC

Question

I need to delete a row from a list that is dynamic on click of a button, in order to do so I have used jquery to find the row index of the list, after doing this I use ajax to send the row index to a controller action where I delete the row from the list, this all works fine it is then supposed to reload the page as to show that the row has been deleted. However my reload page function isn't working properly, it never reloads the page on the first try but after I reload the page manually once it starts working for all subsequent deletes. I honestly have no idea why it is doing this.

Jquery and html:

<table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Name</td>
                        <td>@item.Quantity</td>
                        <td>@item.Price</td>
                        <td>@item.Total</td>
                        <td><button>delete</button></td>
                    </tr>
                }
            </tbody>
        </table>

<script type="text/javascript">
    $("table tr button").on('click', function () {
        var rowIndex = $(this).closest('td').parent()[0].sectionRowIndex;
        var f = {};
            f.url = '@Url.Action("RemoveFromCart", "Cart")';
            f.type = "POST";
            f.datatype = "json";
            f.data = JSON.stringify({ RowId: rowIndex });
            f.contentType = "application/json";
            $.ajax(f);
            window.location.reload(true);
    });
</script>

Code in controller:

        [HttpPost]
        public ActionResult RemoveFromCart(int RowId)
        {
            HomeController.cart.RemoveAt(RowId);
            return RedirectToAction("Cart");
        }

Answer 1

Wrap your jQuery event within a $(document).ready() method. You jQuery event is getting attached even before the DOM elements has loaded on the (ie Delete buttons on the rows) the page. Document ready will wait till the page has loaded completely and then attach 'click' event to the delete buttons.

$(document).ready(function() {
    $("table tr button").on('click', function () {
        var rowIndex = $(this).closest('td').parent()[0].sectionRowIndex;
        var f = {};
            f.url = '@Url.Action("RemoveFromCart", "Cart")';
            f.type = "POST";
            f.datatype = "json";
            f.data = JSON.stringify({ RowId: rowIndex });
            f.contentType = "application/json";
            $.ajax(f);
            window.location.reload(true);
    });
});

Answer 2

May be you want to more dynamic on page without reload page. First you need add to model of cart property Id .

And use this simple code:

    /// <summary>
    /// Model from post request
    /// </summary>
    public class ModelCart
    {
        public string Id { get; set; }
    }


[HttpPost]
        public ActionResult RemoveFromCart([FromBody] ModelCart cartInfo)
        {
            // Need to delete from cart by id
            //HomeController.cart.RemoveAt(cartInfo);
            HomeController.cart.Remove(items.FirstOrDefault(x => x.Id == cartInfo.Id));
            return RedirectToAction("Cart");
        }

In html:

 <table cellpadding="0" cellspacing="0" border="0">
        <tbody>
            @foreach (var item in Model.Items)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.Quantity</td>
                    <td>@item.Price</td>
                    <td>@item.Total</td>
                    <td><button data-id="@item.Id">delete</button></td>
                </tr>
            }
        </tbody>
    </table>

    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("table tr button").on('click',
                function () {
                    // Find id wich need to delete
                    var id = $(this).attr('data-id');

                    // Find element that will be delete after success response from server
                    var trObj = $(this).closest('tr');

                    $.ajax({
                        url: '@Url.Action("Reload", "Home")',
                        type: 'POST',
                        data: JSON.stringify({ id: id }),
                        dataType: "json",
                        contentType: "application/json",
                        success: function () {
                            // catch success respone and delete element
                            trObj.remove();
                        }
                    });
                });
        });
    </script>

If you need to reload page, i think you don't need to use ajax, just send post request. It is more simple and understanding.