AJAX CRUD in ASP.NET MVC Without Entity Framework

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:

Loading data dynamically
Submitting forms without refresh
Updating UI instantly

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.