製作刪除請求AJAX（ASP.NET MVC）

我有看法有格，在這裏我顯示來自AJAX調用數據製作刪除請求AJAX（ASP.NET MVC）

這裏是後端代碼

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

這裏是查看代碼（其中i追加代碼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"); 
    }

來源

2017-04-14 Eugene

那麼，究竟是你面臨的問題？ –

我如何編寫AJAX請求刪除？ @SyedAliTaqi – Eugene

你已經在'controller'裏面定義了'post'方法。只需用'post'方法進行'AJAX'調用，並通過url傳遞'id'行。 –

添加你delete imagerow 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

來源

2017-04-14 08:15:03

製作刪除請求AJAX（ASP.NET MVC）

回答

相關問題