Introduction
In modern web applications, users expect fast and smooth interactions without refreshing the entire page. AJAX helps achieve this by allowing the browser to send requests to the server asynchronously.
When AJAX is used with ASP.NET MVC, developers can perform Create, Read, Update, and Delete (CRUD) operations without reloading the page.
In this article, we will build a simple Employee Management System using:
ASP.NET MVC
AJAX
jQuery
SQL Server
ADO.NET
We will not use Entity Framework, which helps beginners understand how database communication works internally.
What is AJAX?
AJAX stands for Asynchronous JavaScript and XML.
AJAX allows web pages to send and receive data from the server without refreshing the page.
Example uses of AJAX:
Project Structure
Our project will contain:
Model
Controller
View
AJAX functions
SQL Server database
Step 1: Create Database Table
First create a table in SQL Server.
CREATE TABLE Employees
(
Id INT PRIMARY KEY IDENTITY,
Name NVARCHAR(100),
Email NVARCHAR(100),
Salary INT
)
This table will store employee information.
Step 2: Create Model
Create a model class inside the Models folder.
Employee.cs
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public int Salary { get; set; }
}
This class represents the Employees table structure.
Step 3: Add Connection String
Open Web.config and add a connection string.
<connectionStrings>
<add name="dbcon"
connectionString="Data Source=.;Initial Catalog=EmployeeDB;Integrated Security=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
This connects the application to SQL Server.
Step 4: Create Controller
Create EmployeeController.
Import namespaces.
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
Insert Data Method
[HttpPost]
public JsonResult AddEmployee(Employee emp)
{
string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand(
"INSERT INTO Employees(Name,Email,Salary) VALUES(@Name,@Email,@Salary)", con);
cmd.Parameters.AddWithValue("@Name", emp.Name);
cmd.Parameters.AddWithValue("@Email", emp.Email);
cmd.Parameters.AddWithValue("@Salary", emp.Salary);
con.Open();
cmd.ExecuteNonQuery();
}
return Json(true);
}
This method inserts employee data into the database.
Get Employee List
public JsonResult GetEmployees()
{
List<Employee> list = new List<Employee>();
string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT * FROM Employees", con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
list.Add(new Employee
{
Id = Convert.ToInt32(dr["Id"]),
Name = dr["Name"].ToString(),
Email = dr["Email"].ToString(),
Salary = Convert.ToInt32(dr["Salary"])
});
}
}
return Json(list, JsonRequestBehavior.AllowGet);
}
This method retrieves all employees.
Delete Employee
public JsonResult DeleteEmployee(int id)
{
string cs = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("DELETE FROM Employees WHERE Id=@Id", con);
cmd.Parameters.AddWithValue("@Id", id);
con.Open();
cmd.ExecuteNonQuery();
}
return Json(true, JsonRequestBehavior.AllowGet);
}
This method deletes a record.
Step 5: Create View
Create Index.cshtml.
<h2>Employee List</h2>
<input type="text" id="name" placeholder="Name" />
<input type="text" id="email" placeholder="Email" />
<input type="text" id="salary" placeholder="Salary" />
<button onclick="addEmployee()">Add</button>
<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>Action</th>
</tr>
</thead>
<tbody id="employeeTable"></tbody>
</table>
What is this?
This creates a simple UI.
Step 6: AJAX Code (jQuery)
Add jQuery script.
function addEmployee()
{
var emp = {
Name: $("#name").val(),
Email: $("#email").val(),
Salary: $("#salary").val()
};
$.ajax({
url: '/Employee/AddEmployee',
type: 'POST',
data: emp,
success: function ()
{
alert("Employee Added");
loadEmployees();
}
});
}
This function sends employee data to the controller.
Load Employees
function loadEmployees()
{
$.ajax({
url: '/Employee/GetEmployees',
type: 'GET',
success: function (data)
{
var html = "";
$.each(data, function (i, item) {
html += "<tr>";
html += "<td>" + item.Id + "</td>";
html += "<td>" + item.Name + "</td>";
html += "<td>" + item.Email + "</td>";
html += "<td>" + item.Salary + "</td>";
html += "<td><button onclick='deleteEmployee(" + item.Id + ")'>Delete</button></td>";
html += "</tr>";
});
$("#employeeTable").html(html);
}
});
}
This function loads employee data without refreshing the page.
Delete Employee Using AJAX
function deleteEmployee(id)
{
$.ajax({
url: '/Employee/DeleteEmployee/' + id,
type: 'POST',
success: function ()
{
alert("Employee Deleted");
loadEmployees();
}
});
}
Output
Users can:
✔ Add employees
✔ View employee list
✔ Delete employees
All operations happen without page refresh because of AJAX.
Advantages of Using AJAX in MVC
Faster User Experience
The page does not reload.
Better Performance
Only required data is sent to the server.
Modern Web Application Design
AJAX is used in most modern applications.
Conclusion
AJAX helps developers build fast and interactive web applications.
In this article, we built a simple CRUD system using:
ASP.NET MVC
AJAX
jQuery
SQL Server
ADO.NET
without using Entity Framework.