多个Ajax.BeginForm无法正常工作C＃MVC

Question

I am deleting dynamically generated rows in html table using c# mvc.I am in success with first delete.Secondly i can only delete when i reload the page.That is only one delete is happening at one load what is my problem?

Partial View _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>

Main View CartManager

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

Controller

    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

Try

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

Try changing the way you creating button id using Razor from delete_@i to delete_@(i) , other wise all buttons will have same id and it won't work as expected.

ie, change lines like this

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

Answer 3

I tested your .cshtml code like below and it works. I think you need to double check the code in your controller where you are creating a new instance of db context (FoodContext in your case) in both Get and Post actions. Try using a single instance in the request context.

model

 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);
        }