I’m working with an ASP.NET MVC project where I've used Entity Framework to generate CRUD actions for a Student controller. The HomeController handles the main view (Index), which displays a paginated list of students inside a div element. In this Index view, I have three buttons for each student: Edit, Details, and Delete.
When clicking any of these buttons, a modal is supposed to display with the corresponding action's form. However, instead of displaying the modal, the page reloads without showing it. The Index view is expected to load these actions in a modal without navigating away from the HomeController. How can I implement this properly, given that the controller I want the view to redirect to is HomeController
Index.cshtml
Buttons upon clicking the modals should be displayed
@foreach (var item in Model.Student)
{
EDIT
Read
Delete
}
Edit action method:
public async Task<ActionResult> Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
student student = await db.students.FindAsync(id);
if (student == null)
{
return HttpNotFound();
}
return View(student);
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Edit([Bind(Include "studentId,name,surname,birthdate,gender,class,point")] student student)
{
if (ModelState.IsValid)
{
db.Entry(student).State = EntityState.Modified;
await db.SaveChangesAsync();
return RedirectToAction("Index", "Home");
}
return View(student);
}
Javascript to display model @section Scripts {
<script type="text/javascript">
function openModal(url) {
$('#modalContent').load(url, function () {
$('#crudModal').modal('show');
});
}
</script>
}