CRUD Operation In ASP.NET MVC Using Angular With Basics

This is part two of CRUD operation in ASP MVC using Angular. Before starting, I recommend you read my previous article about Angular and its features and versions. To read, please click here.

We have covered the basic things of Angular and its features, versions, folder structures, and usage of Angular configuration files in our previous article. In this article, we are going to create a Database and a Controller to perform CRUD operation using Angular.

Let's create a simple employee database and create employee table to save our records.

I have named our employee table as "EmployeeDetails". Here, EmpId is a primary key and we have set it as an identity column.

Please find some sample insert scripts here.

Insert into [EmployeeDetails](EmpName,EmpAge,EmpCity,EmpMobileNo)VALUES('Ramesh',27,'Bangalore','1234567890');
Insert into [EmployeeDetails](EmpName,EmpAge,EmpCity,EmpMobileNo)VALUES('Marry',23,'Chennai','1234567890');
Insert into [EmployeeDetails](EmpName,EmpAge,EmpCity,EmpMobileNo)VALUES('Sushanth',27,'Delhi','1234567890');
Insert into [EmployeeDetails](EmpName,EmpAge,EmpCity,EmpMobileNo)VALUES('vijay',27,'Chennai','1234567890');

We have already created a project "AngularSampleDemo" and included all the required Angular files in our previous article. We are going to continue with this same project in this tutorial.

Let's first add Entity model to our project. To add, please follow the below steps.

Select "Data Model" folder = > Right Click -> Add -> New Item -> Select "Ado.Net Entity Model".

Now, you can see that our entity model has been added to our data model folder. Let's add Employee Controller to our project under Controller folder.

Copy the below code and paste it in our employee controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AngularSampleDemo.DataModel;
namespace AngularSampleDemo.Controllers
{
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetAllEmployees()
{
using (EmployeeEntities entities = new EmployeeEntities())
{
List<EmployeeDetail> employeeList = new List<EmployeeDetail>();
employeeList = entities.EmployeeDetails.ToList();
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
[HttpGet]
public JsonResult GetEmployee(int EmpId)
{
using (EmployeeEntities entities = new EmployeeEntities())
{
EmployeeDetail _employee = entities.EmployeeDetails.Where(x => x.EmpId == EmpId).Select(x => x).FirstOrDefault();
return Json(_employee, JsonRequestBehavior.AllowGet);
}
}
[HttpPost]
public JsonResult InsertEmployee(EmployeeDetail employeeDetail)
{
using (EmployeeEntities entities = new EmployeeEntities())
{
entities.EmployeeDetails.Add(employeeDetails);
entities.SaveChanges();
}
return Json(true, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult UpdateEmployee(EmployeeDetail employeeDetail)
{
using (EmployeeEntities entities = new EmployeeEntities())
{
EmployeeDetail _employee = entities.EmployeeDetails.Where(x => x.EmpId == employeeDetails.EmpId).Select(x => x).FirstOrDefault();
_employee.EmpName = employeeDetails.EmpName;
_employee.EmpCity = employeeDetails.EmpCity;
_employee.EmpAge = employeeDetails.EmpAge;
entities.SaveChanges();
}
return Json(true, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public JsonResult DeleteEmployee(int EmpId)
{
using (EmployeeEntities entities = new EmployeeEntities())
{
EmployeeDetail _employee = entities.EmployeeDetails.Where(x => x.EmpId == EmpId).Select(x => x).FirstOrDefault();
entities.EmployeeDetails.Remove(_employee);
entities.SaveChanges();
}
return Json(true, JsonRequestBehavior.AllowGet);
}
}
}

Let's understand the code.

GetAllEmployees() method is used to return the list of employees from our EmployeeDetails table.
GetEmployee(int EmpId) method is used to return the particular employee from our EmployeeDetails table using employee Id(EmpId)
InsertEmployee(EmployeeDetail employeeDetail) method is used to insert the employee information in our employee details table.
UpdateEmployee(EmployeeDetail employeeDetail) method is used to update the employee information in our employee details table using employee Id.
DeleteEmployee(int EmpId) method is used to delete the employee information from employee details table using emp Id.

Note

All the action results are going to return the data as JSON data.
EmployeeEntities is our entity DB context to access employee table informations.

To know more about entity context and Entity Model, please refer to the below articles. Definitely, you will get some basic idea about it.

Entity Framework Introductions

Please provide your valuable comments to improve my writting. Thanks for reading.

<<Click here for previous part