{"id":532,"date":"2017-05-19T12:42:52","date_gmt":"2017-05-19T12:42:52","guid":{"rendered":"http:\/\/www.softwaretraininginchennai.com\/blog\/?p=532"},"modified":"2017-05-19T13:08:50","modified_gmt":"2017-05-19T13:08:50","slug":"angularjs-crud-operation-with-asp-net-mvc","status":"publish","type":"post","link":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/","title":{"rendered":"Angularjs CRUD operation with Asp.net MVC"},"content":{"rendered":"<div style=\"color: #000;\">\nThis 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.<br \/>\nCreate a table in local Sql express with below script,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 543px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">CREATE TABLE [dbo].[EmployeeDetail] (<br \/>\n[EmployeeId] INT IDENTITY (1, 1) NOT NULL,<br \/>\n[EmployeeName] NVARCHAR (MAX) NULL,<br \/>\n[Age] INT NOT NULL,<br \/>\nCONSTRAINT [PK_dbo.EmployeeDetail] PRIMARY KEY CLUSTERED ([EmployeeId] ASC)<br \/>\n);<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Create a New Asp.net MVC Project in Visual Studio as below,<br \/>\nFile &#8211;&gt; New Project<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png\" alt=\"\" \/><br \/>\nRight click on References and Click Manage Nuget Packets.Install AngularJS in Nuget Packet as shown,<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR2.png\" alt=\"\" \/><br \/>\nClick on Install. AngularJs scripts will be added as shown in Solution explorer.<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR3.png\" alt=\"\" \/><br \/>\nAdd the below code in BundleConfig.cs,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 687px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">bundles.Add(new ScriptBundle(&#8220;~\/bundles\/angular&#8221;).Include(<br \/>\n&#8220;~\/Scripts\/angular.js&#8221;,<br \/>\n&#8220;~\/Scripts\/angular-route.js&#8221;<br \/>\n));<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Add the below script reference in _Layouts.cshtml,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 687px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">@Scripts.Render(&#8220;~\/bundles\/angular&#8221;)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Create a EmployeeModel.cs class in Model with below code,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 685px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">[Table(&#8220;EmployeeDetail&#8221;)]<br \/>\npublic class EmployeeModel<br \/>\n{<br \/>\n[Key]<br \/>\npublic int EmployeeId { get; set; }<br \/>\npublic string EmployeeName { get; set; }<br \/>\npublic int Age { get; set; }<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Replace the User context in AccountModels.cs with the below code,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 685px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">public class UsersContext : DbContext<br \/>\n{<br \/>\npublic UsersContext()<br \/>\n: base(&#8220;DefaultConnection&#8221;)<br \/>\n{<br \/>\n}<br \/>\npublic DbSet&lt;UserProfile&gt; UserProfiles { get; set; }<br \/>\npublic DbSet&lt;EmployeeModel&gt; EmployeeDetails { get; set; }<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Add EmployeeController class file in Controller Folder and add the below,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 683px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">namespace angularjsCRUDoperation.Controllers<br \/>\n{<br \/>\npublic class EmployeeController : Controller<br \/>\n{<br \/>\nprivate UsersContext db = new UsersContext();<br \/>\n\/\/<br \/>\n\/\/ GET: \/Employee\/Index<br \/>\npublic ActionResult Index()<br \/>\n{<br \/>\nreturn View();<br \/>\n}<br \/>\npublic JsonResult GetEmployee()<br \/>\n{<br \/>\nreturn Json(db.EmployeeDetails.ToList(), JsonRequestBehavior.AllowGet);<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ GET: \/Employee\/Details\/5<br \/>\npublic ActionResult Details(int id = 0)<br \/>\n{<br \/>\nEmployeeModel employeedetail = db.EmployeeDetails.Find(id);<br \/>\nif (employeedetail == null)<br \/>\n{<br \/>\nreturn HttpNotFound();<br \/>\n}<br \/>\nreturn View(employeedetail);<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ GET: \/Employee\/Create<br \/>\npublic ActionResult Create()<br \/>\n{<br \/>\nreturn View();<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ POST: \/Employee\/Create<br \/>\n[HttpPost]<br \/>\npublic string Create1(EmployeeModel employeedetail)<br \/>\n{<br \/>\nif (ModelState.IsValid)<br \/>\n{<br \/>\ndb.EmployeeDetails.Add(employeedetail);<br \/>\ndb.SaveChanges();<br \/>\nreturn &#8220;success&#8221;;<br \/>\n}<br \/>\nreturn &#8220;success&#8221;;<br \/>\n}<br \/>\npublic ActionResult Edit(string id)<br \/>\n{<br \/>\nreturn View();<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ GET: \/Employee\/Edit\/5<br \/>\npublic JsonResult Edit1(string id)<br \/>\n{<br \/>\nEmployeeModel employeedetail = db.EmployeeDetails.Find(Convert.ToInt32(id));<br \/>\nreturn Json(employeedetail, JsonRequestBehavior.AllowGet);<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ POST: \/Employee\/Edit\/5<br \/>\n[HttpPost]<br \/>\npublic string UpdateEmp(EmployeeModel employeedetail)<br \/>\n{<br \/>\nif (ModelState.IsValid)<br \/>\n{<br \/>\ndb.Entry(employeedetail).State = EntityState.Modified;<br \/>\ndb.SaveChanges();<br \/>\nreturn &#8220;Success&#8221;;<br \/>\n}<br \/>\nreturn &#8220;Failure&#8221;;<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ GET: \/Employee\/Delete\/5<br \/>\npublic ActionResult Delete(int id = 0)<br \/>\n{<br \/>\nEmployeeModel employeedetail = db.EmployeeDetails.Find(id);<br \/>\nif (employeedetail == null)<br \/>\n{<br \/>\nreturn HttpNotFound();<br \/>\n}<br \/>\nreturn View(employeedetail);<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ POST: \/Employee\/Delete\/5<br \/>\n[HttpPost, ActionName(&#8220;Delete&#8221;)]<br \/>\n[ValidateAntiForgeryToken]<br \/>\npublic ActionResult DeleteConfirmed(int id)<br \/>\n{<br \/>\nEmployeeModel employeedetail = db.EmployeeDetails.Find(id);<br \/>\ndb.EmployeeDetails.Remove(employeedetail);<br \/>\ndb.SaveChanges();<br \/>\nreturn RedirectToAction(&#8220;Index&#8221;);<br \/>\n}<br \/>\nprotected override void Dispose(bool disposing)<br \/>\n{<br \/>\ndb.Dispose();<br \/>\nbase.Dispose(disposing);<br \/>\n}<br \/>\n}<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Add Employee folder in Views and create Create.cshtml, Edit.cshtml and Index.cshtml as shown below in<br \/>\nSolution Explorer.<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR4.png\" alt=\"\" \/><br \/>\nPut below code in Create.cshtml,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 678px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">@{<br \/>\nViewBag.Title = &#8220;Create&#8221;;<br \/>\n}<br \/>\n&lt;h2&gt;Create&lt;\/h2&gt;<br \/>\n@using (Html.BeginForm())<br \/>\n{<br \/>\n&lt;div ng-app=&#8221;empApp&#8221; class=&#8221;container&#8221;&gt;<br \/>\n&lt;div ng-controller=&#8221;EmployeeController&#8221;&gt;<br \/>\n&lt;div&gt;<br \/>\n&lt;p class=&#8221;divHead&#8221;&gt;{{Action}} Employee&lt;\/p&gt;<br \/>\n&lt;table&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lt;b&gt;Id&lt;\/b&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;text&#8221; disabled ng-model=&#8221;EmployeeId&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lt;b&gt;Name&lt;\/b&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;text&#8221; ng-model=&#8221;EmployeeName&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lt;b&gt;Age&lt;\/b&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;text&#8221; ng-model=&#8221;Age&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td colspan=&#8221;2&#8243;&gt;<br \/>\n&lt;input type=&#8221;button&#8221; class=&#8221;btnAdd&#8221; value=&#8221;Save&#8221; ng-click=&#8221;AddUpdateEmployee()&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n}<br \/>\n&lt;div&gt;<br \/>\n@Html.ActionLink(&#8220;Back to List&#8221;, &#8220;Index&#8221;)<br \/>\n&lt;\/div&gt;<br \/>\n@section Scripts {<br \/>\n@Scripts.Render(&#8220;~\/bundles\/jqueryval&#8221;)<br \/>\n@Scripts.Render(&#8220;~\/employeeclient.js&#8221;)<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Put below code in Edit.cshtml,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 681px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">@model angularjsCRUDoperation.Models.EmployeeModel<br \/>\n@{<br \/>\nViewBag.Title = &#8220;Edit&#8221;;<br \/>\n}<br \/>\n&lt;h2&gt;Edit&lt;\/h2&gt;<br \/>\n@using (Html.BeginForm()) {<br \/>\n&lt;div ng-app=&#8221;empApp&#8221; class=&#8221;container&#8221;&gt;<br \/>\n&lt;div ng-controller=&#8221;EditController&#8221;&gt;<br \/>\n&lt;div&gt;<br \/>\n&lt;p class=&#8221;divHead&#8221;&gt;{{Action}} Employee&lt;\/p&gt;<br \/>\n&lt;table&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lt;b&gt;Id&lt;\/b&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;text&#8221; disabled ng-model=&#8221;EmployeeId&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lt;b&gt;Name&lt;\/b&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;text&#8221; ng-model=&#8221;EmployeeName&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;&lt;b&gt;Age&lt;\/b&gt;&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;text&#8221; ng-model=&#8221;Age&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td colspan=&#8221;2&#8243;&gt;<br \/>\n&lt;input type=&#8221;button&#8221; class=&#8221;btnAdd&#8221; value=&#8221;Save&#8221; ng-click=&#8221;AddUpdateEmployee()&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n}<br \/>\n&lt;div&gt;<br \/>\n@Html.ActionLink(&#8220;Back to List&#8221;, &#8220;Index&#8221;)<br \/>\n&lt;\/div&#038;gt<br \/>\n@section Scripts {<br \/>\n@Scripts.Render(&#8220;~\/bundles\/jqueryval&#8221;)<br \/>\n@Scripts.Render(&#8220;~\/employeeclient.js&#8221;)<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Put below code in Index.cshtml,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 680px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">@{<br \/>\nViewBag.Title = &#8220;Index&#8221;;<br \/>\n}<br \/>\n&lt;h2&gt;Index&lt;\/h2&gt;<br \/>\n&lt;p&gt;<br \/>\n@Html.ActionLink(&#8220;Create New&#8221;, &#8220;Create&#8221;)<br \/>\n&lt;\/p&gt;<br \/>\n@section scripts{<br \/>\n@Scripts.Render(&#8220;~\/employeeclient.js&#8221;)<br \/>\n}<br \/>\n&lt;div ng-app=&#8221;empApp&#8221; class=&#8221;container&#8221;&gt;<br \/>\n&lt;br \/&gt;<br \/>\n&lt;br \/&gt;<br \/>\n&lt;input type=&#8221;text&#8221; placeholder=&#8221;Search Student&#8221; ng-model=&#8221;searchEmployee&#8221; \/&gt;<br \/>\n&lt;br \/&gt;<br \/>\n&lt;div ng-controller=&#8221;EmployeeController&#8221;&gt;<br \/>\n&lt;table class=&#8221;table&#8221;&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Employee id&lt;\/td&gt;<br \/>\n&lt;td&gt;Employee Name&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\nAge<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr ng-repeat=&#8221;r in students | filter : searchEmployee&#8221;&gt;<br \/>\n&lt;td&gt;{{r.EmployeeId}}&lt;\/td&gt;<br \/>\n&lt;td&gt;{{r.EmployeeName}}&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n{{r.Age}}<br \/>\n&lt;\/td&gt;<br \/>\n&lt;td&gt;<br \/>\n&lt;input type=&#8221;button&#8221; ng-click=&#8221;editEmployee(r)&#8221; class=&#8221;btnAdd&#8221; value=&#8221;Edit&#8221; \/&gt;<br \/>\n&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Create a js File employeeclient.js in the root of the project and put below code,<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 682px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr>\n<td style=\"border: solid #a3a3a3 1.0pt; padding: 5px;\">var empApp = angular.module(&#8217;empApp&#8217;, [])<br \/>\nempApp.controller(&#8216;EmployeeController&#8217;, function ($scope, EmployeeService) {<br \/>\ngetStudents();<br \/>\nfunction getStudents() {<br \/>\n$scope.students = [];<br \/>\nEmployeeService.getStudents()<br \/>\n.then(function (studs) {<br \/>\n$scope.students = studs.data;<br \/>\n}<br \/>\n, function (error) {<br \/>\n$scope.status = &#8216;Unable to load customer data: &#8216; + error.message;<br \/>\nalert(&#8220;failure&#8221;);<br \/>\nconsole.log($scope.status);<br \/>\n});<br \/>\n}<br \/>\n$scope.AddUpdateEmployee = function () {<br \/>\ndebugger;<br \/>\nvar Employee = {<br \/>\nEmployeeId: $scope.EmployeeId,<br \/>\nEmployeeName: $scope.EmployeeName,<br \/>\nAge: $scope.Age<br \/>\n};<br \/>\nvar getAction = $scope.Action;<br \/>\nvar getData = EmployeeService.AddEmp(Employee);<br \/>\ngetData.then(function (msg) {<br \/>\ngetStudents();<br \/>\nalert(msg.data);<br \/>\n$scope.divEmployee = false;<br \/>\n}, function () {<br \/>\nalert(&#8216;Error in adding record&#8217;);<br \/>\n});<br \/>\n}<br \/>\n$scope.editEmployee = function (employee) {<br \/>\ndebugger;<br \/>\nwindow.location.href = &#8216;\/Employee\/Edit?id=&#8217; + employee.EmployeeId;<br \/>\n}<br \/>\n});<br \/>\nempApp.factory(&#8216;EmployeeService&#8217;, [&#8216;$http&#8217;, function ($http) {<br \/>\nvar EmployeeService = {};<br \/>\nEmployeeService.getStudents = function () {<br \/>\nreturn $http.get(&#8216;\/Employee\/GetEmployee&#8217;);<br \/>\n};<br \/>\n\/\/ Add Employee<br \/>\nEmployeeService.AddEmp = function (employee) {<br \/>\nvar response = $http({<br \/>\nmethod: &#8220;post&#8221;,<br \/>\nurl: &#8220;\/Employee\/Create1&#8221;,<br \/>\ndata: JSON.stringify(employee),<br \/>\ndataType: &#8220;json&#8221;<br \/>\n});<br \/>\nreturn response;<br \/>\n}<br \/>\nreturn EmployeeService;<br \/>\n}]);<br \/>\nempApp.controller(&#8216;EditController&#8217;, function ($scope, EditService) {<br \/>\nvar me = getUrlVars()[&#8220;id&#8221;];<br \/>\neditEmployee(me);<br \/>\nfunction editEmployee(Id) {<br \/>\ndebugger;<br \/>\n\/\/ window.location.href = &#8216;\/Employee\/Edit?id=&#8217; + Id;<br \/>\nvar getData = EditService.getEmployee(Id);<br \/>\ngetData.then(function (emp) {<br \/>\n$scope.EmployeeId = emp.data.EmployeeId;<br \/>\n$scope.EmployeeName = emp.data.EmployeeName;<br \/>\n$scope.Age = emp.data.Age;<br \/>\n$scope.Action = &#8220;Update&#8221;;<br \/>\n$scope.divEmployee = true;<br \/>\n},<br \/>\nfunction () {<br \/>\nalert(&#8216;Error in getting records&#8217;);<br \/>\n});<br \/>\n}<br \/>\n$scope.AddUpdateEmployee = function () {<br \/>\ndebugger;<br \/>\nvar Employee = {<br \/>\nEmployeeId: $scope.EmployeeId,<br \/>\nEmployeeName: $scope.EmployeeName,<br \/>\nAge: $scope.Age<br \/>\n};<br \/>\nvar getAction = $scope.Action;<br \/>\nvar getData = EditService.updateEmp(Employee);<br \/>\ngetData.then(function (msg) {<br \/>\nalert(msg.data);<br \/>\n$scope.divEmployee = true;<br \/>\n}, function () {<br \/>\nalert(&#8216;Error in adding record&#8217;);<br \/>\n});<br \/>\n}<br \/>\n});<br \/>\nempApp.factory(&#8216;EditService&#8217;, [&#8216;$http&#8217;, function ($http) {<br \/>\nvar EditService = {};<br \/>\n\/\/ get Employee By Id<br \/>\nEditService.getEmployee = function (employeeID) {<br \/>\nvar response = $http({<br \/>\nmethod: &#8220;post&#8221;,<br \/>\nurl: &#8220;\/Employee\/Edit1&#8221;,<br \/>\nparams: {<br \/>\nid: employeeID<br \/>\n}<br \/>\n});<br \/>\nreturn response;<br \/>\n}<br \/>\n\/\/ Update Employee<br \/>\nEditService.updateEmp = function (employee) {<br \/>\nvar response = $http({<br \/>\nmethod: &#8220;post&#8221;,<br \/>\nurl: &#8220;\/Employee\/UpdateEmp&#8221;,<br \/>\ndata: JSON.stringify(employee),<br \/>\ndataType: &#8220;json&#8221;<br \/>\n});<br \/>\nreturn response;<br \/>\n}<br \/>\nreturn EditService;<br \/>\n}]);<br \/>\n\/\/ Read a page&#8217;s GET URL variables and return them as an associative array.<br \/>\nfunction getUrlVars() {<br \/>\nvar vars = [], hash;<br \/>\nvar hashes = window.location.href.slice(window.location.href.indexOf(&#8216;?&#8217;) + 1).split(&#8216;&amp;&#8217;);<br \/>\nfor (var i = 0; i &lt; hashes.length; i++) {<br \/>\nhash = hashes[i].split(&#8216;=&#8217;);<br \/>\nvars.push(hash[0]);<br \/>\nvars[hash[0]] = hash[1];<br \/>\n}<br \/>\nreturn vars;<br \/>\n}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Solution Explorer looks like below,<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR5.png\" alt=\"\" \/><br \/>\nRun the solution,<br \/>\nOUTPUT as below,<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR6.png\" alt=\"\" \/><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR7.png\" alt=\"\" \/><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR8.png\" alt=\"\" \/><br \/>\nClick below to download the Angularjs crud solution,<br \/>\n<a href=\"https:\/\/1drv.ms\/u\/s!ArddhCoxftkQg9t6X3vBOck_4proJA\">https:\/\/1drv.ms\/u\/s!ArddhCoxftkQg9t6X3vBOck_4proJA<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[202],"tags":[215,214,216,203,218,217],"class_list":["post-532","post","type-post","status-publish","format-standard","hentry","category-angularjs-training-in-chennai","tag-angularjs-coaching-in-chennai","tag-angularjs-crud-operation","tag-angularjs-online-tutorial","tag-angularjs-training","tag-angularjs-with-asp-net-mvc","tag-angularjs-with-mvc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angularjs CRUD operation with Asp.net MVC | Maria Academy<\/title>\n<meta name=\"description\" content=\"This blogs allows to create Angularjs application integrating with Asp.net MVC.Click on end of the blog for Download of Angularjs CRUD operation solution.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angularjs CRUD operation with Asp.net MVC | Maria Academy\" \/>\n<meta property=\"og:description\" content=\"This blogs allows to create Angularjs application integrating with Asp.net MVC.Click on end of the blog for Download of Angularjs CRUD operation solution.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\" \/>\n<meta property=\"og:site_name\" content=\"Maria Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DotnetTrainingChennai\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-19T12:42:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-19T13:08:50+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotnettraining2\" \/>\n<meta name=\"twitter:site\" content=\"@dotnettraining2\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/#\/schema\/person\/e7dbda3490333ae356b6ad09076c8a6e\"},\"headline\":\"Angularjs CRUD operation with Asp.net MVC\",\"datePublished\":\"2017-05-19T12:42:52+00:00\",\"dateModified\":\"2017-05-19T13:08:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\"},\"wordCount\":1406,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png\",\"keywords\":[\"angularjs coaching in chennai\",\"Angularjs CRUD operation\",\"angularjs online tutorial\",\"angularjs training\",\"angularjs with Asp.net MVC\",\"Angularjs with MVC\"],\"articleSection\":[\"Angularjs training in Chennai\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\",\"url\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\",\"name\":\"Angularjs CRUD operation with Asp.net MVC | Maria Academy\",\"isPartOf\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png\",\"datePublished\":\"2017-05-19T12:42:52+00:00\",\"dateModified\":\"2017-05-19T13:08:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/#\/schema\/person\/e7dbda3490333ae356b6ad09076c8a6e\"},\"description\":\"This blogs allows to create Angularjs application integrating with Asp.net MVC.Click on end of the blog for Download of Angularjs CRUD operation solution.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage\",\"url\":\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png\",\"contentUrl\":\"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angularjs CRUD operation with Asp.net MVC\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/#website\",\"url\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/\",\"name\":\"Maria Academy\",\"description\":\"Dot Net Training in Chennai, Best Dot Net Training Institute in Chennai, .Net Training in Chennai\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.softwaretraininginchennai.com\/blog\/#\/schema\/person\/e7dbda3490333ae356b6ad09076c8a6e\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/f68fba18793457e0192658e2fe53431c0fb4a1d551aef61c57c1847324110d80?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f68fba18793457e0192658e2fe53431c0fb4a1d551aef61c57c1847324110d80?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f68fba18793457e0192658e2fe53431c0fb4a1d551aef61c57c1847324110d80?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angularjs CRUD operation with Asp.net MVC | Maria Academy","description":"This blogs allows to create Angularjs application integrating with Asp.net MVC.Click on end of the blog for Download of Angularjs CRUD operation solution.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/","og_locale":"en_US","og_type":"article","og_title":"Angularjs CRUD operation with Asp.net MVC | Maria Academy","og_description":"This blogs allows to create Angularjs application integrating with Asp.net MVC.Click on end of the blog for Download of Angularjs CRUD operation solution.","og_url":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/","og_site_name":"Maria Academy","article_publisher":"https:\/\/www.facebook.com\/DotnetTrainingChennai","article_published_time":"2017-05-19T12:42:52+00:00","article_modified_time":"2017-05-19T13:08:50+00:00","og_image":[{"url":"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@dotnettraining2","twitter_site":"@dotnettraining2","twitter_misc":{"Written by":"admin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#article","isPartOf":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/"},"author":{"name":"admin","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/#\/schema\/person\/e7dbda3490333ae356b6ad09076c8a6e"},"headline":"Angularjs CRUD operation with Asp.net MVC","datePublished":"2017-05-19T12:42:52+00:00","dateModified":"2017-05-19T13:08:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/"},"wordCount":1406,"commentCount":0,"image":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage"},"thumbnailUrl":"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png","keywords":["angularjs coaching in chennai","Angularjs CRUD operation","angularjs online tutorial","angularjs training","angularjs with Asp.net MVC","Angularjs with MVC"],"articleSection":["Angularjs training in Chennai"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/","url":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/","name":"Angularjs CRUD operation with Asp.net MVC | Maria Academy","isPartOf":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage"},"image":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage"},"thumbnailUrl":"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png","datePublished":"2017-05-19T12:42:52+00:00","dateModified":"2017-05-19T13:08:50+00:00","author":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/#\/schema\/person\/e7dbda3490333ae356b6ad09076c8a6e"},"description":"This blogs allows to create Angularjs application integrating with Asp.net MVC.Click on end of the blog for Download of Angularjs CRUD operation solution.","breadcrumb":{"@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#primaryimage","url":"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png","contentUrl":"http:\/\/www.softwaretraininginchennai.com\/blog\/wp-content\/uploads\/2017\/05\/051917_1242_AngularjsCR1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/angularjs-crud-operation-with-asp-net-mvc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.softwaretraininginchennai.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angularjs CRUD operation with Asp.net MVC"}]},{"@type":"WebSite","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/#website","url":"https:\/\/www.softwaretraininginchennai.com\/blog\/","name":"Maria Academy","description":"Dot Net Training in Chennai, Best Dot Net Training Institute in Chennai, .Net Training in Chennai","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.softwaretraininginchennai.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.softwaretraininginchennai.com\/blog\/#\/schema\/person\/e7dbda3490333ae356b6ad09076c8a6e","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f68fba18793457e0192658e2fe53431c0fb4a1d551aef61c57c1847324110d80?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f68fba18793457e0192658e2fe53431c0fb4a1d551aef61c57c1847324110d80?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f68fba18793457e0192658e2fe53431c0fb4a1d551aef61c57c1847324110d80?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":4,"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/posts\/532\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.softwaretraininginchennai.com\/blog\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}