ASP.NET MVC 删除行 jquery 数据表

Question

我在删除、编辑 jquery 数据表中的行时遇到问题，它一直告诉我这个错误

参数字典包含不可为空类型的参数“id”的空条目

我发现问题在于传递 id，当我将 id 直接放在 Ajax 代码中时效果很好

这是我的Product 模型：

public partial class Products
{

    public int ID { get; set; }

    // Other properties removed for brevity
}

Controller 中的 delete 方法

public ActionResult delete(int id)
{
      db.Configuration.ProxyCreationEnabled = false;

      Products d = db.Products.Where(m => m.ID == id).FirstOrDefault<Products>();
      db.Products.Remove(d);
      db.SaveChanges();

      return Json("success", JsonRequestBehavior.AllowGet);
}

这是我的DataTable 行，delete 按钮所在的位置。

 {
       "data": "id", "render": function (data) {
                     console.log(data);
                     return "<a class='btn btn-success' onclick=Editrow(" + data + ") style='margin-left:12px'><i class='glyphicon glyphicon-edit'></i> Edit Record<a/>  <a class='btn btn-danger' onclick=DeleteRow(" + data + ")><i class='glyphicon glyphicon-trash'></i> Delete<a/>";
 },

这里的data 越来越不确定了。

这是我的 Ajax 代码：

 function DeleteRow(id) {
            if (confirm("Are You sure to delete this record..?")) {
                $.ajax({

                    type: 'POST',
                    //url: "/Products/delete/" + id,
                    url: '@Url.Action("delete", "Products")/' + id,
                    datatype: 'JSON',
                    //data: JSON.stringify({ id: id }),
                    success: function (response) {
                        if (response == "success") {

                            alert("Data Deleted successfully..");
                            window.location.reload();
                            //$("#myModal").modal('hide');
                        }
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }

                });
            }
        }

注意：- 当我像这样在 Ajax 代码中直接添加要删除的 id 时，效果很好

url: '@Url.Action("delete", "Products")/' + 10,

Answer 1

如下：

{
    "data": "ID", "render": function (data) { // <-- `ID` instead of `id`
                   return "<a class='btn btn-success' onclick=Editrow(" + data + ") style='margin-left:12px'><i class='glyphicon glyphicon-edit'></i> Edit Record<a/>  <a class='btn btn-danger' onclick=DeleteRow(" + data + ")><i class='glyphicon glyphicon-trash'></i> Delete<a/>";
},

现在应该可以了。

Answer 2

传递给onclick 事件的id 值包含undefined，因为您正在使用具有undefined 值的data 参数。尝试使用render 部分函数的full 参数，ID 列名作为键（我假设您不会将按钮放在包含数据的列定义中）：

// delete button column definition
{ "data": null,
  "render": function (data, type, full, meta) {
     return "<a class='btn btn-danger' onclick=\'DeleteRow(" + full['idcolumnnamehere'] + ")\'><i class='glyphicon glyphicon-trash'></i>Delete</a>";
  }
}

然后使用 ID 设置 AJAX 调用，如下例所示：

function DeleteRow(id) {
    if (confirm("Are You sure to delete this record..?")) {
        $.ajax({
           type: 'POST',
           url: '@Url.Action("Delete", "Products")',
           data: { id: id },
           datatype: 'json',
           success: function (response) {
               // do something with response
           },
           error: function (msg) {
               alert(msg.responseText);
           }
       });
    }
}

如果full 参数仍然不起作用，请使用全局标识符并使​​用data.id 设置其值，然后将该标识符用于提供in this issue 的AJAX 回调。

注意：

由于您使用的是POST 请求，请确保您的控制器使用[HttpPost] 属性进行装饰，并删除JsonRequestBehavior.AllowGet，因为它仅用于GET 请求：

[HttpPost]
public ActionResult Delete(int id)
{
    // delete record here
    return Json("success");
}