Delete using Ajax Call in .NET MVC

Question

I am calling Delete controller method from ajax on button click but when i click the button it gives error like "Object reference not set to an instance of an object."

 

I have write a code for the ajax and calling delete method previously the javascript code get called on every page load rather than on button click but then i add e.preventDefault(); The issue is now it is giving error rather then moving to the controller delete method.

 

My Javascript code

<script> function DeleteCall(id) { // $(document.getElementById("sbmtInput").click(function(e){} $('btnDelete').click(function (e) { e.preventDefault(); $.ajax({ type: "POST", url: '@Url.Action("Delete", "Student_Experience")', data: JSON.stringify({ id: id }), //use id here dataType: "json", contentType: "application/json; charset=utf-8", success: function () { // alert("Data has been deleted."); location.reload(); $(".demo1").html(result); }, error: function () { alert("Error while deleting data"); } }); }); </script>

[httppost]
public ActionResult Delete(int? id) { if (id == null)
{ return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } S
tudent_Experience student_Experience = db.Student_Experience.Find(id);
if (student_Experience == null) { return HttpNotFound(); }
// Student_Experience student_Experience = db.Student_Experience.Find(id);
db.Student_Experience.Remove(student_Experience);
db.SaveChanges(); return RedirectToAction("Create","Students"); // return View(student_Experience); }