In this article I will show you how to perform CRUD operations in Asp.Net MVC5 using AngularJS.
Add AngularJS using the Manage Nuget Package Manager.
Add Entity Data Model.
AngularJS Script with App initialization, Service/Factory and Controller code
Use the below code
MVC Controller code:
Try to add the below code in the controller to perform insert, retrieve and delete records.
Add AngularJS using the Manage Nuget Package Manager.
Add Entity Data Model.
AngularJS Script with App initialization, Service/Factory and Controller code
Use the below code
var PersonApp = angular.module('PersonApp', []);
PersonApp.factory('PersonService', ['$http', function ($http) {
return {
getPersons: function () {
return $http.get('/Person/GetPesrons');
},
addPerson: function (person) {
return $http.post('/Person/AddPerson',
person);
},
deletePerson: function (Id) {
return $http.post('/Person/DeletePerson?id=' + Id);
},
updatePerson: function (person) {
return $http.post('/Person/UpdatePerson' + person.Id, person);
}
}
}]);
PersonApp.controller('PersonController', function ($scope, PersonService) {
//get all Customers
PersonService.getPersons().success(function (data) {
$scope.persons = data;
})
.error(function (data) {
alert("An Error has occured while loading data! " + data.ExceptionMessage);
});
// add Person
$scope.personSubmit = function
() {
var people = {};
people["Name"]
= $scope.Name;
people["City"]
= $scope.City;
people["Contact"]
= $scope.Contact;
PersonService.addPerson(people).success(function (data) {
alert("Added
Successfully!!");
window.location.href = '/Person/Index';
}).error(function (data) {
alert("An Error has occured
while Adding person! " + data.ExceptionMessage);
});
};
// delete Person
$scope.delperson = function () {
var currentPerson = this.prsn;
PersonService.deletePerson(currentPerson.Id).success(function (data) {
alert(data);
window.location.href = '/Person/Index';
}).error(function (data) {
alert("An Error has occured
while deleting person! " + data.ExceptionMessage);
});
}
});
MVC Controller code:
Try to add the below code in the controller to perform insert, retrieve and delete records.
public class PersonController : Controller
{
private PersonEntities dbe = new PersonEntities();
// GET: Person
public ActionResult Index()
{
return View();
}
public JsonResult GetPesrons()
{
var result = from a in dbe.People
select new
{
a.Id,
a.Name,
a.City,
a.Contact,
date =
a.CreatedDate.ToString()
};
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult Create()
{
return View();
}
public JsonResult
AddPerson(Person model)
{
model.CreatedDate = DateTime.Now;
dbe.People.Add(model);
dbe.SaveChanges();
return Json(model, JsonRequestBehavior.AllowGet);
}
public JsonResult DeletePerson(int id)
{
var
result = "";
Person p = dbe.People.Find(id);
if
(p != null)
{
dbe.People.Remove(p);
dbe.SaveChanges();
result = "Deleted
Successfully!!";
}
else
{
result = "An Error has occured
please try again!";
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
Create View code:
Add below code in the create view.
<h2>Create Person</h2>
<script src="~/scripts/App/PersonClinet.js"></script>
<div
ng-app="PersonApp" class="container">
<div ng-controller="PersonController" class="form-group">
<table class="table-condensed">
<tr>
<td><label class="control-label">Name</label></td>
<td><input class="form-control" type="text" ng-model="Name" /></td>
</tr>
<tr>
<td><label class="control-label">City</label></td>
<td><input class="form-control" type="text" ng-model="City" /></td>
</tr>
<tr>
<td><label class="control-label">Contact</label></td>
<td><input class="form-control" type="text" ng-model="Contact" /></td>
</tr>
<tr>
<td><input class="btn btn-danger" type="button" value="Back" /></td>
<td><input class="btn btn-success
btn-group-lg"
type="button" ng-click="personSubmit()" value="Save" /></td>
</tr>
</table>
</div>
</div>
Index View code:
Add below code in the Index view.
<script src="~/scripts/App/PersonClinet.js"></script>
<div
ng-app="PersonApp" class="container">
<div ng-controller="PersonController">
<table class="table table-bordered
table-striped table-hover table-responsive">
<tr class="danger">
<th>Name</th>
<th>City</th>
<th>Contact</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
<tr ng-repeat="prsn in persons ">
<td>{{prsn.Name}}</td>
<td>{{prsn.City}}</td>
<td>{{prsn.Contact}}</td>
<td>{{prsn.date}}</td>
<td>
<p><a href="javascript:;"><span class="glyphicon
glyphicon-edit"
aria-hidden="true"></span></a> |
<a data-ng-click="delperson(prsn)" href="javascript:;"><span class="glyphicon
glyphicon-trash"
aria-hidden="true"></span></a></p>
</td>
</tr>
</table>
</div>
</div>