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:
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