发出删除请求 AJAX(ASP.NET MVC)答案

【问题标题】：Make delete request AJAX(ASP.NET MVC)发出删除请求 AJAX(ASP.NET MVC)
【发布时间】：2017-04-14 07:00:51
【问题描述】：

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

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

这里是查看代码（我从 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");
    }

【问题讨论】：

那么，您面临的具体问题是什么？
我需要如何编写 AJAX 删除请求？ @SyedAliTaqi
您在controller 中定义了一个post 方法。只需使用post 的方法进行AJAX 调用，并通过url 传递行的id。
是什么阻止您复制/粘贴您拥有的 ajax 方法，并对其进行更改以调用 delete 方法？
@Eugene：您在绑定点击处理程序或在点击时获取 id 时遇到困难吗？

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

在delete image 中将row id 添加为data-id 属性。为它绑定一个点击处理程序。删除图像的on click，使用您之前设置的data-id 属性获取您的行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({
    //...
  });
}

工作DEMO

【讨论】：