1
Reply

.net mvc using angularjs

Sai

Sai

Jun 30 2017 2:35 AM
200
How to apply filters and paging in ng grid ?
 
example: Grid mvc working style ... Contains,Startswith and Endswith. and paging
 
 2.Perform Crud Operations in mvc using angularjs NgGrid. 
 
Please see the below uploaded example and help me..
 
Thanks in advanced 

Emp.cs:

=======

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace Grid.Models  
  6. {  
  7. public class Emp  
  8. {  
  9. public int id { get; set; }  
  10. public string name { get; set; }  
  11. public string designation { get; set; }  
  12. public string mobile { get; set; }  
  13. }  
  14. }  

DAL.cs

======

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Configuration;  
  6. using System.Data.SqlClient;  
  7. using System.Data;  
  8. namespace Grid.Models  
  9. {  
  10. public class DALEmp  
  11. {  
  12. string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  13. public List<Emp> ListAll()  
  14. {  
  15. List<Emp> lst = new List<Emp>();  
  16. SqlConnection con = new SqlConnection(cs);  
  17. con.Open();  
  18. SqlCommand cmd = new SqlCommand("select * from Employee", con);  
  19. SqlDataReader dr = cmd.ExecuteReader();  
  20. while (dr.Read())  
  21. {  
  22. lst.Add(new Emp  
  23. {  
  24. id = Convert.ToInt32(dr["id"]),  
  25. name = dr["name"].ToString(),  
  26. designation = dr["designation"].ToString(),  
  27. mobile = dr["mobile"].ToString()  
  28. });  
  29. }  
  30. dr.Close();  
  31. return lst;  
  32. }  
  33. public void SaveEmp(Emp emp)  
  34. {  
  35. string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  36. SqlConnection con = new SqlConnection(cs);  
  37. con.Open();  
  38. string save = "insert into Employee values(@id, @name, @designation, @mobile)";  
  39. SqlCommand cmd = new SqlCommand(save, con);  
  40. cmd.Parameters.AddWithValue("@id", emp.id);  
  41. cmd.Parameters.AddWithValue("@name", emp.name);  
  42. cmd.Parameters.AddWithValue("@designation", emp.designation);  
  43. cmd.Parameters.AddWithValue("@mobile", emp.mobile);  
  44. cmd.ExecuteNonQuery();  
  45. con.Close();  
  46. }  
  47. public void Update(Emp emp)  
  48. {  
  49. string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  50. SqlConnection con = new SqlConnection(cs);  
  51. con.Open();  
  52. string update = "update Employee set name=@name, designation=@designation, mobile=@mobile where id=@id";  
  53. SqlCommand cmd = new SqlCommand(update, con);  
  54. cmd.Parameters.AddWithValue("@id", emp.id);  
  55. cmd.Parameters.AddWithValue("@name", emp.name);  
  56. cmd.Parameters.AddWithValue("@designation", emp.designation);  
  57. cmd.Parameters.AddWithValue("@mobile", emp.mobile);  
  58. cmd.ExecuteNonQuery();  
  59. con.Close();  
  60. }  
  61. public void DeleteEmp(Emp emp)  
  62. {  
  63. string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  64. SqlConnection con = new SqlConnection(cs);  
  65. con.Open();  
  66. string delete = "delete from Employee where id=@id";  
  67. SqlCommand cmd = new SqlCommand(delete, con);  
  68. cmd.Parameters.AddWithValue("@id", emp.id);  
  69. cmd.ExecuteNonQuery();  
  70. con.Close();  
  71. }  
  72. }  
  73. }  

HomeController.cs:

==================

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using Grid.Models;  
  7. namespace Grid.Controllers  
  8. {  
  9. public class HomeController : Controller  
  10. {  
  11. // GET: Home  
  12. public ActionResult Index()  
  13. {  
  14. return View();  
  15. }  
  16. public JsonResult GetAllEmployee()  
  17. {  
  18. DALEmp empdal = new DALEmp();  
  19. List<Emp> employee = empdal.ListAll().ToList();  
  20. return Json(employee, JsonRequestBehavior.AllowGet);  
  21. }  
  22. [HttpPost]  
  23. public ActionResult Create(Emp employee)  
  24. {  
  25. try  
  26. {  
  27. if (ModelState.IsValid)  
  28. {  
  29. DALEmp empdal = new DALEmp();  
  30. empdal.SaveEmp(employee);  
  31. return RedirectToAction("Index");  
  32. }  
  33. else  
  34. {  
  35. ModelState.AddModelError("", "Data Not Saved");  
  36. }  
  37. }  
  38. catch (Exception ex)  
  39. {  
  40. Console.WriteLine(ex.Message);  
  41. }  
  42. return View();  
  43. }  
  44. [HttpPost]  
  45. public ActionResult Edit(Emp emp)  
  46. {  
  47. #region Update  
  48. try  
  49. {  
  50. if (ModelState.IsValid)  
  51. {  
  52. DALEmp empdal = new DALEmp();  
  53. empdal.Update(emp);  
  54. return RedirectToAction("Index");  
  55. }  
  56. else  
  57. {  
  58. ModelState.AddModelError("", "Record is not Updated");  
  59. return View();  
  60. }  
  61. }  
  62. catch (Exception ex)  
  63. {  
  64. Console.WriteLine(ex.Message);  
  65. }  
  66. return View();  
  67. #endregion  
  68. }  
  69. [HttpPost]  
  70. public ActionResult Delete(Emp emp)  
  71. {  
  72. #region Delete  
  73. try  
  74. {  
  75. if (ModelState.IsValid)  
  76. {  
  77. DALEmp empdal = new DALEmp();  
  78. empdal.DeleteEmp(emp);  
  79. return RedirectToAction("Index");  
  80. }  
  81. else  
  82. {  
  83. ModelState.AddModelError("", "Record is not Deleted");  
  84. return View();  
  85. }  
  86. }  
  87. catch (Exception ex)  
  88. {  
  89. Console.WriteLine(ex.Message);  
  90. }  
  91. return View();  
  92. #endregion  
  93. }  
  94. public ActionResult Details()  
  95. {  
  96. return View();  
  97. }  
  98. }  
  99. }  

Index.cshtml:

=============

  1. <html ng-app="myApp">  
  2. <head>  
  3. <title> AngularJS</title>  
  4. <style type="text/css">  
  5. .gridStyle {  
  6. width: 1000px;  
  7. height: 300px;  
  8. margin-left: 400px;  
  9. grid-rows: 100px 1fr 50px;  
  10. }  
  11. .lblMandatory{  
  12. color:red;  
  13. }  
  14. .lblFont {  
  15. display: inline-block;  
  16. font-size: 13px;  
  17. font-weight: 700;  
  18. margin-right: 3px;  
  19. text-align: right;  
  20. width: 95%;  
  21. }  
  22. </style>  
  23. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
  24. <script src="~/Scripts/ng-grid.js"></script>  
  25. <link href="~/Content/ng-grid.css" rel="stylesheet" />  
  26. <script src="~/Scripts/jquery-1.9.1.js"></script>  
  27. <script src="~/Scripts/bootstrap.min.js"></script>  
  28. <script src="~/Scripts/angular.js"></script>  
  29. <script src="~/Scripts/ng-grid.min.js"></script>  
  30. <script language="javascript">  
  31. var app = angular.module('myApp', ['ngGrid']);  
  32. app.controller("MyCtrl", function ($scope, $http) {  
  33. $scope.GetAllData = function() {  
  34. $http({  
  35. method: "get",  
  36. url: "/Home/GetAllEmployee"  
  37. }).then(function(response) {  
  38. $scope.employees = response.data;  
  39. }, function() {  
  40. alert("Error Occur");  
  41. })  
  42. };  
  43. $scope.gridOptions = {  
  44. multiSelect: false,  
  45. showFilter: true,  
  46. enablePaging: true,  
  47. showFooter: true,  
  48. data: 'employees',  
  49. rowHeight: 50,  
  50. headerRowHeight: 50,  
  51. columnDefs: [  
  52. { field: 'id', displayName: 'ID', width: 200, visible: true },  
  53. { field: 'name', displayName: 'Name',width: 200},  
  54. { field: 'designation', displayName: 'Designation', width: 200 },  
  55. { field: 'mobile', displayName: 'Mobile', width: 200 },  
  56. { field: '', cellTemplate: '<button ng-click="Edit()" class="btn btn-info btn-primary">Edit</button>' },   
  57. { field: '', cellTemplate: '<button ng-click="Delete()" class="btn btn-info btn-danger">Delete</button>' }  
  58. ]  
  59. };  
  60. $scope.save = function () {  
  61. $scope.Employe = {};  
  62. $scope.Employe.id = $scope.id; //$scope.Employe.id is Model class property. //$scope.id; is ng-model directive value  
  63. $scope.Employe.name = $scope.name;  
  64. $scope.Employe.designation = $scope.designation;  
  65. $scope.Employe.mobile = $scope.mobile;  
  66. $http({  
  67. method: "post",  
  68. url: "/Home/Create",  
  69. datatype: "json",  
  70. data: JSON.stringify($scope.Employe),  
  71. }).then(function (data) {  
  72. alert("Record Added Successfully");  
  73. window.location.reload();  
  74. $scope.id = "";  
  75. $scope.name = "";  
  76. $scope.designation = "";  
  77. $scope.mobile = "";  
  78. }, function () {  
  79. alert("Error Occur. Data Not Saved");  
  80. })  
  81. };  
  82. $scope.Delete = function (id) {  
  83. var state = confirm("Are you sure! Do you want to Delete?");  
  84. if (state == true) {  
  85. $http({  
  86. method: "post",  
  87. url: "/Home/Delete",  
  88. datatype: "json",  
  89. data: JSON.stringify(id)  
  90. }).then(function (response) {  
  91. alert("Record Deleted Successfully");  
  92. window.location.reload();  
  93. }  
  94. , function () {  
  95. alert("Error Occur in deletion");  
  96. })  
  97. }  
  98. };  
  99. })  
  100. </script>  
  101. </head>  
  102. <body ng-controller="MyCtrl">  
  103. <div class="gridStyle" ng-grid="gridOptions" ng-init="GetAllData()">  
  104. <button type="button" class="btn btn-info btn-primary" data-toggle="modal" data-target="#myModal">Add New Customer</button>  
  105. </div>  
  106. <div id="myModal" class="modal fade" role="dialog" >  
  107. <div class="modal-dialog">  
  108. <!-- Modal content-->  
  109. <div class="modal-content">  
  110. <div class="modal-header">  
  111. <button type="button" class="close" data-dismiss="modal">×</button>  
  112. <h4 class="modal-title">Save Details</h4>  
  113. </div>  
  114. <div class="modal-body">  
  115. <table style="width:100%">  
  116. <tr>  
  117. <td style="width:22%">  
  118. <label class="lblFont" for="Name">Employee ID <span class="lblMandatory">*</span></label>  
  119. </td>  
  120. <td>  
  121. <input type="text" data-ng-model="id" required" />  
  122. @*<span class="lblMandatory"ng-show="!id">Enter ID</span>*@  
  123. </td>  
  124. </tr>  
  125. <tr>  
  126. <td style="width:22%">  
  127. <label class="lblFont" for="Name">Name<span class="lblMandatory">*</span></label>  
  128. </td>  
  129. <td>  
  130. <input type="text" data-ng-model="name" name="text" required" />  
  131. @*<span class="lblMandatory" ng-show="!name">Enter Name</span>*@  
  132. </td>  
  133. </tr>  
  134. <tr>  
  135. <td style="width:22%">  
  136. <label class="lblFont" for="Name">Designation<span class="lblMandatory">*</span></label>  
  137. </td>  
  138. <td>  
  139. <input type="text" data-ng-model="designation" name="text" required" />  
  140. @*<span class="lblMandatory" ng-show="!designation">Enter Designation</span>*@  
  141. </td>  
  142. </tr>  
  143. <tr>  
  144. <td style="width:22%">  
  145. <label class="lblFont" for="Name">Mobile<span class="lblMandatory">*</span></label>  
  146. </td>  
  147. <td>  
  148. <input type="text" data-ng-model="mobile" name="number" required" />  
  149. @*<span class="lblMandatory" ng-show="!mobile">Enter Mobile No.</span>*@  
  150. </td>  
  151. </tr>  
  152. </table>  
  153. </div>  
  154. <div class="modal-footer">  
  155. <input type="button" class="btn btn-success" ng-click="save()" value="Submit" />  
  156. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  157. </div>  
  158. </div>  
  159. </div>  
  160. </div>  
  161. </body>  
  162. </html>  
 


Answers (1)
Next Recommended Forum