Partial View MVC 4 in foreach loop - asp.net-mvc

Question

I'm using MVC 4 Ajax.BeginForm to update but it updates only the first element <div>
the View:
#model List<CSP1225.Models.Item>
#{
ViewBag.Title = "RecentItems";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/CSS/jobs.css" rel="stylesheet" />
#{ var convert = ViewBag.convert;
}
<div>
#foreach (var item in Model)
{
<div class="job-item">
<div class="inner">
<div class="span8 job-span">
<!--start of job list container div-->
<div id="ja-joblist">
<ol id="ja-searchjoblist">
<li class="job-item">#{ var PriceLE = #item.Price * convert;}
#using (#Ajax.BeginForm("_AddToCart", "Home", item, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "cart" }, null))
{
<!-- job item right section-->
<div class="inner">
<div class="ja-job-meta clearfix">
<span class="ja-job-category">#item.ItemName</span>
<span class="ja-job-category">#item.Price $</span>
<span class="ja-job-category">#PriceLE LE</span>
<div id="cart"></div>
<button type="submit">Add to Cart</button>
</div>
</div>
} </li>
<!-- end of job item right section-->
<!-- end of job item -->
</ol>
</div>
</div>
</div>
</div>
}
#Html.ActionLink("Go Back", "Index", "Home", new { #class = "makeneworder" })
</div>
and Controller:
public ActionResult _AddToCart(Item model)
{
ItemModel it = new ItemModel();
it.itemName = model.ItemName;
it.itemUrl = model.ItemURL;
it.quantity = 1;
it.unitprice = model.Price;
it.weight = (int)model.Weight;
it.ItemCategory =(int)model.CategoryID;
CartList.Add(it);
ViewBag.convert = (decimal)_db.Currencies.Where(x => x.Name == "Dollar").FirstOrDefault().Value;
ViewBag.list = CartList;
return PartialView();
}
Partial view :
<p>Added to Cart</p>
but the view returns multiple elements (as long as the list contains elements) when i click Add to Cart it updates the first element.. i understand that because u can not give another <div> the same id but how can i fix it?

Answer 1

you can create a dynamic ID like
#{ var divID = 1; }
then use it like
UpdateTargetId = "cart" + divID }
and
<div id="cart#divID" ></div>