Angularjs CRUD operation with Asp.net MVC

This blogs explains you how to create Angularjs application integrating with Asp.net MVC model.you can also learn how the data is interacted between controller and Service in Angularjs model.Auto search feature is also added in this Angularjs application.
Create a table in local Sql express with below script,

CREATE TABLE [dbo].[EmployeeDetail] (
[EmployeeId] INT IDENTITY (1, 1) NOT NULL,
[EmployeeName] NVARCHAR (MAX) NULL,
[Age] INT NOT NULL,
CONSTRAINT [PK_dbo.EmployeeDetail] PRIMARY KEY CLUSTERED ([EmployeeId] ASC)
);

Create a New Asp.net MVC Project in Visual Studio as below,
File –> New Project

Right click on References and Click Manage Nuget Packets.Install AngularJS in Nuget Packet as shown,

Click on Install. AngularJs scripts will be added as shown in Solution explorer.

Add the below code in BundleConfig.cs,

bundles.Add(new ScriptBundle(“~/bundles/angular”).Include(
“~/Scripts/angular.js”,
“~/Scripts/angular-route.js”
));

Add the below script reference in _Layouts.cshtml,

@Scripts.Render(“~/bundles/angular”)

Create a EmployeeModel.cs class in Model with below code,

[Table(“EmployeeDetail”)]
public class EmployeeModel
{
[Key]
public int EmployeeId { get; set; }
public string EmployeeName { get; set; }
public int Age { get; set; }
}

Replace the User context in AccountModels.cs with the below code,

public class UsersContext : DbContext
{
public UsersContext()
: base(“DefaultConnection”)
{
}
public DbSet<UserProfile> UserProfiles { get; set; }
public DbSet<EmployeeModel> EmployeeDetails { get; set; }
}

Add EmployeeController class file in Controller Folder and add the below,

namespace angularjsCRUDoperation.Controllers
{
public class EmployeeController : Controller
{
private UsersContext db = new UsersContext();
//
// GET: /Employee/Index
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployee()
{
return Json(db.EmployeeDetails.ToList(), JsonRequestBehavior.AllowGet);
}
//
// GET: /Employee/Details/5
public ActionResult Details(int id = 0)
{
EmployeeModel employeedetail = db.EmployeeDetails.Find(id);
if (employeedetail == null)
{
return HttpNotFound();
}
return View(employeedetail);
}
//
// GET: /Employee/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Employee/Create
[HttpPost]
public string Create1(EmployeeModel employeedetail)
{
if (ModelState.IsValid)
{
db.EmployeeDetails.Add(employeedetail);
db.SaveChanges();
return “success”;
}
return “success”;
}
public ActionResult Edit(string id)
{
return View();
}
//
// GET: /Employee/Edit/5
public JsonResult Edit1(string id)
{
EmployeeModel employeedetail = db.EmployeeDetails.Find(Convert.ToInt32(id));
return Json(employeedetail, JsonRequestBehavior.AllowGet);
}
//
// POST: /Employee/Edit/5
[HttpPost]
public string UpdateEmp(EmployeeModel employeedetail)
{
if (ModelState.IsValid)
{
db.Entry(employeedetail).State = EntityState.Modified;
db.SaveChanges();
return “Success”;
}
return “Failure”;
}
//
// GET: /Employee/Delete/5
public ActionResult Delete(int id = 0)
{
EmployeeModel employeedetail = db.EmployeeDetails.Find(id);
if (employeedetail == null)
{
return HttpNotFound();
}
return View(employeedetail);
}
//
// POST: /Employee/Delete/5
[HttpPost, ActionName(“Delete”)]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
EmployeeModel employeedetail = db.EmployeeDetails.Find(id);
db.EmployeeDetails.Remove(employeedetail);
db.SaveChanges();
return RedirectToAction(“Index”);
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}

Add Employee folder in Views and create Create.cshtml, Edit.cshtml and Index.cshtml as shown below in
Solution Explorer.

Put below code in Create.cshtml,

@{
ViewBag.Title = “Create”;
}
<h2>Create</h2>
@using (Html.BeginForm())
{
<div ng-app=”empApp” class=”container”>
<div ng-controller=”EmployeeController”>
<div>
<p class=”divHead”>{{Action}} Employee</p>
<table>
<tr>
<td><b>Id</b></td>
<td>
<input type=”text” disabled ng-model=”EmployeeId” />
</td>
</tr>
<tr>
<td><b>Name</b></td>
<td>
<input type=”text” ng-model=”EmployeeName” />
</td>
</tr>
<tr>
<td><b>Age</b></td>
<td>
<input type=”text” ng-model=”Age” />
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” class=”btnAdd” value=”Save” ng-click=”AddUpdateEmployee()” />
</td>
</tr>
</table>
</div>
</div>
</div>
}
<div>
@Html.ActionLink(“Back to List”, “Index”)
</div>
@section Scripts {
@Scripts.Render(“~/bundles/jqueryval”)
@Scripts.Render(“~/employeeclient.js”)
}

Put below code in Edit.cshtml,

@model angularjsCRUDoperation.Models.EmployeeModel
@{
ViewBag.Title = “Edit”;
}
<h2>Edit</h2>
@using (Html.BeginForm()) {
<div ng-app=”empApp” class=”container”>
<div ng-controller=”EditController”>
<div>
<p class=”divHead”>{{Action}} Employee</p>
<table>
<tr>
<td><b>Id</b></td>
<td>
<input type=”text” disabled ng-model=”EmployeeId” />
</td>
</tr>
<tr>
<td><b>Name</b></td>
<td>
<input type=”text” ng-model=”EmployeeName” />
</td>
</tr>
<tr>
<td><b>Age</b></td>
<td>
<input type=”text” ng-model=”Age” />
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” class=”btnAdd” value=”Save” ng-click=”AddUpdateEmployee()” />
</td>
</tr>
</table>
</div>
</div>
</div>
}
<div>
@Html.ActionLink(“Back to List”, “Index”)
</div&gt
@section Scripts {
@Scripts.Render(“~/bundles/jqueryval”)
@Scripts.Render(“~/employeeclient.js”)
}

Put below code in Index.cshtml,

@{
ViewBag.Title = “Index”;
}
<h2>Index</h2>
<p>
@Html.ActionLink(“Create New”, “Create”)
</p>
@section scripts{
@Scripts.Render(“~/employeeclient.js”)
}
<div ng-app=”empApp” class=”container”>
<br />
<br />
<input type=”text” placeholder=”Search Student” ng-model=”searchEmployee” />
<br />
<div ng-controller=”EmployeeController”>
<table class=”table”>
<tr>
<td>Employee id</td>
<td>Employee Name</td>
<td>
Age
</td>
</tr>
<tr ng-repeat=”r in students | filter : searchEmployee”>
<td>{{r.EmployeeId}}</td>
<td>{{r.EmployeeName}}</td>
<td>
{{r.Age}}
</td>
<td>
<input type=”button” ng-click=”editEmployee(r)” class=”btnAdd” value=”Edit” />
</td>
</tr>
</table>
</div>
</div>

Create a js File employeeclient.js in the root of the project and put below code,

Solution Explorer looks like below,

Run the solution,
OUTPUT as below,

Click below to download the Angularjs crud solution,
https://1drv.ms/u/s!ArddhCoxftkQg9t6X3vBOck_4proJA

Maria academy

Angularjs CRUD operation with Asp.net MVC

Recent Posts

Categories