Delete record by using ajax from database EntityFramework

Question

I am beginner and trying to delete the record from database by using JavaScript, Ajax and Json in MVC Entity Framework. But my delete button is not working well.

In controller class my action code is

public ActionResult Delete(int id) {
            using (StudentContext db = new StudentContext()) {
                Student std = db.Student.Where(x => x.Id == id).FirstOrDefault<Student>();
                db.Student.Remove(std);
                db.SaveChanges();
              }
              return Json(true, JsonRequestBehavior.AllowGet);
        }

and my JavaScript code is

<button id='deleteRecord'>delete</button>

$("#deleteRecord").click(function () {
                var StudentId = $(this).val();
                var stdId = parseInt(StudentId);
                $.ajax({
                    url: "/AjaxStudent/Delete",
                    type: 'Delete',
                    data: {
                        StudentId: stdId
                    }
                }).done(function () {
                    alert("Deleted")
                });
            });

        }).error(function () {
            alert("Failed")
        });

I shall be very thankful if anybody help me.

Do you get any errors, or is it just inconsistent when you try to delete? Are there any constraints or related records that you are not considering? ie. Are you trying to delete a student id where this is being used in a different table? — fdsafdsafdsafdsafs
– fdsafdsafdsafdsafs, Commented Jun 20, 2018 at 18:47
@fdsafdsafdsafdsafs Oh yes, I am getting this error System.ArgumentException: The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Delete(Int32)' in 'AjaxStudentCall.Controllers.AjaxStudentController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters and my student Id is in one table. — nabia saroosh
– nabia saroosh, Commented Jun 20, 2018 at 19:13

Usama · Accepted Answer · 2018-06-20 23:21:29Z

1

You need to add your model id in jquery data tag:

<button id='deleteRecord' data-model-id="@model.Id">delete</button>

Then in javascript code:

$("#deleteRecord").click(function () {
                var StudentId = $(this).data("model-id");
                var url = "/AjaxStudent/Delete/" + StudentId;
                $.ajax({
                    url: url,
                    type: 'Delete',
                }).done(function () {
                    alert("Deleted")
                });
            });
        }).error(function () {
            alert("Failed")
        });

answered Jun 20, 2018 at 23:21

Usama

94412 silver badges25 bronze badges

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

5 Comments

Usama Over a year ago

My answer does not help you? Now what is the error?

nabia saroosh Over a year ago

In button tag this code data-model-id="@model.Id" is not working.

Usama Over a year ago

data-model-id should contains model's id (record id or primary key) that you want to delete: for example, if you want to delete model with id=7 the data-model-id="7". You are free to change @model.id

Usama Over a year ago

the error you are getting: "System.ArgumentException: The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32'..." is because delete action in AjaxStudentController does not receive the id parameter.

nabia saroosh Over a year ago

just see my below answer. Thank you I got it with help of your concept.

Zakaria.d · Accepted Answer · 2018-06-27 22:07:32Z

1

I think that the error comes from the type attribute of your ajax call. You assign "delete" to this attribute, but it must be "POST":

 $.ajax({
          url: "@Url.Action("Delete","AjaxStudent")",
          type: "POST", // here is your problem,
          data: { StudentId: stdId },
          dataType: 'json',
          success: function() {                 
                alert("Deleted");
            },
          error: function(dat) {
                alert(data.x);
            }
        });

And the action method in your controller must be decorated with [httppost] :

 [HttpPost]
 public JsonResult Delete(int StudentId) 
 {
    using (StudentContext db = new StudentContext()) 
    {
        Student std = db.Student.Where(x => x.Id == StudentId).FirstOrDefault<Student>();
        db.Student.Remove(std);
        db.SaveChanges();
      }
      return Json(true, JsonRequestBehavior.AllowGet);
  }

answered Jun 27, 2018 at 22:07

Zakaria.d

1781 gold badge3 silver badges17 bronze badges

1 Comment

nabia saroosh Over a year ago

Yes, Little bit I am agree with you but using type :"Post" , just see my below answer.

Bhinni · Accepted Answer · 2018-06-21 09:54:31Z

0

you should try by changing :

 $.ajax({
                url: "/AjaxStudent/Delete",
                type: 'Delete',
                data: {
                    StudentId: stdId
                }

to:

 $.ajax({
            url: "/AjaxStudent/Delete",
            type: 'Delete',
            data: {
                'id':stdId
            }

answered Jun 21, 2018 at 9:54

Bhinni

315 bronze badges

Comments

nabia saroosh · Accepted Answer · 2018-06-28 19:23:45Z

After lots of time I am able to resolve my problem.

Now my javaScript code

<button class='deleteRecord' data-stid=" + students[i].Id + " >delete</button> 
$(".deleteRecord").click(function () {
                var StudentId1 = $(this).data("stid");
                debugger;
                $.ajax({
                    url: "/AjaxStudent/Delete/" + StudentId1,
                    type: "Post"
                }).done(function () {

                    getAllStudents();

                    });
                });
            });

Controller.cs

public ActionResult Delete(int id) {
            using (StudentContext db = new StudentContext()) {
                Student std = db.Student.Where(x => x.Id == id).FirstOrDefault();
                db.Student.Remove(std);
                db.SaveChanges();
            }

            return Json(true, JsonRequestBehavior.AllowGet);
        }

Collectives™ on Stack Overflow

Delete record by using ajax from database EntityFramework

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related