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:

  • Form is submitted

  • Server processes request

  • Entire page reloads

This approach works, but:

  • It feels slow

  • User experience is not smooth

  • Unnecessary page reload happens

Solution: Using AJAX

AJAX allows sending requests to the server asynchronously.

This means:

  • No full page reload

  • Faster response

  • Better user experience

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:

  • Data updates without page reload

  • Faster interaction

  • Improved user experience

Common Mistakes I Faced

  • Incorrect URL in AJAX call

  • Not using [HttpPost]

  • Returning View() instead of Json()

  • Ignoring browser console errors

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.