使删除请求 AJAX(ASP.NET MVC)

Question

我有div 视图，其中我显示来自 AJAX 调用的数据

这是后端代码

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

这是视图上的代码(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);
            }
        }
    });
}

这是查看代码(我从 AJAX 调用附加代码(

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

我需要将元素的 id 传递给控制器的删除按钮。

这是控制器中的代码

 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

将 row id 添加为 data-id delete image 中的属性。为其绑定单击处理程序。 on click删除图像，请使用之前设置的属性获取行 ID data-id并在AJAX请求中传递该id。

法典：

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({
    //...
  });
}

工作演示