Simple CRUD Using jQuery AJAX in ASP.NET MVC

What We Will Build

• Insert Student

• Display Student

• Update Student

• Delete Student

• Without page refresh

• Using ADO.NET

Simple and beginner-friendly.

Step 1: Create Database

Create table in SQL Server:

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

Step 2: Create MVC Project

Create:

• ASP.NET Web Application (.NET Framework)

• Choose MVC template

Step 3: Add Model

Models → Add Class → Student.cs

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

Step 4: Add Connection String

In Web.config

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

Replace YourDatabaseName with your database name.

Step 5: Create Controller (Using ADO.NET)

Add Controller → StudentController

Add:

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

Index Method

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

Get Students

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

    string cs = ConfigurationManager.ConnectionStrings["constr"].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 reads data from database using SqlDataReader.

Insert Student

[HttpPost]
public JsonResult Insert(Student s)
{
    string cs = ConfigurationManager.ConnectionStrings["constr"].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);
}

Update Student

[HttpPost]
public JsonResult Update(Student s)
{
    string cs = ConfigurationManager.ConnectionStrings["constr"].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);
}

Delete Student

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

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

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

    return Json(true);
}

Step 6: Create View (Index.cshtml)

<h2>Student CRUD (Without EF)</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>

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

Step 7: jQuery AJAX Code

Add below:

<script>
    $(document).ready(function () {
        LoadData();
    });

    function LoadData() {
        $.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='Edit(" + item.Id + ",\"" + item.Name + "\"," + item.Age + ")'>Edit</button>";
                rows += "<button onclick='Delete(" + item.Id + ")'>Delete</button>";
                rows += "</td></tr>";
            });
            $("#studentTable").html(rows);
        });
    }

    function Save() {
        var student = {
            Id: $("#Id").val(),
            Name: $("#Name").val(),
            Age: $("#Age").val()
        };

        if (student.Id == "") {
            $.post("/Student/Insert", student, function () {
                LoadData();
            });
        } else {
            $.post("/Student/Update", student, function () {
                LoadData();
            });
        }

        $("#Id").val("");
        $("#Name").val("");
        $("#Age").val("");
    }

    function Edit(id, name, age) {
        $("#Id").val(id);
        $("#Name").val(name);
        $("#Age").val(age);
    }

    function Delete(id) {
        $.post("/Student/Delete", { id: id }, function () {
            LoadData();
        });
    }
</script>

Final Output

• Add Student → Saved in database

• Edit Student → Updated

• Delete Student → Removed

• No page refresh

All using:

• ADO.NET

• SqlConnection

• SqlCommand

• jQuery AJAX

Why This Is Important?

Many companies still use:

• ADO.NET

• Stored Procedures

• Legacy MVC projects

Interviewers often ask:

“Can you do CRUD without Entity Framework?”

Now you can confidently say YES 💪🔥

Conclusion

In this article, we learned:

• CRUD using MVC

• ADO.NET usage

• SqlConnection & SqlCommand

• jQuery AJAX

• Without Entity Framework