通过使用ajax从数据库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.

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

Answer 2

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

Answer 3

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

Answer 4

you should try by changing :

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

to:

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