Make delete request AJAX(ASP.NET MVC)

Question

I have view with div , where I display data from AJAX call

Here is back-end code

[HttpGet]
    public ActionResult EmailsList()
    {
        var itemsEmail = db.InvitationMails
            .Select(x=> new
            {
                Id = x.Individ_Id,
                Email = x.To.ToString(),
                Name = x.Name.ToString(),
            })
            .ToList();
        return Json(itemsEmail, JsonRequestBehavior.AllowGet);
    }

Here is code on View(AJAX)

<script>
$(document).ready(function () {
    email_update();
});

function email_update() {
    $.ajax({
        url: '@Url.Action("EmailsList", "Questions")',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json',
        processData: false,
        success: function (result) {
            var email = result;
            // console.log(result[0].Name);
            for (var i = 0; i <= email.length - 1; i++) {
                var editImage = '@Url.Content("~/Images/Edit.png")';
                var deleteImage = '@Url.Content("~/Images/Delete.png")';
                var emailHTML = '<div style="margin-left: 25px; margin-top: 10px;>' +
                    '<b style="margin-left: 10px;">' +(i + 1) +
                    '<b style="margin-left:20px;">' + result[i].Email + '</b>'+
                    '<b>' +
                    '<b style="margin-left: 20px;">' +
                    result[i].Name +
                    '</b>' + '<a style="float: right; margin-right: 20px;">' +
                    '<img src="' + editImage+ '">' +
                    '</a>' +
                    '<a style="float: right; margin-right: 20px;">' +
                    '<img src="' + deleteImage + '">' +
                    '</a>' +
                    '</div>';
                $(".email_list").append(emailHTML);
            }
        }
    });
}

And here is View code (where i append code from AJAX call)

<div class="email_list" style="height: 60%; width: 100%; overflow: auto;margin-bottom: 25px;">

</div>

I have delete button on what I need to pass id of element to controller.

Here is code in controller

 public ActionResult Delete(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Question questions = db.Questions.Find(id);
        if (questions == null)
        {
            return HttpNotFound();
        }
        return View(questions);
    }

    // POST: Questions/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteConfirmed(int id)
    {
        Question questions = db.Questions.Find(id);
        db.Questions.Remove(questions);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

Answer 1

Add you row id as data-id attribute indelete image. Bind a click handler for it. on click of delete image, get your row id using data-id attribute that you previously set and pass that id in an AJAX request.

Code:

for (var i = 0; i <= result.length - 1; i++) {

var editImage = '@Url.Content("~/Images/Edit.png")';
var deleteImage = '@Url.Content("~/Images/Delete.png")';

var obj = '<div style="margin-left: 25px; margin-top: 10px;>' +
                  '<b style="margin-left: 10px;">' +(i + 1) +
                  '<b style="margin-left:20px;">' + result[i].Email + '</b>'+
                  '<b>' +
                  '<b style="margin-left: 20px;">' +
                  result[i].Name +
                  '</b>' + '<a style="float: right; margin-right: 20px;">' +
                  '<img src="' + editImage + '">' +
                  '</a>' +
                  '<a style="float: right; margin-right: 20px;">' +
                  '<img data-id=' + result[i].Id + ' src="' + deleteImage + '">' +                           ^
                  '</a>' +   ^
                  '</div>';  ^
                             ^
------------------------------ //set id as data-id attribute



    $("#email_list").append(obj);
}


//bind click handler
$("#email_list").on("click", "img", function(){
  var id = $(this).attr("data-id");

  deleteRow(id);
});

function deleteRow(Id) {
  alert('Delete email with id: ' + id);

  //your ajax call here...
  $.ajax({
    //...
  });
}

Working DEMO