Building a modern web application often requires a smooth connection between the frontend (AngularJS) and the backend (ASP.NET C#) with SQL Server as the database.
In this article, we’ll walk through how to create, read, update, and delete (CRUD) data using AngularJS and ASP.NET Web API (C#).
🧩 Overview
We’ll build a small app that manages a "Student" table with fields like:
StudentID
Name
Email
Age
City
We’ll use:
⚙️ Step 1. Create Database and Table
CREATE DATABASE SchoolDB;
GO
USE SchoolDB;
GO
CREATE TABLE Students (
StudentID INT IDENTITY(1,1) PRIMARY KEY,
Name NVARCHAR(100),
Email NVARCHAR(100),
Age INT,
City NVARCHAR(100)
);
🖥️ Step 2. Create ASP.NET Web API Project
Open Visual Studio → Create a new project → Choose
ASP.NET Web Application (.NET Framework)
Select Web API template → Name it StudentAPI.
🧠 Step 3. Create the C# Model
File: Models/Student.cs
using System;
namespace StudentAPI.Models
{
public class Student
{
public int StudentID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public int Age { get; set; }
public string City { get; set; }
}
}
🗄️ Step 4. Database Connection Class
File: Models/DbClass.cs
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace StudentAPI.Models
{
public class DbClass
{
string connectionString = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
public DataTable GetData(string query)
{
using (SqlConnection con = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
}
}
public int ExecuteQuery(string query)
{
using (SqlConnection con = new SqlConnection(connectionString))
{
con.Open();
SqlCommand cmd = new SqlCommand(query, con);
return cmd.ExecuteNonQuery();
}
}
}
}
🧩 Step 5. Web.config Connection String
<connectionStrings>
<add name="ConnString"
connectionString="Data Source=.;Initial Catalog=SchoolDB;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
🚀 Step 6. Create Web API Controller
File: Controllers/StudentController.cs
using StudentAPI.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Web.Http;
namespace StudentAPI.Controllers
{
[RoutePrefix("api/student")]
public class StudentController : ApiController
{
DbClass db = new DbClass();
// GET: api/student/get
[HttpGet]
[Route("get")]
public IHttpActionResult GetAllStudents()
{
DataTable dt = db.GetData("SELECT * FROM Students");
return Ok(dt);
}
// POST: api/student/save
[HttpPost]
[Route("save")]
public IHttpActionResult SaveStudent(Student s)
{
string query = $"INSERT INTO Students (Name, Email, Age, City) VALUES ('{s.Name}', '{s.Email}', {s.Age}, '{s.City}')";
int result = db.ExecuteQuery(query);
return Ok(result);
}
// PUT: api/student/update
[HttpPut]
[Route("update")]
public IHttpActionResult UpdateStudent(Student s)
{
string query = $"UPDATE Students SET Name='{s.Name}', Email='{s.Email}', Age={s.Age}, City='{s.City}' WHERE StudentID={s.StudentID}";
int result = db.ExecuteQuery(query);
return Ok(result);
}
// DELETE: api/student/delete/5
[HttpDelete]
[Route("delete/{id}")]
public IHttpActionResult DeleteStudent(int id)
{
string query = $"DELETE FROM Students WHERE StudentID={id}";
int result = db.ExecuteQuery(query);
return Ok(result);
}
}
}
🖼️ Step 7. Frontend Using AngularJS
Create a new HTML file in your project (e.g., index.html) and include AngularJS.
<!DOCTYPE html>
<html>
<head>
<title>Student Management</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="StudentApp" ng-controller="StudentCtrl">
<h2>Student Management System</h2>
<form ng-submit="saveData()">
<input type="hidden" ng-model="Student.StudentID">
<input type="text" ng-model="Student.Name" placeholder="Name" required>
<input type="email" ng-model="Student.Email" placeholder="Email" required>
<input type="number" ng-model="Student.Age" placeholder="Age" required>
<input type="text" ng-model="Student.City" placeholder="City" required>
<button type="submit">{{btnText}}</button>
</form>
<table border="1" width="100%">
<tr><th>ID</th><th>Name</th><th>Email</th><th>Age</th><th>City</th><th>Actions</th></tr>
<tr ng-repeat="x in Students">
<td>{{x.StudentID}}</td>
<td>{{x.Name}}</td>
<td>{{x.Email}}</td>
<td>{{x.Age}}</td>
<td>{{x.City}}</td>
<td>
<button ng-click="editData(x)">Edit</button>
<button ng-click="deleteData(x.StudentID)">Delete</button>
</td>
</tr>
</table>
<script>
var app = angular.module("StudentApp", []);
app.controller("StudentCtrl", function ($scope, $http) {
$scope.btnText = "Save";
$scope.loadData = function () {
$http.get("/api/student/get").then(function (response) {
$scope.Students = response.data;
});
};
$scope.saveData = function () {
if ($scope.Student.StudentID == null) {
$http.post("/api/student/save", $scope.Student).then(function () {
alert("Saved Successfully");
$scope.loadData();
$scope.Student = {};
});
} else {
$http.put("/api/student/update", $scope.Student).then(function () {
alert("Updated Successfully");
$scope.loadData();
$scope.Student = {};
$scope.btnText = "Save";
});
}
};
$scope.editData = function (x) {
$scope.Student = angular.copy(x);
$scope.btnText = "Update";
};
$scope.deleteData = function (id) {
if (confirm("Are you sure to delete?")) {
$http.delete("/api/student/delete/" + id).then(function () {
alert("Deleted Successfully");
$scope.loadData();
});
}
};
$scope.loadData();
});
</script>
</body>
</html>
✅ Step 8. Run and Test
Run your ASP.NET Web API project (it should start on https://localhost:xxxx/).
Open index.html in the browser.
You can now Add, Edit, Delete, and View student records in real-time.
🌐 External References
Microsoft Docs – ASP.NET Web API
AngularJS Official Documentation
SQL Server Management Studio (SSMS)
💡 Summary
You’ve successfully built a complete CRUD system using:
AngularJS for frontend UI and API communication.
ASP.NET Web API (C#) for backend logic.
SQL Server for data persistence.
This structure is lightweight, scalable, and ideal for small-to-medium web applications.