使用 Ajax MVC 删除操作方法

Question

我正在尝试使用 ajax 在 mvc.net 中实现单页应用程序，我在实现删除服务时遇到问题，这是我的删除操作方法：

[HttpPost]
    public ActionResult Delete(int id)
    {
        Movie movie = db.Movies.Find(id);
        db.Movies.Remove(movie);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

这是我的删除 onclick 函数：

 function Delete(id){
        //here i want to take delete the row with it specifc id ,

          $.ajax({
            type: "POST",
            url: '@Url.Action("Delete")',
            data: JSON.stringify({ ID: id }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
               // alert("Data has been deleted.");
                LoadData();
            },
            error: function () {
                alert("Error while deleting data");
            }
        });

单击删除按钮时应调用此删除，这是由加载数据函数创建的：

function LoadData() {
    $("#tblStudent tbody tr").remove();
    $.ajax({
        type: 'POST',
        url: '@Url.Action("getStudent")',
        dataType: 'json',
        data: { id: '' },
        success: function (data) {
            var items = '';
            $.each(data, function (i, item) {
                var rows = "<tr>"
                + "<td class='prtoducttd' id='MovieID'>" + item.ID  + "</td>"
                + "<td class='prtoducttd'>" + item.Name + "</td>"
                + "<td class='prtoducttd'>" + item.Type + "</td>"
                    + "<td class='prtoducttd'>" + item.date + "</td>"
                    + "<td class='prtoducttd'>" + "<input class='btn btn- primary'  name='submitButton' id='btnEdit' value='Edit'  onclick='delete' type='button'>"+ "<input class='btn btn- primary' name='submitButton' id='btnDel' value='Delete' type='button'>" + "</td>"
                + "</tr>";
                $('#tblStudent tbody').append(rows);
            });
        },

如何在点击按钮时将电影的id传递给删除函数？

Answer 1

ajax 需要一些修改。参数名称和方法名称在控制器和 ajax.

中应完全匹配

 $.ajax({
            type: "POST",
            url: '/ControllerName/Delete',// same case sensitive action name
            data: JSON.stringify({ id: id }), //small letter id, same as in controller parameter
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
               // alert("Data has been deleted.");
                LoadData();
            },
            error: function () {
                alert("Error while deleting data");
            }

如果仍未调用删除操作，请删除 json.stringify 并仅传递 'id': idval in data。

Answer 2

控制器操作方法和数据中的参数：ajax 调用的 {} 必须相同，因为您在控制器中使用 public ActionResult Delete(int id) 您必须使用 id ： ajax 通话中的 ID。

     $.ajax({
        type: "POST",
        url: '@Url.Action("Delete")',
        data: JSON.stringify({ id: id }), //use id here
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function () {
           // alert("Data has been deleted.");
            LoadData();
        },
        error: function () {
            alert("Error while deleting data");
        }
    });

第二，将加载数据函数中的整行写入单个 var 行变量并不是一个好主意。你可以声明 var row = '';在每个循环之前然后可以这样做。

var rows = '';
        $.each(data, function (i, item) {
            rows += "<tr>",
            rows += '<td>' + item.MovieID+ '</td>'
            //and so on.............and lastly use .html instead of append

            $('#tblStudent tbody').html(rows);
        });

作为参考，参考这个 link :- http://www.c-sharpcorner.com/article/crud-operation-in-asp-net-mvc-using-ajax-and-bootstrap/

使用 Ajax MVC 删除操作方法

Delete action method using Ajax MVC

ajax

rest

asp.net-mvc

jquery

asp.net-ajax