Introduction

During my internship, I worked on a Student Portal project using ASP.NET MVC. Initially, all Create, Update, and Delete operations were working using normal form submission.

However, every action caused a full page reload, which made the application slow and not user-friendly.

To improve this, I implemented AJAX so that data could be updated without refreshing the page.

Problem

In a typical MVC application:

This approach works, but:

Solution: Using AJAX

AJAX allows sending requests to the server asynchronously.

This means:

Implementation

1. Delete Operation using AJAX

JavaScript

$(document).ready(function () {
    $(".delete-btn").click(function () {
        if (!confirm("Are you sure you want to delete?")) return;

        var button = $(this);
        var id = button.data("id");

        $.ajax({
            url: "/Student/DeleteAjax",
            type: "POST",
            data: { id: id },
            success: function (res) {
                if (res.success) {
                    button.closest("tr").remove();
                } else {
                    alert("Delete failed");
                }
            },
            error: function () {
                alert("Error occurred");
            }
        });
    });
});

Controller

[HttpPost]
public JsonResult DeleteAjax(int id)
{
    bool result = _service.DeleteStudent(id);
    return Json(new { success = result });
}

2. Create Operation using AJAX

$("#createForm").submit(function (e) {
    e.preventDefault();

    $.ajax({
        url: "/Student/CreateAjax",
        type: "POST",
        data: $(this).serialize(),
        success: function (res) {
            if (res.success) {
                location.reload();
            } else {
                alert("Validation failed");
            }
        }
    });
});

Result

After implementing AJAX:

Common Mistakes I Faced

Conclusion

Using AJAX in real projects helps improve performance and user experience. It is especially useful for CRUD operations where frequent updates are required.

This implementation helped me understand how frontend and backend communicate without reloading the page.

About the Author

I am a .NET Developer Intern with experience in ASP.NET MVC, AJAX, and SQL Server. I enjoy building real-world projects and improving user experience through practical implementations.