AngularJS CRUD Operation Using ASP.NET MVC

Pankaj Kumar Choudhary

10y315.4k67100Article

ASP.NET MVC AngularJSAngularJS CRUD Operation

67 Comments

Join the conversation! Your thoughts help the community grow.

vinay gangarapu5y ago
What is this DemoEntities ? Error CS0246 The type or namespace name 'DemoEntities' could not be found (are you missing a using directive or an assembly reference?)...........Yes please.. Can anyone explain this?
jaimin maheta5y ago
How to bind autocomplete text box in this code
jaimin maheta5y ago
This is good code now i want to bind dropdown list country and country select then display state in other dd
सुहास कदम6y ago
Getting error like, Blocked loading mixed active content “http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light”2 MenuStructureReferenceError: angular is not defined Crud_Menu.js:1:11 <anonymous> https://localhost:44394/Scripts/Custom_Script/Crud_Menu.js:1 WARNING: Tried to load AngularJS more than once. angular.js:36336:13 ReferenceError: flotDashSales1Data is not defined examples.dashboard.js:22:23 Error: "[$injector:unpr] Unknown provider: $ScopeProvider <- $Scope <- Cntrl_Menu https://errors.angularjs.org/1.8.0/$injector/unpr?p0=%24ScopeProvider%20%3C-%20%24Scope%20%3C-%20Cntrl_Menu" plz replay and explain
Muhammad Shahid6y ago
Update button is not working in my case.
- Sujay Anand6y ago
  For me, it's working finely...Check it's hitting the update function...
Chamin Ranga7y ago
What is this DemoEntities ? Error CS0246 The type or namespace name 'DemoEntities' could not be found (are you missing a using directive or an assembly reference?)
- Sarvani Dasari6y ago
  Yes please.. Can anyone explain this?
- vinay gangarapu5y ago
  What is this DemoEntities ? Error CS0246 The type or namespace name 'DemoEntities' could not be found (are you missing a using directive or an assembly reference?)
s ganapathi7y ago
Excellent artical
Shahbaz Khan7y ago
Do you have any project example related to this topic
vishal hatiskar7y ago
Good article but what in case of deployment to UAT or Prod we have to replace all the URL from localhost to actual IP address. Is there any configurable solution for this.
Zuli Castrejon7y ago
What is the cod the class AngularJS?
Ahmed Anwar7y ago
@Html.Hidden(EmpID_)? can you explain
- Pankaj Kumar Choudhary7y ago
  If we want to update a employee info then we have to store the employee id, so I used a hidden field to store the Employee id if we are going to update the employee information.
Nelson chantre8y ago
Greetings. my name is chan I would like you to share the code thank you!
Ishtiaq Haider8y ago
I am getting error after editing your code according to my project The server responded with a status of 500 (internal server error) Get_AllProduct:1
Aravind Udhay8y ago
In getemployee method.....how we can get the employee details from entity model and assign it to same entity by using list<employee>..model?.....list<employee> this is entity model or other model??
- Pankaj Kumar Choudhary8y ago
  Hello Aravind, "List < Employee > Emp = Obj.Employees.ToList(); " in this line we create a list of Employee type and getting this data from Employees entity.
Aravind Udhay8y ago
In getemployee method there is List<employee> emp...here inside the list paranthesis there is employee model...this model is entity model or we need to create another model?...
- Pankaj Kumar Choudhary8y ago
  Yes, this is entity modal and you don't need to create another modal.
Sunil Lokhande8y ago
Thanks a lot. to much helpful.
Komal Shah8y ago
Where is DemoEntities file? Can you please add that file and explain it?
Mithilesh Pandey8y ago
What is the code for search option by name or id or age or city?
Mithilesh Pandey8y ago
Seacr option button
Mark Thomas8y ago
What benefit does Angular 6 js have in simple CRUD? I created simple MVC Core which conducts basic CRUD on a table. (Create, read, update, delete). I took a model, conducted scaffolding, and placed the controller code into a repository. For what reason would I Need to introduce Angular? I read a lot of essays on the internet, for someone starting programming few months ago, trying to learn.
- Pankaj Kumar Choudhary8y ago
  Hello Mark, first of all, this is not Angular 6 js it is just Angular 6. Angular6 and Angular js both are different. if you create a simple CRUD application using the MVC then it is required that you have to use the Angular along with. In this article, I tried to explain the basic of Angular js using the CRUD operation because CRUD operation is the basic operations that we performed in each application. Now your question is that why we need Angular if we can achieve the same thing using the MVC, You are right but using Angular we can create the single page application that is not possible using the simple .net MVC application. using Angular we can increase the user experiences with providing the better user interactions.
ahmed shalayel8y ago
What the DemoEntities ??
- Pankaj Kumar Choudhary8y ago
  This is Entity Database instance name that is created after configuring the Entity framework.
Sujay Anand8y ago
How to make page refresh after update?
Debasis Das8y ago
Thanks for sharing this code. Really it's working.
harish behera8y ago
Submit Button not working in Index page to Add Employee Can you please help me in getting rid of this error
Sapana Chaudhary8y ago
Oh my god this article saved my life, the perfect article for fresher
Vijay Kumar8y ago
I m getting error in update function because controller action method Update_Employee no get the value of employee id please help me to solve this problem
- Pankaj Kumar Choudhary8y ago
  Are You getting value of Employee Id in "EmpId_" field at Angular Js level it may be possible that "EmpId_" is empty ??
Jasmin Becirevic8y ago
Hello Pankaj, thank you for the great article. Can you also provide us the code? BR
- Pankaj Kumar Choudhary8y ago
  Sorry! For this actually, I forget to upload the source code for this project. Currently i don't have any source code of this.
Muhanad YOUNIS8y ago
Thank you for your efforts, the code works perfect and its a very nice sample.
- Yash Sampat8y ago
  Hi Younis ..I dont see the the code download for this article. If you have can you please send it to me
santhosh kumar8y ago
Dear Pankaj, Code working Perfectly and am very happy with that., Thank you Brooo
apex patel8y ago
Thank you for your great insight about MVC and AngularJS
kaleem shaik8y ago
List <Employee> Emp = Obj.Employees.ToList(); Here what is the difference between Employee and Employees metioned in that code line
youssef azouhri8y ago
Hey kumar thank you for this article it s really rich . god bless you
sreenivasa k8y ago
Really good article and worth reading. tried as is and worked perfectly.
Wil Cansino9y ago
Page does not reload automatically after Update, Add, Delete operations.
Sanjay Mirdwal9y ago
Thanks very useful article.
Jenkins J9y ago
Really it is very valuable for beginners...Thanks
Navee Chandra9y ago
Hey i am facing problem with save data using above code,can you please help me out?is there any changes in above code
- Pankaj Kumar Choudhary9y ago
  What kind of error you are getting? write in comment.
Kishore Madanapali9y ago
Hi,can u post an example on ng -grid filters
Vishal Mahajan9y ago
Nice Article for Angular js Beginners
ib bellad9y ago
Nice article. I had drop down list in registration form while editing how to bind the values to drop down list.
- Pankaj Kumar Choudhary9y ago
  Hello! belled you can use ng-selected directive in your dropdown like <select name="City" id="ddl_City" tabindex="12" ng-model="Executive.City" class="ddl" style="width:100%" required> <option value="">Select</option> <option ng-repeat="City in CityList" value="{{City.GeogId}}" ng-selected="SelectedCity==City.GeogId">{{City.GeogName}}</option> </select> here SelectedCity is the value that you want to show selected in dropdown and assign the data into SelectedCity at the time of edit
Crest Logix9y ago
It's very important learning for beginning
Nirmal Roy9y ago
Can you send me full project? so that i can download from here.
Nirmal Roy9y ago
Can you send me full project?
Vishal Ghadage9y ago
Really nice article
Hamid Talebi9y ago
Useful article .thank you
Manav Pandya10y ago
Great for beginner ....
Vignesh Mani10y ago
Useful One
Anu V10y ago
Nice one
Ramesh Palaniappan10y ago
Nice content
sreenivasa k10y ago
Really good
Avinash Thakur10y ago
Very Nice Article sir.
Debasis Saha10y ago
Nice one..
kalu singh rao10y ago
Nice share
Shaili Dashora10y ago
Nice Article,Helpful.

After creating the Controller, now, we create a View. Right click on Index method and create an Empty View.

Paste the following code into the Index View:

@{
ViewBag.Title = "Index";
}
<style>
.btn-space {
margin-left: -5%;
background-color: cornflowerblue;
font-size: large;
}
</style>
<h2>Index</h2>
<div ng-app="myApp">
<div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
<p class="divHead">List of Employee</p>
<table cellpadding="12" class="table table-bordered table-hover">
<tr>
<td>
<b>ID</b>
</td>
<td>
<b>Name</b>
</td>
<td>
<b>City</b>
</td>
<td>
<b>Age</b>
</td>
<td>
<b>Actions</b>
</td>
</tr>
<tr ng-repeat="Emp in employees">
<td>
{{Emp.Emp_Id}}
</td>
<td>
{{Emp.Emp_Name}}
</td>
<td>
{{Emp.Emp_City}}
</td>
<td>
{{Emp.Emp_Age}}
</td>
<td>
<input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
<input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
</td>
</tr>
</table>
<div class="form-horizontal" role="form">
<div class="container">
<div class="row">
<h2>
<span id="spn">Add New Employee</span>
</h2>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-model="EmpName">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">City:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputPassword" placeholder="City" ng-model="EmpCity">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Age:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputLabel3" placeholder="Age" ng-model="EmpAge">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />
</div>
</div>
</div>
</div>
</div>
@Html.Hidden("EmpID_")
</div>

For CRUD operations in AngularJS, we create a JavaScript file, write the code into that file, and implement this file into our Index View.

First, create a JavaScript file and copy the following code.

create

JavaScript code

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
debugger;
$scope.InsertData = function() {
var Action = document.getElementById("btnSave").getAttribute("value");
if (Action == "Submit") {
$scope.Employe = {};
$scope.Employe.Emp_Name = $scope.EmpName;
$scope.Employe.Emp_City = $scope.EmpCity;
$scope.Employe.Emp_Age = $scope.EmpAge;
$http({
method: "post",
url: "http://localhost:39209/Employee/Insert_Employee",
datatype: "json",
data: JSON.stringify($scope.Employe)
}).then(function(response) {
alert(response.data);
$scope.GetAllData();
$scope.EmpName = "";
$scope.EmpCity = "";
$scope.EmpAge = "";
})
} else {
$scope.Employe = {};
$scope.Employe.Emp_Name = $scope.EmpName;
$scope.Employe.Emp_City = $scope.EmpCity;
$scope.Employe.Emp_Age = $scope.EmpAge;
$scope.Employe.Emp_Id = document.getElementById("EmpID_").value;
$http({
method: "post",
url: "http://localhost:39209/Employee/Update_Employee",
datatype: "json",
data: JSON.stringify($scope.Employe)
}).then(function(response) {
alert(response.data);
$scope.GetAllData();
$scope.EmpName = "";
$scope.EmpCity = "";
$scope.EmpAge = "";
document.getElementById("btnSave").setAttribute("value", "Submit");
document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";
document.getElementById("spn").innerHTML = "Add New Employee";
})
}
}
$scope.GetAllData = function() {
$http({
method: "get",
url: "http://localhost:39209/Employee/Get_AllEmployee"
}).then(function(response) {
$scope.employees = response.data;
}, function() {
alert("Error Occur");
})
};
$scope.DeleteEmp = function(Emp) {
$http({
method: "post",
url: "http://localhost:39209/Employee/Delete_Employee",
datatype: "json",
data: JSON.stringify(Emp)
}).then(function(response) {
alert(response.data);
$scope.GetAllData();
})
};
$scope.UpdateEmp = function(Emp) {
document.getElementById("EmpID_").value = Emp.Emp_Id;
$scope.EmpName = Emp.Emp_Name;
$scope.EmpCity = Emp.Emp_City;
$scope.EmpAge = Emp.Emp_Age;
document.getElementById("btnSave").setAttribute("value", "Update");
document.getElementById("btnSave").style.backgroundColor = "Yellow";
document.getElementById("spn").innerHTML = "Update Employee Information";
}
})

Now, provide the references of AngularJS and AngularCode file that we created into Index View.

Now, I think our project is ready to work. So, let’s run the application. Press F5 and you can see that following screen will be visible on your browser.

browser

Now, we will learn about all CRUD operations (create, read, update and delete) and understand how they work.

Get all Employee Record

When we run the application, at first, all employees records will retrieve and show up in the grid. You can see that in “ng-init” directive, we call the “getAllData” record. This method is responsible for retrieval of all the records.

code

In “AngularCode” file you can find this method.
code

In “GetAllData” method, we used the $http service of AngularJS and call the “Get_AllEmployee” method of “Employee” controller. Code of “Get_AllEmployee” method is the following.

Code

In this method, we get all employees' records from “Employee” entity and pass as JSON result.

Add New Employee

When we click on “Submit” button, the “InsertData” method will be call.

Submit

In this method, we retrieve the data from Name, City, and Age field and insert into “Employe” object . We call the “Insert_Employee” method of Employee Controller and Pass the “Employe” object as parameter.
code

In controller section, we add the “Employe” object into Employee entity.

code

And pass the Confirmation message as confirmation. Now, you can see that the record of “Sandeep” is added successfully.

index

Delete The Employee Record

We are using ng-repeat directive and inserting Employee Name, Age, Id and City information into table. You can see that we are creating on extra column(“Action”). In this column, we are adding two buttons for “Delete” and “Update” command and on ng-click directive, we are calling “DeleteEmp” method for deleting operation and “UpdateEmp” for update operation. In both methods, we are passing the Object of Employee.

code

In “DeleteEmp” method, we are calling the “Delete_Employee” of controller using “$http”,
code

In “Delete_Employee” method, we are removing the Employee record from “Employee” table.

code

Let’s try to delete the record of “Pardeep” Employee.

delete

Update Employee Record

In Update command, we are calling the “UpdateEmp” method in which we are inserting the information of employee into textboxes and changing the properties of button and span section.
code

Let’s click on Update button for employee “Nitin”.

Update

Now, we change the name and City for this employee.
Update

When we click on “Update” button, then “InsertData” method of AngularCode file we will be called and “else” section will execute because the value of the button is not equal to “Submit”.
code

In the above code, we are calling the “Update_Employee” method of Controller. In “Update_Employee” method, we update the record for employee and send the confirmation message.
code

You can check that information for employee “Nitin” has been updated.

output

I hope you liked the article. Thanks to read the article. If you have any doubt our query, then leave it in the comment section.