Question

我正在研究asp.net MVC 4应用程序。我使用foreach循环创建了一个列表，并声明了一个变量来显示记录号。每行都有一个删除图标，单击该图标时，将删除该记录并隐藏该行。除了一个问题，这个工作正常。当用户删除第一条记录或列表中间的任何记录时，我希望所有行的记录号都能更新。

这是剃刀视图代码：

  @{ 

   int i = 1;
   foreach (var item in cartItem.CartItemsByStore)
   {
    <tr id="cartrow-@item.CartItemID">
        <td class="transaction">@i</td>
        <td class="item-details">
            <img src="/images/tmp/order-product.jpg" width="63" height="63">
            <div class="desc">
                <span>
                    <p>@item.ItemName</p>


                </span>
            </div>
        </td>
        <td class="date-time">15 Jun 2014</td>
        <td class="action">
            <a href="#" data-id="@item.CartItemID" class="removeCartItem delete" title="Delete">X</a>
        </td>
    </tr>
    <tr class="sp" id="sp-@item.CartItemID">
        <td colspan="20"></td>
    </tr>
    i++;
   }
  }

这是删除代码：

$(function () {
        // Document.ready -> link up remove event handler
        $(".removeCartItem").click(function () {
            if (confirm("Click OK if you want to delete this record; otherwise, click 'Cancel'")) {
                // Get the id from the link
                var recordToDelete = $(this).attr("data-id");
                if (recordToDelete != '') {
                    // Perform the ajax post
                    $.post("/Cart/DeleteCartItem", { "id": recordToDelete },
                        function (data) {
                            // Successful requests get here
                            $('#cartrow-' + recordToDelete).fadeOut('hide');
                            $('#sp-' + recordToDelete).fadeOut('hide');
                            $('#spCartCount').text(data);
                            $('#row-' + recordToDelete).fadeOut('hide');
                        });
                }
            }
        });

 });

Answer 1

试试这个

部分视图：“Store.csthml”

@model IEnumerable<CartItemsByStore>

@{ 

   int i = 1;
   foreach (var item in Model)
   {
    <tr id="cartrow-@item.CartItemID">
        <td class="transaction">@i</td>
        <td class="item-details">
            <img src="/images/tmp/order-product.jpg" width="63" height="63">
            <div class="desc">
                <span>
                    <p>@item.ItemName</p>


                </span>
            </div>
        </td>
        <td class="date-time">15 Jun 2014</td>
        <td class="action">
            <a href="#" data-id="@item.CartItemID" class="removeCartItem delete" title="Delete">X</a>
        </td>
    </tr>
    <tr class="sp" id="sp-@item.CartItemID">
        <td colspan="20"></td>
    </tr>
    i++;
   }
  }

CartController：

public ActionResult ReturnView()
{
    //populate model
    IEnumerable<CartItemsByStore>model =db.GetItemsByStore();
    return PartialView("Store",model)
}

public ActionResult DeleteCartItem(int id)
{
    //delete
   return RedirectToAction("ReturnView");
}

主要观点：

<div id="divStore">
@Html.Partial("Store",cartItem.CartItemsByStore)
</div>

$(".removeCartItem").click(function () {
            if (confirm("Click OK if you want to delete this record; otherwise, click 'Cancel'")) {
                // Get the id from the link
                var recordToDelete = $(this).attr("data-id");
                if (recordToDelete != '') {
                    // Perform the ajax post
                    $.post("/Cart/DeleteCartItem", { "id": recordToDelete },
                        function (data) {
                            // Successful requests get here
                            $("#divStore").html(data);
                        });
                }
            }
        });

在asp.net MVC 4 razor视图中删除后更新记录号

1 个答案: