Simple AJAX CRUD in ASP.NET MVC Using jQuery and ADO.NET

Introduction

Modern web applications need fast and smooth user experience. If a page reloads every time we insert or update data, the application becomes slow and less interactive.

This is where AJAX (Asynchronous JavaScript and XML) becomes very useful.

Using AJAX, we can communicate with the server without refreshing the entire page.

In this article, we will build a simple Student CRUD application using:

ASP.NET MVC
jQuery AJAX
ADO.NET
SQL Server

This example is designed for beginners, so every step is explained in simple words.

What is CRUD?

CRUD is a common term used in database applications.

Operation	Meaning
Create	Insert new data
Read	Display data
Update	Modify existing data
Delete	Remove data

Most web applications use CRUD operations.

Technologies Used

In this example we will use:

ASP.NET MVC
jQuery
AJAX
SQL Server
ADO.NET

This approach helps beginners understand how database communication works without using ORM frameworks.

Step 1 – Create Database Table

First, create a table in SQL Server.

CREATE TABLE Students
(
    Id INT PRIMARY KEY IDENTITY(1,1),
    Name NVARCHAR(100),
    Age INT
)

This table will store student information.

Step 2 – Create MVC Project

Open Visual Studio

Create a new project:

ASP.NET Web Application → MVC

After creating the project, add a Model class.

Step 3 – Create Model Class

Create a class named Student.cs inside the Models folder.

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

This class represents the Students table structure.

Step 4 – Add Database Connection

Open Web.config and add a connection string.

<connectionStrings>
  <add name="dbcon"
       connectionString="Data Source=.;Initial Catalog=StudentDB;Integrated Security=True"
       providerName="System.Data.SqlClient" />
</connectionStrings>

This connection allows the application to communicate with SQL Server.

Step 5 – Create Controller

Now create StudentController.

Import required namespaces:

using System.Data.SqlClient;
using System.Configuration;
using System.Data;

Index Method

public ActionResult Index()
{
    return View();
}

This method simply returns the main page.

Step 6 – Read Data from Database

public JsonResult GetStudents()
{
    List<Student> list = new List<Student>();

    string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;

    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("SELECT * FROM Students", con);
        con.Open();
        SqlDataReader dr = cmd.ExecuteReader();

        while (dr.Read())
        {
            list.Add(new Student
            {
                Id = Convert.ToInt32(dr["Id"]),
                Name = dr["Name"].ToString(),
                Age = Convert.ToInt32(dr["Age"])
            });
        }
    }

    return Json(list, JsonRequestBehavior.AllowGet);
}

This method retrieves all students from the database.

Step 7 – Insert Data

[HttpPost]
public JsonResult Insert(Student s)
{
    string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;

    using (SqlConnection con = new SqlConnection(cs))
    {
        string query = "INSERT INTO Students(Name,Age) VALUES(@Name,@Age)";
        SqlCommand cmd = new SqlCommand(query, con);

        cmd.Parameters.AddWithValue("@Name", s.Name);
        cmd.Parameters.AddWithValue("@Age", s.Age);

        con.Open();
        cmd.ExecuteNonQuery();
    }

    return Json(true);
}

This method inserts new student data into the database.

Step 8 – Update Data

[HttpPost]
public JsonResult Update(Student s)
{
    string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;

    using (SqlConnection con = new SqlConnection(cs))
    {
        string query = "UPDATE Students SET Name=@Name, Age=@Age WHERE Id=@Id";

        SqlCommand cmd = new SqlCommand(query, con);
        cmd.Parameters.AddWithValue("@Id", s.Id);
        cmd.Parameters.AddWithValue("@Name", s.Name);
        cmd.Parameters.AddWithValue("@Age", s.Age);

        con.Open();
        cmd.ExecuteNonQuery();
    }

    return Json(true);
}

This method updates existing student records.

Step 9 – Delete Data

[HttpPost]
public JsonResult Delete(int id)
{
    string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;

    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("DELETE FROM Students WHERE Id=@Id", con);
        cmd.Parameters.AddWithValue("@Id", id);

        con.Open();
        cmd.ExecuteNonQuery();
    }

    return Json(true);
}

This method deletes a student record.

Step 10 – Create View

Inside Index.cshtml

<h2>Student Management</h2>

<input type="hidden" id="Id" />

Name
<input type="text" id="Name" />

Age
<input type="number" id="Age" />

<button onclick="Save()">Save</button>

<hr>

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>

<tbody id="studentTable"></tbody>
</table>

Step 11 – Add jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 12 – AJAX Code

$(document).ready(function () {
    loadStudents();
});

function loadStudents() {
    $.get("/Student/GetStudents", function (data) {

        var rows = "";

        $.each(data, function (i, item) {

            rows += "<tr>";
            rows += "<td>" + item.Name + "</td>";
            rows += "<td>" + item.Age + "</td>";
            rows += "<td>";

            rows += "<button onclick='editStudent(" + item.Id + ",\"" + item.Name + "\"," + item.Age + ")'>Edit</button>";

            rows += "<button onclick='deleteStudent(" + item.Id + ")'>Delete</button>";

            rows += "</td>";
            rows += "</tr>";
        });

        $("#studentTable").html(rows);
    });
}

Application Output

The application allows users to:

Add new students
View students instantly
Edit existing records
Delete records

All operations work without refreshing the page, making the application faster and smoother.

Why Use AJAX in MVC?

AJAX improves web applications by:

Reducing page reloads
Making applications faster
Providing better user experience
Loading data dynamically

Because of these benefits, AJAX is widely used in modern web applications.

Conclusion

In this article, we built a simple CRUD application using ASP.NET MVC, jQuery AJAX, and ADO.NET.

We learned:

How to connect MVC with SQL Server
How to perform CRUD operations
How AJAX helps update data without refreshing the page