0

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,
Improve this question
6
  • Did you tried data: { id: id } and leave the @Url.Action() as-is? I didn't recommend using query strings or paths on url, instead I suggest to use data property setting. Commented Mar 5, 2019 at 2:05
  • I tried this but it shows me nothing and in inspect/console the button appear like this /onclick="DeleteRow(undefined)"/ Commented Mar 5, 2019 at 2:16
  • By mentioning DeleteRow(undefined), actually you're passing '@Url.Action("delete", "Products")/' + undefined, which parsed as null parameter and throwing non-nullable type exception afterwards. Where that DeleteRow function called? Commented Mar 5, 2019 at 2:27
  • In the button :- return "<a class='btn btn-danger' onclick=DeleteRow(" + data + ")><i class='glyphicon glyphicon-trash'></i> Delete<a/>"; Commented Mar 5, 2019 at 2:31
  • @hazem Check that data value is not passing from button click. Commented Mar 5, 2019 at 2:33

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I tried two ways but still the same problem and I think it not passing at all as I mentioned before "that the problem being kind of passing the id", but I don't know why.
Thank you very much for helping, it works well and great now <3
@TanvirArjel, could you post your final solution here please so that people who come here can see what was the answer
Simply it was my fault as i wrote my "data": "id" and my tabel have "ID" so that ajax can't identify it, and it should be as you said "data": "ID" like in my database tabel
0

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");
}
Improve this answer

1 Comment

Thank you for helping, it was a mistake by mine as the answer above you showed, but your answer too had given me hints I didn't know before Thank you again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.