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

本文关键字：删除 更新 记录 视图 net asp MVC razor | 更新日期: 2023-09-27 18:06:44

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

下面是razor视图代码:

  @{ 
   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');
                        });
                }
            }
        });
 });

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

试试这个

局部视图:"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);
                        });
                }
            }
        });

相关文章：