删除记录后如何在不刷新视图的情况下发布表数据? [英] How to post table data without refreshing my view after removing a record?

问题描述

我正在编写一个电影应用程序，允许您租借电影(类似于Redbox).我有一个包含表格的CheckOut购物车视图.每个表格行都有一个删除按钮，该按钮使用AJAX删除视图中的元素，并更新应用程序使用的SQL数据库.从购物车中删除任何物品后，用户应该能够单击购买"并处理购物车中剩余的物品，而无需刷新页面.

I am writing a movie app that allows you to rent movies (similar to Redbox). I have a CheckOut cart view containing a table. Each table row has a remove button which uses AJAX to delete element in the view and also update the SQL database that the app works with. After removing any items from the cart, the user should be able to click 'purchase' and process the items that were left in the cart, all without needing to refresh the page.

我有一个包含OrderDetails列表的Order模型.每个OrderDetails项目都有有关电影的信息.表是填充OrderDetails列表中的数据的.

I have an Order model containing a list of OrderDetails. Each OrderDetails item has information about a movie. It is data from OrderDetails list that the table is populated with.

当我从购物车中删除物品并尝试使用表格中的值过帐表单时，就会出现问题.我的CheckOut HttpPost控制器方法接收了该模型，但是OrderDetail列表仍然具有它在我从购物车中删除商品之前最初拥有的商品计数.从逻辑上讲，没有数据绑定到属性，因为我删除了每条记录中的隐藏标签.

The issue comes in when I remove items from cart and try to post the form with the values in the table. My CheckOut HttpPost controller method receives the model, but the OrderDetail list still has the item count it originally had before I removed items from cart. Logically, there is no data bound to the properties since I deleted the hidden tags I had in each record.

因为列表包含我不需要的元素，所以处理列表会导致垃圾数据进入数据库.

Because the list contains elements I don't need, processing the list results in garbage data going into the database.

我试图在CheckOut HttpPost方法开始处理列表之前，先删除其垃圾元素.这很好用，但是我不想在发布表单后删除CheckOut方法中的任何内容.我希望列表中不包含元素.

I tried to simply remove the garbage elements within my CheckOut HttpPost method before it begins processing the list. This worked great but I don't want to have to remove anything in the CheckOut method after posting the form. I'm expecting the list to not contain the elements.

CheckOut POST方法:

CheckOut POST method:

[HttpPost]
public IActionResult CheckOut(Order order)
{         
    if (ModelState.IsValid == false)
    {
        return View("CheckOut", order);
    }

    foreach (var orderDetailObj in order.OrderDetailsList)
    {
        _checkOutService.StoreMoviesInOrder(GetConnectionString(), order.OrderId, orderDetailObj);
    }

    return RedirectToAction("PurchaseSummary", new { Id = order.OrderId });
}

CheckOut.cshtml视图:

CheckOut.cshtml view:

@model MovieContract.Order

...

@for (int i = 0; i < Model.OrderDetailsList.Count; i++)
{
    <tr>
        <td>
            <input type="button" name="btnRemove" class="removeButton" value="Remove" onclick="Remove(this, '@Model.CartId', @Model.OrderDetailsList[i].Movie.FilmId)" />
        </td>
        <td hidden>
            <input asp-for="@Model.OrderDetailsList[i].Movie.AddedToCart" value="@Model.OrderDetailsList[i].Movie.AddedToCart" hidden />
        </td>
        <td hidden>
            <input asp-for="@Model.OrderDetailsList[i].Movie.FilmId" value="@Model.OrderDetailsList[i].Movie.FilmId" hidden />
        </td>
        <td>
            <input asp-for="@Model.OrderDetailsList[i].Movie.FilmName" value="@Model.OrderDetailsList[i].Movie.FilmName" hidden />
            @Model.OrderDetailsList[i].Movie.FilmName
        </td>
        <td>
            <input asp-for="@Model.OrderDetailsList[i].Movie.GenreName" value="@Model.OrderDetailsList[i].Movie.GenreName" hidden />
            @Model.OrderDetailsList[i].Movie.GenreName
        </td>
        <td>
            <input asp-for="@Model.OrderDetailsList[i].Movie.PricePerDay" value="@Model.OrderDetailsList[i].Movie.PricePerDay" class="pricePerDay" hidden />
            @Html.DisplayFor(modelItem => @Model.OrderDetailsList[i].Movie.PricePerDay)
        </td>
        <td hidden>
            <input asp-for="@Model.OrderDetailsList[i].Movie.AmountOnHand" value="@Model.OrderDetailsList[i].Movie.AmountOnHand" hidden />
        </td>
    </tr>
}

对于AJAX，我只是拥有一个调用后控制器方法的AJAX函数.该方法从数据库中删除适当的项目，并返回NoContent();.成功后，AJAX将从视图中删除所需的行.

As for AJAX, I simply have an AJAX function that calls a post controller method. The method deletes the appropriate item from the database and returns NoContent();. Upon success, AJAX deletes the desired row from the view.

我希望在到达CheckOut HttpPost方法时，如果我决定从购物车中删除任何元素，则该参数对象的list属性将包含较少的元素.我不需要每次从购物车中删除物品时都需要刷新整个页面来重建模型.

I expect that by the time I reach the CheckOut HttpPost method, the parameter object's list property will contain less elements if I had decided to remove any from the cart. I don't want to have to refresh the whole page to rebuild my model each time I remove an item from the cart.

推荐答案

这是一个有效的演示:

1. 查看

@model AjaxDeleteItem.Models.Order

<div>
<form method="post" asp-action="CheckOut">
<table class="table" id="table">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.OrderDetailsList.Count; i++)
        {
            <tr class="count">
                <td>
                    <input type="button" name="btnRemove" class="removeButton" value="Remove" onclick="Remove(this, @Model.OrderDetailsList[i].Id)" />
                </td>
                <td >
                    <input class="FilmId" asp-for="@Model.OrderDetailsList[i].Movie.FilmId" value="@Model.OrderDetailsList[i].Movie.FilmId" />
                </td>
                <td >
                    <input class="FilmName" asp-for="@Model.OrderDetailsList[i].Movie.FilmName" value="@Model.OrderDetailsList[i].Movie.FilmName" />

                </td >
                <td>
                    <input class="GenreName" asp-for="@Model.OrderDetailsList[i].Movie.GenreName" value="@Model.OrderDetailsList[i].Movie.GenreName" />

                </td>
                <td>
                    <input class="PricePerDay" asp-for="@Model.OrderDetailsList[i].Movie.PricePerDay" value="@Model.OrderDetailsList[i].Movie.PricePerDay"  />

                </td>
            </tr>
        }
    </tbody>
</table>
<input type="submit" value="Submit"/>
</form>

</div>


@section Scripts
{
<script>
function Remove(obj,id) {
$.ajax({
    type: "post",
    url: "/orders/deleteorderitem?id="+id,
    success: function () {
        $(obj).closest('tr').remove();
        var count = $(" tbody tr").length;
        var i = 0;
        $("tbody tr").each(function () {
             var row = $(this);
                if (i < count)
                {
                    row.find("input[class=FilmId]").attr("name", "OrderDetailsList[" + i + "].Movie.FilmId");
                    row.find("input[class=FilmName]").attr("name", "OrderDetailsList[" + i + "].Movie.FilmName");
                    row.find("input[class=GenreName]").attr("name", "OrderDetailsList[" + i + "].Movie.GenreName");
                    row.find("input[class=PricePerDay]").attr("name", "OrderDetailsList[" + i + "].Movie.PricePerDay");
                    i++;
                }                       
            });                       
    },
    error: function () {
        alert("Fail to delete");
    }
});
}
</script>
}

2.Controller:

2.Controller:

    [HttpPost]
    public async Task<IActionResult> DeleteOrderItem(int id)
    {
        var orderdetail = await _context.OrderDetails.FindAsync(id);
        _context.OrderDetails.Remove(orderdetail);
        await _context.SaveChangesAsync();
        return NoContent();
    }

    [HttpPost]
    public IActionResult CheckOut(Order order)
    {
        if (ModelState.IsValid == false)
        {
            return View("Details", order.CartId);
        }

        //the stuff you want
    }

3.结果 :

这篇关于删除记录后如何在不刷新视图的情况下发布表数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！