Post
Ask Question

CRUD Operation with Model dialog using UI-Grid in AngularJS and Web API

After huge demand of my readers for this article, finally I get a chance to write this article. In this article, you will learn CRUD operations with model dialog using UI-Grid and Web API. This article describes how to load data in ui-grid and add new record using model dialog and update existing record and delete using model dialog.

Read the below articles first to understand the AngularJS UI-grid.

In this article, I am going to use stored procedure.

ADO.NET Entity Data Model


Stored Procedures

  1. USE [NORTHWND]  
  2. GO  
  3. /****** Object: StoredProcedure [dbo].[AddEmployee] Script Date: 10/27/2017 1:02:42 PM ******/  
  4. SET ANSI_NULLS ON  
  5. GO  
  6. SET QUOTED_IDENTIFIER ON  
  7. GO  
  8. CREATE PROCEDURE [dbo].[AddEmployee]  
  9. --DECLARE  
  10. @FirstName varchar(100) = NULL,  
  11. @LastName varchar(200) = NULL,  
  12. @City varchar(50) = NULL,  
  13. @Region varchar(50) = NULL,  
  14. @PostalCode varchar(10) = NULL,  
  15. @Country varchar(50) = NULL,  
  16. @Notes text = NULL  
  17. AS  
  18. BEGIN  
  19. BEGIN TRANSACTION  
  20. BEGIN TRY  
  21. INSERT INTO Employees (FirstName, LastName, City, Region, PostalCode, Country, Notes)  
  22. VALUES (@FirstName, @LastName, @City, @Region, @PostalCode, @Country, @Notes)  
  23. END TRY  
  24. BEGIN CATCH  
  25. --SELECT ERROR_NUMBER() AS ErrorNumber  
  26. -- ,ERROR_SEVERITY() AS ErrorSeverity  
  27. -- ,ERROR_STATE() AS ErrorState  
  28. -- ,ERROR_PROCEDURE() AS ErrorProcedure  
  29. -- ,ERROR_LINE() AS ErrorLine  
  30. -- ,ERROR_MESSAGE() AS ErrorMessage;  
  31. END CATCH  
  32. COMMIT TRANSACTION  
  33. END  
  34. GO  
  35. /****** Object: StoredProcedure [dbo].[DeleteEmployee] Script Date: 10/27/2017 1:02:42 PM ******/  
  36. SET ANSI_NULLS ON  
  37. GO  
  38. SET QUOTED_IDENTIFIER ON  
  39. GO  
  40. CREATE PROCEDURE [dbo].[DeleteEmployee]  
  41. --DECLARE  
  42. @EmployeeID int  
  43. AS  
  44. BEGIN  
  45. BEGIN TRANSACTION  
  46. BEGIN TRY  
  47. DELETE FROM Employees WHERE EmployeeID = @EmployeeID  
  48. END TRY  
  49. BEGIN CATCH  
  50. --SELECT ERROR_NUMBER() AS ErrorNumber  
  51. -- ,ERROR_SEVERITY() AS ErrorSeverity  
  52. -- ,ERROR_STATE() AS ErrorState  
  53. -- ,ERROR_PROCEDURE() AS ErrorProcedure  
  54. -- ,ERROR_LINE() AS ErrorLine  
  55. -- ,ERROR_MESSAGE() AS ErrorMessage;  
  56. END CATCH  
  57. COMMIT TRANSACTION  
  58. END  
  59. GO  
  60. /****** Object: StoredProcedure [dbo].[GetEmployee] Script Date: 10/27/2017 1:02:42 PM ******/  
  61. SET ANSI_NULLS ON  
  62. GO  
  63. SET QUOTED_IDENTIFIER ON  
  64. GO  
  65. CREATE PROCEDURE [dbo].[GetEmployee]  
  66. AS  
  67. SELECT EmployeeID,  
  68. FirstName,  
  69. LastName,  
  70. City,  
  71. Region,  
  72. PostalCode,  
  73. Country,  
  74. Notes  
  75. FROM Employees  
  76. ORDER BY EmployeeID DESC  
  77. GO  
  78. /****** Object: StoredProcedure [dbo].[UpdateEmployee] Script Date: 10/27/2017 1:02:42 PM ******/  
  79. SET ANSI_NULLS ON  
  80. GO  
  81. SET QUOTED_IDENTIFIER ON  
  82. GO  
  83. CREATE PROCEDURE [dbo].[UpdateEmployee]  
  84. --DECLARE  
  85. @EmployeeID int,  
  86. @FirstName varchar(100) = NULL,  
  87. @LastName varchar(200) = NULL,  
  88. @City varchar(50) = NULL,  
  89. @Region varchar(50) = NULL,  
  90. @PostalCode varchar(10) = NULL,  
  91. @Country varchar(50) = NULL,  
  92. @Notes text = NULL  
  93. AS  
  94. BEGIN  
  95. BEGIN TRANSACTION  
  96. BEGIN TRY  
  97. UPDATE Employees  
  98. SET FirstName = @FirstName, LastName = @LastName,  
  99. City=@City, Region=@Region, PostalCode=@PostalCode,  
  100. Country=@Country, Notes = @Notes  
  101. WHERE EmployeeID = @EmployeeID  
  102. END TRY  
  103. BEGIN CATCH  
  104. --SELECT ERROR_NUMBER() AS ErrorNumber  
  105. -- ,ERROR_SEVERITY() AS ErrorSeverity  
  106. -- ,ERROR_STATE() AS ErrorState  
  107. -- ,ERROR_PROCEDURE() AS ErrorProcedure  
  108. -- ,ERROR_LINE() AS ErrorLine  
  109. -- ,ERROR_MESSAGE() AS ErrorMessage;  
  110. END CATCH  
  111. COMMIT TRANSACTION  
  112. END  
  113. GO  

Model Class

  1. public class Employee  
  2. {  
  3. public int EmployeeID { get; set; }  
  4. public string FirstName { get; set; }  
  5. public string LastName { get; set; }  
  6. public string City { get; set; }  
  7. public string Region { get; set; }  
  8. public string PostalCode { get; set; }  
  9. public string Country { get; set; }  
  10. public string Notes { get; set; }  
  11. }  

Builder

  1. public class EmployeeVMBuilder  
  2. {  
  3. //Entity set  
  4. public NORTHWNDEntities db = new NORTHWNDEntities();  
  5. /// <summary>  
  6. /// Get Employee using stored procedure  
  7. /// </summary>  
  8. /// <returns></returns>  
  9. public async Task<IEnumerable<GetEmployee_Result>> GetEmployee()  
  10. {  
  11. try  
  12. {  
  13. return await db.Database.SqlQuery<GetEmployee_Result>("GetEmployee").ToListAsync();  
  14. }  
  15. catch (Exception ex)  
  16. {  
  17. throw ex;  
  18. }  
  19. }  
  20. /// <summary>  
  21. /// Update  
  22. /// </summary>  
  23. /// <param name="saveData"></param>  
  24. public void UpdateEmployee(GetEmployee_Result saveData)  
  25. {  
  26. try  
  27. {  
  28. db.UpdateEmployee(saveData.EmployeeID, saveData.FirstName, saveData.LastName, saveData.City, saveData.Region, saveData.PostalCode, saveData.Country, saveData.Notes);  
  29. db.SaveChanges();  
  30. }  
  31. catch (Exception)  
  32. {  
  33. throw;  
  34. }  
  35. }  
  36. /// <summary>  
  37. /// Delete  
  38. /// </summary>  
  39. /// <param name="EmployeeID"></param>  
  40. public void DeleteEmployee(int EmployeeID)  
  41. {  
  42. try  
  43. {  
  44. db.DeleteEmployee(EmployeeID);  
  45. db.SaveChanges();  
  46. }  
  47. catch (Exception)  
  48. {  
  49. throw;  
  50. }  
  51. }  
  52. /// <summary>  
  53. /// Insert  
  54. /// </summary>  
  55. /// <param name="saveData"></param>  
  56. public void AddEmployee(GetEmployee_Result saveData)  
  57. {  
  58. try  
  59. {  
  60. db.AddEmployee(saveData.FirstName, saveData.LastName, saveData.City, saveData.Region, saveData.PostalCode, saveData.Country, saveData.Notes);  
  61. db.SaveChanges();  
  62. }  
  63. catch (Exception)  
  64. {  
  65. throw;  
  66. }  
  67. }  
  68. }  

Web API

  1. [RoutePrefix("api/EmployeeAPI")]  
  2. public class EmployeeAPIController : ApiController  
  3. {  
  4. private readonly EmployeeVMBuilder _employeeVMBuilder = new EmployeeVMBuilder();  
  5. // GET api/<controller>  
  6. [Route("GetEmployee")]  
  7. public async Task<IEnumerable<GetEmployee_Result>> GetEmployee()  
  8. {  
  9. return await _employeeVMBuilder.GetEmployee();  
  10. }  
  11. [Route("UpdateEmployee")]  
  12. public void UpdateEmployee(GetEmployee_Result saveData)  
  13. {  
  14. _employeeVMBuilder.UpdateEmployee(saveData);  
  15. }  
  16. [Route("AddEmployee")]  
  17. public void AddEmployee(GetEmployee_Result saveData)  
  18. {  
  19. _employeeVMBuilder.AddEmployee(saveData);  
  20. }  
  21. [HttpGet]  
  22. [Route("DeleteEmployee")]  
  23. public void DeleteEmployee(int EmployeeID)  
  24. {  
  25. _employeeVMBuilder.DeleteEmployee(EmployeeID);  
  26. }  
  27. }  

Thus, we are done with Entity framework and API Controller here. Now, install the files given below, using "Manage NuGet Package".


Add JavaScript files and CSS reference in BundleConfig.cs.

  1. bundles.Add(new StyleBundle("~/Content/css").Include(  
  2. "~/Content/bootstrap.css",  
  3. "~/Content/site.css",  
  4. "~/Content/ui-grid.min.css"));  
  5. bundles.Add(new ScriptBundle("~/bundles/angular").Include(  
  6. "~/Scripts/angular.js",  
  7. "~/Scripts/angular-route.js",  
  8. "~/Scripts/ui-grid.js",  
  9. "~/Scripts/angular-ui/ui-bootstrap.js",  
  10. "~/Scripts/angular-ui/ui-bootstrap-tpls.js"));  
  11. bundles.Add(new ScriptBundle("~/bundles/employee").Include(  
  12. "~/Angular/app.js",  
  13. "~/Angular/Services/employeeService.js",  
  14. "~/Angular/Controller/employeeController.js",  
  15. "~/Angular/Controller/editEmployeeController.js",  
  16. "~/Angular/Controller/addEmployeeController.js"));  

And render on _layout.cshtml.

  1. @Scripts.Render("~/bundles/jquery")  
  2. @Scripts.Render("~/bundles/bootstrap")  
  3. @Scripts.Render("~/bundles/angular")  
  4. @Scripts.Render("~/bundles/employee")  
  5. @RenderSection("scripts", required: false)  

Now, add a new Angular Controller with scope. I am using just one script for Module, Service, and Controller. You can have it separate if working on a big project.

Module

  1. //Define an angular module for our app  
  2. var app = angular.module('app', ['ngRoute',  
  3. 'ui.grid',  
  4. 'ui.grid.edit',  
  5. 'ui.grid.pagination',  
  6. 'ui.grid.autoResize',  
  7. 'ui.grid.expandable',  
  8. 'ui.grid.selection',  
  9. 'ui.grid.pinning',  
  10. 'ui.bootstrap'])  
  11. .config(function ($routeProvider, $locationProvider) {  
  12. $locationProvider.hashPrefix('');  
  13. $routeProvider  
  14. .when('/', {  
  15. templateUrl: 'Home',  
  16. controller: 'homeController'  
  17. })  
  18. .when('/employee', {  
  19. templateUrl: 'Employee',  
  20. controller: 'employeeController'  
  21. });  
  22. //$locationProvider.html5Mode(true);  
  23. //$locationProvider.html5Mode(true).hashPrefix('*');  
  24. });  

Service

  1. app.service('employeeService', function ($http) {  
  2. //get  
  3. this.getEmployees = function () {  
  4. var req = $http.get('api/EmployeeAPI/GetEmployee');  
  5. return req;  
  6. };  
  7. //insert  
  8. this.addEmployee = function (saveData)  
  9. {  
  10. var req = $http.post('api/EmployeeAPI/AddEmployee', JSON.stringify(saveData),  
  11. {  
  12. headers: {  
  13. 'Content-Type': 'application/json'  
  14. }  
  15. });  
  16. return req;  
  17. };  
  18. //update  
  19. this.updateEmployee = function (saveData)  
  20. {  
  21. var req = $http.post('api/EmployeeAPI/UpdateEmployee', JSON.stringify(saveData),  
  22. {  
  23. headers: {  
  24. 'Content-Type': 'application/json'  
  25. }  
  26. });  
  27. return req;  
  28. };  
  29. //delete  
  30. this.deleteEmployee = function (employeeID) {  
  31. var req = $http.get('api/EmployeeAPI/DeleteEmployee', { params: { EmployeeID: employeeID } });  
  32. return req;  
  33. };  
  34. });  

Controllers:

employeeController

  1. app.controller("employeeController", function (  
  2. $scope, $filter,  
  3. employeeService, $window,  
  4. $http, $log, $interval, $uibModal) {  
  5. init();  
  6. //get employees  
  7. function init(){  
  8. employeeService.getEmployees().then(function (result) {  
  9. $scope.gridOptions.data = result.data;  
  10. console.log($scope.Employees);  
  11. }, function (error) {  
  12. $window.alert('Oops! Something went wrong while fetching employee data.');  
  13. });  
  14. var paginationOptions = {  
  15. pageNumber: 1,  
  16. pageSize: 10,  
  17. };  
  18. $scope.gridOptions = {  
  19. enableRowSelection: true,  
  20. selectionRowHeaderWidth: 35,  
  21. enableRowHeaderSelection: false,  
  22. paginationPageSizes: [10, 20, 30, 40], //Commented  
  23. paginationPageSize: 10, //Commented  
  24. enableSorting: true,  
  25. columnDefs: [  
  26. { name: 'Edit', field: 'EmployeeID', width: '10%', enableColumnMenu: false, cellTemplate: '<button title="Edit" class="btn btn-xs btn-primary fa fa-edit" ng-click="grid.appScope.editEmployee(row)">Edit </button>', width: 50, pinnedLeft: false, enableHiding: false, exporterSuppressExport: true, enableSorting: false, enableFiltering: false },  
  27. { name: 'First Name', field: 'FirstName', headerCellClass: 'tablesorter-header-inner', enableFiltering: true, enableCellEdit: true, },  
  28. { name: 'Last Name', field: 'LastName', headerCellClass: 'tablesorter-header-inner', enableFiltering: true, enableCellEdit: true, },  
  29. { name: 'City', field: 'City', headerCellClass: 'tablesorter-header-inner', enableFiltering: true, enableCellEdit: true, },  
  30. { name: 'Region', field: 'Region', enableCellEdit: false, headerCellClass: 'tablesorter-header-inner', enableFiltering: true },  
  31. { name: 'Postal Code', field: 'PostalCode', enableCellEdit: false, headerCellClass: 'tablesorter-header-inner', enableFiltering: true },  
  32. { name: 'Country', field: 'Country', enableCellEdit: false, headerCellClass: 'tablesorter-header-inner', enableFiltering: true },  
  33. { name: 'Notes', field: 'Notes', width: '20%', enableCellEdit: false, headerCellClass: 'tablesorter-header-inner', enableFiltering: true }  
  34. ],  
  35. //This code used for export grid data in csv file  
  36. enableGridMenu: true,  
  37. enableSelectAll: true,  
  38. exporterMenuPdf: false,  
  39. enableFiltering: true,  
  40. exporterCsvFilename: 'EmployeeList_' + $filter('date')(new Date(), 'MM/dd/yyyy') + '.csv',  
  41. exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),  
  42. onRegisterApi: function (gridApi) {  
  43. $scope.gridApi = gridApi;  
  44. },  
  45. //end here  
  46. };  
  47. }  
  48. //This function is used to open update request popup window  
  49. $scope.addEmployee = function()  
  50. {  
  51. var modalInstance = $uibModal.open({  
  52. //animation: $ctrl.animationsEnabled,  
  53. templateUrl: 'Template/add.html',  
  54. controller: 'addEmployeeController', // a controller for modal instance  
  55. //controllerUrl: 'controller/test-controller', // can specify controller url path  
  56. //controllerAs: 'ctrl', // controller as syntax  
  57. //scope: $scope,  
  58. size: 'md', // model size  
  59. backdrop: 'static',  
  60. keyboard: false, // ESC key close enable/disable  
  61. //appendTo: parentElem,  
  62. resolve: {  
  63. //grid: function () { return grid; },  
  64. //refreshGrid: function () { return $scope.RefreshGrid.bind(controller, $scope.searchData); },  
  65. //row: function () { return row.entity; }  
  66. row: function () { return null; }  
  67. } // data passed to the controller  
  68. }).closed.then(function () {  
  69. $scope.RefreshGridData();  
  70. $scope.showGrid = true;  
  71. }, function () { }  
  72. );  
  73. };  
  74. //Open edit dialog  
  75. $scope.editEmployee = function(row)  
  76. {  
  77. var modalInstance = $uibModal.open({  
  78. //animation: $ctrl.animationsEnabled,  
  79. templateUrl: 'Template/edit.html',  
  80. controller: 'editEmployeeController', // a controller for modal instance  
  81. //controllerUrl: 'controller/test-controller', // can specify controller url path  
  82. //controllerAs: 'ctrl', // controller as syntax  
  83. //scope: $scope,  
  84. size: 'md', // model size  
  85. backdrop: 'static',  
  86. keyboard: false, // ESC key close enable/disable  
  87. //appendTo: parentElem,  
  88. resolve: {  
  89. //grid: function () { return grid; },  
  90. //refreshGrid: function () { return $scope.RefreshGrid.bind(controller, $scope.searchData); },  
  91. row: function () { return row.entity; }  
  92. } // data passed to the controller  
  93. }).closed.then(function () {  
  94. $scope.RefreshGridData();  
  95. $scope.showGrid = true;  
  96. }, function () { }  
  97. );  
  98. }  
  99. //refresh grid data after save of update  
  100. $scope.RefreshGridData = function()  
  101. {  
  102. employeeService.getEmployees().then(function (result) {  
  103. $scope.gridOptions.data = result.data;  
  104. console.log($scope.Employees);  
  105. }, function (error) {  
  106. $window.alert('Oops! Something went wrong while fetching employee data.');  
  107. });  
  108. }  
  109. //end  
  110. });  

addEmployeeController

  1. app.controller("addEmployeeController", function ($scope,  
  2. $filter,  
  3. employeeService,  
  4. $window,  
  5. $http,  
  6. $log,  
  7. $interval,  
  8. $uibModalInstance,  
  9. $uibModal,  
  10. row) {  
  11. if(row == null)  
  12. {  
  13. $scope.title = "Add Employee";  
  14. }  
  15. else  
  16. {  
  17. $scope.title = "Edit Employee";  
  18. $scope.rowData = angular.copy(row);  
  19. }  
  20. //Update  
  21. $scope.add = function()  
  22. {  
  23. if (confirm("Are you sure you want to save these changes?") === false) {  
  24. return;  
  25. }  
  26. else {  
  27. var saveData = {  
  28. EmployeeID: $scope.rowData.EmployeeID,  
  29. FirstName: $scope.rowData.FirstName,  
  30. LastName: $scope.rowData.LastName,  
  31. City: $scope.rowData.City,  
  32. Region: $scope.rowData.Region,  
  33. PostalCode: $scope.rowData.PostalCode,  
  34. Country: $scope.rowData.Country,  
  35. Notes: $scope.rowData.Notes  
  36. };  
  37. employeeService.addEmployee(saveData).then(function () {  
  38. console.log("Successfullly Added.");  
  39. $scope.showSuccessMessage = true;  
  40. }, function (error) {  
  41. $window.alert('Error occurred while adding employee');  
  42. });  
  43. }  
  44. }  
  45. //Close  
  46. $scope.close = function()  
  47. {  
  48. $uibModalInstance.dismiss('cancel');  
  49. }  
  50. // Cancel  
  51. $scope.cancel = function()  
  52. {  
  53. $uibModalInstance.dismiss('cancel');  
  54. }  
  55. });  

editEmployeeController

  1. app.controller("editEmployeeController", function ($scope,  
  2. $filter,  
  3. employeeService,  
  4. $window,  
  5. $uibModalInstance,  
  6. $http,  
  7. $log,  
  8. $interval,  
  9. $uibModal,  
  10. row) {  
  11. if(row == null)  
  12. {  
  13. $scope.title = "Add Employee";  
  14. }  
  15. else  
  16. {  
  17. $scope.title = "Edit Employee";  
  18. $scope.rowData = angular.copy(row);  
  19. }  
  20. //Update  
  21. $scope.save = function()  
  22. {  
  23. if (confirm("Are you sure you want to update these changes?") === false) {  
  24. return;  
  25. }  
  26. else {  
  27. var saveData = {  
  28. EmployeeID: $scope.rowData.EmployeeID,  
  29. FirstName: $scope.rowData.FirstName,  
  30. LastName: $scope.rowData.LastName,  
  31. City: $scope.rowData.City,  
  32. Region: $scope.rowData.Region,  
  33. PostalCode: $scope.rowData.PostalCode,  
  34. Country: $scope.rowData.Country,  
  35. Notes: $scope.rowData.Notes  
  36. };  
  37. employeeService.updateEmployee(saveData).then(function () {  
  38. console.log("Successfullly Updated.");  
  39. $scope.showSuccessMessage = true;  
  40. $scope.ConfirmationMessage = "Employee has been update.";  
  41. }, function (error) {  
  42. $window.alert('Error occurred while updating employee details');  
  43. });  
  44. }  
  45. }  
  46. //Delete  
  47. $scope.remove = function()  
  48. {  
  49. if (confirm("Are you sure you want to delete this employee?") === false) {  
  50. return;  
  51. }  
  52. else {  
  53. employeeService.deleteEmployee($scope.rowData.EmployeeID).then(function () {  
  54. console.log("Successfullly Deleted.");  
  55. $scope.showSuccessMessage = true;  
  56. $scope.ConfirmationMessage = "Employee has been deleted.";  
  57. }, function (error) {  
  58. $window.alert('Error occurred while deleting employee.');  
  59. });  
  60. }  
  61. }  
  62. //Cancel  
  63. $scope.close = function()  
  64. {  
  65. $uibModalInstance.dismiss('cancel');  
  66. }  
  67. // Cancel  
  68. $scope.cancel = function()  
  69. {  
  70. $uibModalInstance.dismiss('cancel');  
  71. }  
  72. });  

Index

  1. @{  
  2. ViewBag.Title = "Index";  
  3. Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. <h2>Employee</h2>  
  6. <div ng-controller="employeeController">  
  7. <div style="padding-left: 30px;">  
  8. <button type="button" id="addRow" class="btn btn-success" ng-click="addEmployee()">Add New Employee</button>  
  9. </div>  
  10. <br />  
  11. <div ui-grid="gridOptions"  
  12. ui-grid-pagination  
  13. ui-grid-selection  
  14. ui-grid-exporter  
  15. ui-grid-resize-columns  
  16. ui-grid-auto-resize  
  17. class="grid">  
  18. </div>  
  19. </div>  

Edit.html

  1. <div>  
  2. <div class="modal-header">  
  3. <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>  
  4. <h4 class="modal-title coloredText">{{ title }}</h4>  
  5. </div>  
  6. <div class="modal-body">  
  7. <form name="serviceForm" class="form-horizontal">  
  8. <div class="form-group">  
  9. <label class="control-label col-sm-2">ID:</label>  
  10. <div class="col-sm-10">  
  11. {{ rowData.EmployeeID }}  
  12. </div>  
  13. </div>  
  14. <div class="form-group">  
  15. <label for="firstname" class="control-label col-sm-2">First Name:</label>  
  16. <div class="col-sm-10">  
  17. <input class="form-control" type="text" ng-model="rowData.FirstName" />  
  18. </div>  
  19. </div>  
  20. <div class="form-group">  
  21. <label for="lastname" class="control-label col-sm-2">Last Name:</label>  
  22. <div class="col-sm-10">  
  23. <input class="form-control" type="text" ng-model="rowData.LastName" />  
  24. </div>  
  25. </div>  
  26. <div class="form-group">  
  27. <label class="control-label col-sm-2">City:</label>  
  28. <div class="col-sm-10">  
  29. <input class="form-control" type="text" ng-model="rowData.City" />  
  30. </div>  
  31. </div>  
  32. <div class="form-group">  
  33. <label class="control-label col-sm-2">Region:</label>  
  34. <div class="col-sm-10">  
  35. <input class="form-control" type="text" ng-model="rowData.Region" />  
  36. </div>  
  37. </div>  
  38. <div class="form-group">  
  39. <label class="control-label col-sm-2">Postal Code:</label>  
  40. <div class="col-sm-10">  
  41. <input class="form-control" type="text" ng-model="rowData.PostalCode" />  
  42. </div>  
  43. </div>  
  44. <div class="form-group">  
  45. <label class="control-label col-sm-2">Country:</label>  
  46. <div class="col-sm-10">  
  47. <input class="form-control" type="text" ng-model="rowData.Country" />  
  48. </div>  
  49. </div>  
  50. <div class="form-group">  
  51. <label class="control-label col-sm-2">Notes:</label>  
  52. <div class="col-sm-10">  
  53. <textarea class="form-control" type="text" rows="5" ng-model="rowData.Notes" />  
  54. </div>  
  55. </div>  
  56. <div class="alert alert-success" ng-show="showSuccessMessage">  
  57. <strong>Success!</strong>{{ ConfirmationMessage }}  
  58. </div>  
  59. </form>  
  60. </div>  
  61. <div class="modal-footer">  
  62. <div class="row">  
  63. <div class="col-lg-6 spaceTop pull-right">  
  64. <button class="active" ng-click="save()">Save</button>  
  65. <button class="btn-danger" ng-click="remove()">Delete</button>  
  66. <button class="btn-warning" ng-click="close()">Cancel</button>  
  67. </div>  
  68. </div>  
  69. </div>  
  70. </div>  

Add.html

  1. <div class="modal-header">  
  2. <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>  
  3. <h4 class="modal-title coloredText">{{ title }}</h4>  
  4. </div>  
  5. <form name="serviceForm" class="form-horizontal">  
  6. <div class="form-group">  
  7. <div class="col-sm-10">  
  8. </div>  
  9. </div>  
  10. <div class="form-group">  
  11. <label for="firstname" class="control-label col-sm-2">First Name:</label>  
  12. <div class="col-sm-10">  
  13. <input class="form-control" type="text" ng-model="rowData.FirstName" />  
  14. </div>  
  15. </div>  
  16. <div class="form-group">  
  17. <label for="lastname" class="control-label col-sm-2">Last Name:</label>  
  18. <div class="col-sm-10">  
  19. <input class="form-control" type="text" ng-model="rowData.LastName" />  
  20. </div>  
  21. </div>  
  22. <div class="form-group">  
  23. <label class="control-label col-sm-2">City:</label>  
  24. <div class="col-sm-10">  
  25. <input class="form-control" type="text" ng-model="rowData.City" />  
  26. </div>  
  27. </div>  
  28. <div class="form-group">  
  29. <label class="control-label col-sm-2">Region:</label>  
  30. <div class="col-sm-10">  
  31. <input class="form-control" type="text" ng-model="rowData.Region" />  
  32. </div>  
  33. </div>  
  34. <div class="form-group">  
  35. <label class="control-label col-sm-2">Postal Code:</label>  
  36. <div class="col-sm-10">  
  37. <input class="form-control" type="text" ng-model="rowData.PostalCode" />  
  38. </div>  
  39. </div>  
  40. <div class="form-group">  
  41. <label class="control-label col-sm-2">Country:</label>  
  42. <div class="col-sm-10">  
  43. <input class="form-control" type="text" ng-model="rowData.Country" />  
  44. </div>  
  45. </div>  
  46. <div class="form-group">  
  47. <label class="control-label col-sm-2">Notes:</label>  
  48. <div class="col-sm-10">  
  49. <textarea class="form-control" type="text" rows="5" ng-model="rowData.Notes" />  
  50. </div>  
  51. </div>  
  52. <div class="alert alert-success" ng-show="showSuccessMessage">  
  53. <strong>Success!</strong>Employee has been saved.  
  54. </div>  
  55. </form>  
  56. <div class="modal-footer">  
  57. <div class="row">  
  58. <div class="col-lg-6 spaceTop pull-right">  
  59. <button class="active" ng-click="add()">Add</button>  
  60. <button class="btn-warning" ng-click="close()">Cancel</button>  
  61. </div>  
  62. </div>  
  63. </div>  

As everything is done, run the application.


Let’s add a new employee, hit add new employee button.


Now let’s add edit an existing employee, click on Edit button from list.


As you can see confirmation message appears after edit and delete and when you click the model dialog grid data refreshed with new changes.


Conclusion

In this article, we have seen how to implement CRUD functionality with model dialog and with Angular UI-Grid with Web API and Entity Framework in MVC. If you have any questions or comments, drop me a line in the comments section.


Similar Articles