ASP.NET MVC使用JavaScript弹出窗口删除gridview记录

Question

I was following a tutorial and used scaffolding to generate most of the controllers and views. Now, I want to add an extra button template-field to the gridview with which its onClick event will delete the record using javascript pop up and confirmation.

<button data-student-id="@item.StudentID" class="btn-link js-delete">Delete</button>

But when i click on the button, I get a **404 error*. How to write it properly?

 @model IEnumerable<ContosoSite.Models.Student> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table class="table" id="students"> <tr> <th> @Html.DisplayNameFor(model => model.LastName) </th> <th> @Html.DisplayNameFor(model => model.FirstName) </th> <th> @Html.DisplayNameFor(model => model.EnrollmentDate) </th> <th> @Html.DisplayNameFor(model => model.MiddleName) </th> <th></th> <th>Delete</th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.EnrollmentDate) </td> <td> @Html.DisplayFor(modelItem => item.MiddleName) </td> <td> @Html.ActionLink("Edit", "Edit", new { id = item.StudentID }) | @Html.ActionLink("Details", "Details", new { id = item.StudentID }) | @Html.ActionLink("Delete", "Delete", new { id = item.StudentID }) </td> <td> <button data-student-id="@item.StudentID" class="btn-link js-delete">Delete</button> </td> </tr> } </table> @section scripts { <script> $(document).ready(function () { $("#students .js-delete").on("click", function () { var button = $(this); if(confirm("are you sure you want to delete this student?")) { $.ajax({ url: "/Students/delete/" + button.attr("data-student-id"), method: "delete", success: function () { button.Parents("tr").remove(); //console.log("success"); } }) }; }); }); </script> } 

below is my view.

 using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Net; using System.Web; using System.Web.Mvc; using ContosoSite.Models; namespace ContosoSite.Controllers { public class StudentsController : Controller { private ContosoUniversityEntities db = new ContosoUniversityEntities(); // GET: Students public ActionResult Index() { return View(db.Students.ToList()); } // GET: Students/Details/5 public ActionResult Details(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Student student = db.Students.Find(id); if (student == null) { return HttpNotFound(); } return View(student); } // GET: Students/Create public ActionResult Create() { return View(); } // POST: Students/Create // To protect from overposting attacks, please enable the specific properties you want to bind to, for // more details see https://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include = "StudentID,LastName,FirstName,EnrollmentDate,MiddleName,HostelID")] Student student) { if (ModelState.IsValid) { db.Students.Add(student); db.SaveChanges(); return RedirectToAction("Index"); } return View(student); } // GET: Students/Edit/5 public ActionResult Edit(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Student student = db.Students.Find(id); if (student == null) { return HttpNotFound(); } return View(student); } // POST: Students/Edit/5 // To protect from overposting attacks, please enable the specific properties you want to bind to, for // more details see https://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit([Bind(Include = "StudentID,LastName,FirstName,EnrollmentDate,MiddleName,HostelID")] Student student) { if (ModelState.IsValid) { db.Entry(student).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(student); } // GET: Students/Delete/5 public ActionResult Delete(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Student student = db.Students.Find(id); if (student == null) { return HttpNotFound(); } return View(student); } // POST: Students/Delete/5 [HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed(int id) { Student student = db.Students.Find(id); db.Students.Remove(student); db.SaveChanges(); return RedirectToAction("Index"); } protected override void Dispose(bool disposing) { if (disposing) { db.Dispose(); } base.Dispose(disposing); } } } 

Answer 1

There is an easier workaround to avoid 404, let the ASP.NET routing create the links for you,as hardcoded links may point to different locations depending on different factors,

What you can try is replacing the line

url: "/Students/delete/" + button.attr("data-student-id")

With

url: '@Url.Action("Delete","Students")/' + button.attr('data-student-id')

This will make asp.net to create the correct links to your site.