how to use ajax.beginform with foreach and model to create button for each li inside a partialview ul list? (the buttons are there to remove items/li) - ajax

Question

I am creating an mvc project and in it I am using foreachinside a partial view to fill an ul list in the view . My foreach collection is a list of model and I want to create a button for each model/li element that submits the current model to a PartialViewResult which then will delete the model from databse. So I try something like this:
#model WebApplication6.Models.Lang_User
#{ WebApplication6.Models.Entities db = new WebApplication6.Models.Entities();
List<WebApplication6.Models.Lang_User> langlist=db.Lang_User.Where(x => x.UserID ==Model.UserID).ToList();
}
{
#foreach (WebApplication6.Models.Lang_User item in langlist)
{using (Ajax.BeginForm("DilSil", new AjaxOptions())) {
<li id="#item.ID" class="list-group-item">#item.Languages.Language <button type="submit" class="btn btn-warning"></button></li>
}
}
But now i need to make something inside ajaxforms. When i submit one of the forms in ul list. It must submit the #item so is there a way to do it?
edit1: Delete PartialViewResult
public PartialViewResult DilSil(Lang_User dil)
{
db.Lang_User.Remove(dil);
db.SaveChanges();
System.Threading.Thread.Sleep(3000);
return PartialView("_DilPartial", dil);
}

Answer 1

All you need to do is, to send the unique Id of the entity in the form post. To do that, Keep the id in an input field, which is hidden inside the form. The input element name should match with your parameter name. When user clicks on the button, the form data will be submitted, including the hidden input
using (Ajax.BeginForm("DilSil", new AjaxOptions() { }))
{
<li id="#item.ID" class="list-group-item">
This is #item.ID
<input type="hidden" value="#item.ID" name="id" />
<button type="submit" class="btn btn-warning">Delete</button>
</li>
}
Now in your action method, read the id, get the entity and delete it. You can probably return the list of current data (read it again from db) and pass that and update the UI using UpdateTargetId and InsertionMode attributes or return a JSON response which you can handle in your OnSuccess handler
In your case, your li item id is same is the id of the entity .So you can return that information back to the client and the OnSuccess handler method can delete that element from the DOM
[HttpPost]
public ActionResult DilSil(int id)
{
var dil=db.Lang_User.Find(id);
db.Lang_User.Remove(dil);
db.SaveChanges();
return Json(new { status = "success" , id=id });
}
Now add an OnSuccess handler to your AjaxOptions when using Ajax.BeginForm helper method to render the form. This will be a javascript function which will be called after the ajax call is done. The response from server will be passed to this function.
using (Ajax.BeginForm("DilSil", new AjaxOptions() { OnSuccess = "DeleteDone" }))
{
<li id="#item.ID" class="list-group-item">
This is #item.ID
<input type="hidden" value="#item.ID" name="id" />
<button type="submit" class="btn btn-warning">Delete</button>
</li>
}
Now define the javascript method which reads the json response and delete the li item
function DeleteDone(a, b, c) {
if (a.status === 'success') {
$("#" + a.id).remove();
}
}