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.