多個Ajax.BeginForm無法正常工作C＃MVC

Question

我正在使用c＃mvc刪除html表中動態生成的行。我第一次刪除就成功了。其次，我只能在重新加載頁面時刪除。那是一次加載一次僅發生一次刪除是什么問題？

部分視圖_CartListing

@model CartModel
<table width="100%">
    <tr bgcolor="#E4E4E4">
       <th style="padding-left:20px;">
        FoodIem
       </th>
       <th  style="padding-left:20px;">
         Quantity
        </th>
        <th style="padding-left:20px;">
        Price
        </th>
       <th></th>
     </tr>
    @{
        int i = 0;
        string k;
     }
     @foreach (CartListing ct in Model.CartListings)
     {
         i = i + 1;
   using (Ajax.BeginForm("DeleteCart", "Cart", new { cartid = ct.CartId }, new AjaxOptions()
    {
     HttpMethod = "Post",
     OnSuccess = "onSuccess",
     UpdateTargetId = "mydiv"
   }, new {id="Form"+i }))
{
<tr>
  <td style="padding-left:20px;">
     @ct.CartId
  </td>
  <td style="padding-left:20px;" >
    @ct.Amount
  </td>
  <td style="padding-left:20px;">
    @ct.Price
  </td>
  <td>
   <input type="submit" value="delete" id="delete_@i"/>
  </td>
  </tr> 
 }
}
  <tr bgcolor="#E4E4E4"><td></td><td></td><td></td><td></td></tr>
</table>

主視圖CartManager

<div class="mycontainer">   
  <div id="mydiv">
     @{Html.Action("CartManager","Cart");}   
  </div>   
</div> 

控制者

    public ActionResult CartList()
    {
        string user = "jaddu";
        FoodContext db = new FoodContext();
        List<CartListing> fd = (from e in db.FoodItems
                                  join o in db.Carts on e.itemid equals o.itemid 
                                  where o.username==user
                                  select new CartListing 
                                  {
                                   ItemId=e.itemid,
                                   CartId=o.cartid,
                                   Itemname =e.itemname,
                                   Amount =o.amount,
                                   Price=(float)(e.price*o.amount),
                               }).ToList();
          CartModel vm = new CartModel { CartListings = fd };
          return PartialView("_CartListing",vm);    
    }

    [HttpPost]
    public ActionResult DeleteCart(int cartid)
    {
        string user = "jaddu";
        FoodContext db = new FoodContext();
        Cart car = db.Carts.Single(f => f.cartid == cartid);
        db.Carts.DeleteObject(car);
        db.SaveChanges();
        List<CartListing> fd = (from e in db.FoodItems
                                join o in db.Carts on e.itemid equals o.itemid
                                where o.username == user
                                select new CartListing
                                {
                                    ItemId = e.itemid,
                                    CartId = o.cartid,
                                    Itemname = e.itemname,
                                    Amount = o.amount,
                                    Price = (float)(e.price * o.amount),
                                }).ToList();
        CartModel vm = new CartModel { CartListings = fd };
        return PartialView("_CartListing", vm);
    }

Answer 1

嘗試

using (Ajax.BeginForm("DeleteCart", "Cart", new { cartid = ct.CartId }, new AjaxOptions()
{
    HttpMethod = "Post",
    OnSuccess = "onSuccess",
    UpdateTargetId = "mydiv",
    InsertionMode = InsertionMode.Replace,
}, new {id="Form"+i }))

Answer 2

嘗試將使用Razor創建按鈕ID的方式從delete_@i更改為delete_@(i) ，否則所有按鈕將具有相同的ID，並且將無法正常工作。

即，像這樣更改行

<input type="submit" value="delete" id="delete_@(i)"/>

Answer 3

我測試了您的.cshtml代碼，如下所示，它可以正常工作。 我認為您需要仔細檢查在Get和Post動作中正在創建數據庫上下文新實例（在您的情況下為FoodContext）的控制器中的代碼。 嘗試在請求上下文中使用單個實例。

模型

 public class Article
    {
        public int Id { get; set; }
        public string ArticleContent { get; set; }
    }

_PartialView.cshtml

@model IEnumerable<WebApplication6.Models.Article>
    <table width="100%">

        @foreach (var ct in Model)
        {
            i = i + 1;
            using (Ajax.BeginForm("DeleteArticle", "Home", new { Id = ct.Id }, new AjaxOptions()
         {
             HttpMethod = "Post",
             OnSuccess = "onSuccess",
             UpdateTargetId = "mydiv"
         }, new { id = "Form" + i }))
            {
                <tr>
                    <td style="padding-left:20px;">
                        @ct.ArticleContent
                </td>
                <td style="padding-left:20px;">
                    @ct.Id
                </td>
                <td>
                    <input type="submit" value="delete" id="delete_@i" />
                </td>
            </tr>
            }
        }
    </table>

Controller.cs

 MyDbContext _db = new MyDbContext();
public ActionResult ArticleList()
        {
            var vm = _db.Articles.ToList();
            return PartialView("_CartListing", vm);
        }

        [HttpPost]
        public ActionResult DeleteArticle(int Id)
        {
            var a = _db.Articles.Find(Id);
            _db.Articles.Remove(a);
            _db.SaveChanges();

            var vm = _db.Articles.ToList();
            return PartialView("_CartListing", vm);
        }