ASP.NET MVC Deleting row jquery datatables

Question

I have a problem with Deleting, Editing row from jquery datatable, it keeps telling me this error

the parameters dictionary contains a null entry for parameter 'id' of non-nullable type

I figure out that the problem being kind of passing the id, As when I put the id directly in Ajax code it works well

Here is my Product model:

public partial class Products
{

    public int ID { get; set; }

    // Other properties removed for brevity
}

And delete method in Controller

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

Here is my DataTable row where delete button is situated.

 {
       "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/>";
 },

Here data is getting undefined.

Here is My Ajax code:

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

                });
            }
        }

Note:- when I directly add the id I wanna delete in Ajax code like this, it works well

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

Answer 1

Make it as follows:

{
    "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/>";
},

Now it should work.

Answer 2

The id value passed into onclick event contains undefined because you're using data parameter which has undefined value. Try using full parameter of the render section function with ID column name as key (I assumed you won't put the button inside column definition which contains data):

// 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>";
  }
}

Then setup the AJAX call with ID as in example below:

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

As alternative if full parameter still won't work, use a global identifier and set its value using data.id, then use that identifier into AJAX callback which provided in this issue.

Note:

Since you're using POST request, make sure your controller decorated with [HttpPost] attribute, and remove JsonRequestBehavior.AllowGet because it only required for GET request:

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