Form Design code for User Table

  1. <div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">
  2. <button class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;
  3. margin-top: 7px">
  4. <span class="glyphicon glyphicon-user"></span>Create New User
  5. </button>
  6. <label id="msgLab" style="color: #008080; font-size: large"></label>
  7. <br /><%--
  8. <label >
  9. Search:</label>--%>
  10. <br /><%--
  11. <input type="text" ng-model="search" ng-keydown="clear()" style="margin-left: 980px;" placeholder="Search">--%>
  12. <hr />
  13. <div class="manish">
  14. <h3>
  15. Users</h3>
  16. <hr />
  17. <form class="navbar-form" role="search">
  18. <div class="input-group add-on">
  19. <input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term" id="search" class="form-control" type="text">
  20. <div class="input-group-btn">
  21. <button class="btn btn-default" type="submit">
  22. <i class="glyphicon glyphicon-search"></i> Search
  23. </button>
  24. </div>
  25. </div>
  26. </form>
  27. <pagination style="margin-left: 850px;" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" boundary-links="true" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
  28. <br />
  29. [
  30. <a href="" ng-click="Btn=''">Reset</a> ]
  32. <table class="table table-striped table-bordered table-condensed">
  33. <thead>
  34. <tr class="danger"><%--
  35. <th>
  36. ID
  37. </th>--%>
  38. <th>
  39. <a href="" ng-click="Btn = 'name'; reverse=true"></a>
  40. <a href="" ng-click="Btn = '-fName'; reverse=true">First Name</a>
  41. </th>
  42. <th class="text-center">
  43. <a href="" ng-click="Btn = 'name'; reverse=true"></a>
  44. <a href="" ng-click="Btn = '-lName'; reverse=true">Last Name</a>
  45. </th>
  46. <th class="text-center" colspan="2">
  47. <a href="" ng-click="Btn = 'name'; reverse=true"></a>
  48. <a href="" ng-click="Btn = '-email'; reverse=true">Email Id</a>
  49. </th>
  50. <th class="text-center" colspan="2">
  51. <a href="" ng-click="Btn = 'num'; reverse=true"></a>
  52. <a href="" ng-click="Btn = '-number'; reverse=true">Phone Number</a>
  53. </th>
  54. <th class="text-center" colspan="2" >
  55. Image
  56. </th>
  57. <th class="text-center">
  58. Action
  59. </th>
  60. </tr>
  61. </thead>
  62. <tbody>
  63. <tr style="color: #7A2900" ng-repeat="user in usersa | filter:search | orderBy:Btn:reverse "><%--
  64. <td class="danger" class="text-center">
  65. {{user.id }}
  66. </td>--%>
  67. <td>
  68. {{user.fName }}
  69. </td>
  70. <td class="text-center">
  71. {{user.lName }}
  72. </td>
  73. <td class="text-center" colspan="2">
  74. {{user.email }}
  75. </td>
  76. <td class="text-center" colspan="2">
  77. {{user.number }}
  78. </td>
  79. <td class="text-center" colspan="2">
  80. <img ng-src="upload/{{user.hid}}" height="100px" width="100px" />
  81. </td>
  82. <td class="text-center">
  83. <a href="#" class="btn btn-primary" ng-click="edit(user.id)">
  84. <span class="glyphicon glyphicon-pencil"></span>Edit
  85. </a> |
  86. <a href="#" class="btn btn-danger" ng-click="del(user.id)">
  87. <span
  88. class="glyphicon glyphicon-remove"></span>Delete
  89. </a>
  90. </td>
  91. </tr>
  92. </tbody>
  93. </table>
  94. <p ng-hide="true">
  95. total Items: {{totalItems}}
  96. <br />
  97. Items per page: {{itemsPerPage}}
  98. <br />
  99. Current Page: {{currentPage}}
  101. </p>
  102. </div>
  103. </div>


Code For User Form Design
  1. <div class="form-horizontal" name="myForm" ng-show="edit2" ng-hide="true">
  2. <hr />
  3. <h3 ng-show="edit1" ng-hide="false">
  4. Create New User:</h3>
  5. <h3 ng-show="edit11" ng-hide="false"">
  6. Edit User:</h3>
  7. <input type="hidden" ng-model="newuser.id" />
  8. <div class="form-group" ng-show="edit5" ng-hide="false">
  9. <label class="col-sm-2 control-label">
  10. First Name:</label>
  11. <div class="col-sm-10">
  12. <input type="text" id="fname" name="fName" ng-model="newuser.fName" placeholder="First Name" />
  13. </div>
  14. </div>
  15. <div class="form-group" ng-show="edit5" ng-hide="false">
  16. <label class="col-sm-2 control-label">
  17. Last Name:</label>
  18. <div class="col-sm-10">
  19. <input type="text" id="lname" name="lname" ng-model="newuser.lName" placeholder="Last Name" />
  20. </div>
  21. </div>
  22. <div class="form-group" ng-show="edit5" ng-hide="false">
  23. <label class="col-sm-2 control-label">
  24. Email Id:</label>
  25. <div class="col-sm-10">
  26. <input type="text" id="email" name="email" ng-model="newuser.email" placeholder="Email ID" />
  27. </div>
  28. </div>
  29. <div class="form-group" ng-show="edit5" ng-hide="false">
  30. <label class="col-sm-2 control-label">
  31. Phone No:</label>
  32. <div class="col-sm-10">
  33. <input type="text" id="numb" class="num" name="num" ng-model="newuser.number" placeholder="Enter Phone NO" />
  34. </div>
  35. </div>
  36. <div class="form-group">
  37. <label class="col-sm-2 control-label">
  38. Birth Date:</label>
  39. <div class="col-sm-2">
  40. <p class="input-group">
  41. <input type="text" name="bday" id="bday" class="form-control" ng-focus="open($event)" ng-blur="out()" datepicker-popup="{{format}}" ng-model="newuser.bdate" is-open="opened" readonly="readonly" />
  42. <span class="input-group-btn">
  43. <button type="button" class="btn btn-default" ng-click="open($event)">
  44. <i class="glyphicon glyphicon-calendar"></i>
  45. </button>
  46. </span>
  47. </p>
  48. </div>
  49. </div>
  50. <div class="form-group" ng-show="edit7" ng-hide="false">
  51. <label class="col-sm-2 control-label">
  52. Image:</label>
  53. <div class="col-sm-15">
  54. <input type="file" file-model="myFile" id="myFile" class="btn btn-primary"/>
  55. <button ng-click="uploadFile()" class="btn btn-primary">
  56. <span class="glyphicon glyphicon-upload"> Upload File</span>
  57. </button>
  58. <br />
  59. </div>
  60. </div>
  61. <div class="col-sm-10" ng-show="remove" ng-hide="true" style="margin-left: 170px" >
  62. <img id="getimg" height="100px" width="100px"/>
  63. <button class="btn btn-danger" ng-click="removefile()" ng-show="remove1" ng-hide="false">
  64. <span
  65. class="glyphicon glyphicon-remove"></span>Remove
  66. </button>
  67. </div>
  68. <div class="form-group">
  69. <input type="text" id="hid" name="hid" ng-model="newuser.hid" ng-hide="true"/>
  70. </div>
  71. <hr />
  72. <button class="btn btn-primary" ng-click="saveUser()">
  73. <span class="glyphicon glyphicon-save"></span>Save Data
  75. </button>
  76. <button id="cbtn" class="btn btn-danger" ng-click="cancel()">
  77. <span class="glyphicon glyphicon-cancel"></span>Cancel
  79. </button>
  80. </div>


Save Button Code
  1. $scope.saveUser = function() {
  2. var a = $("#hid").val();
  3. $.ajax({
  4. type: "POST",
  5. url: "localstorage2.aspx/SaveUser",
  6. contentType: "application/json; charset=utf-8",
  7. data: JSON.stringify({
  8. id: $scope.id,
  9. fName: $scope.fName,
  10. lName: $scope.lName,
  11. email: $scope.email,
  12. number: $scope.number,
  13. hid: $scope.hid = a
  14. }),
  15. success: function(data) {
  16. strErrorMsg = "";
  17. notEmpty(document.getElementById('fname'), '-Enter your first name.');
  18. notEmpty(document.getElementById('lname'), '-Enter your last name.');
  19. notEmpty(document.getElementById('email'), '-Enter your Email ID.');
  20. notEmpty(document.getElementById('numb'), '-Enter your Phone NO.');
  21. notEmpty(document.getElementById('bday'), '-Enter your birth date.');
  22. validateEmail(document.getElementById('email'), '-Enter Valid Email');
  23. ValidMno(document.getElementById('numb'), '-Enter Valid Phone No');
  25. if (strErrorMsg == '') {
  26. var data = localStorage.getItem('iid');
  27. studa = JSON.parse(data);
  28. if ($scope.id == 0) {
  29. $scope.id = aid++;
  30. $scope.users.push({
  31. id: $scope.id,
  32. fName: $scope.fName,
  33. lName: $scope.lName,
  34. email: $scope.email,
  35. number: $scope.number,
  36. hid: $scope.hid = a
  37. });
  38. $("#msgLab").text("Record Save successfully");
  39. localStorage.setItem('iid', angular.toJson($scope.id));
  40. } else {
  41. for (i in $scope.users) {
  42. if ($scope.users[i].id == $scope.id) {
  43. $scope.users[i] = ({
  44. id: $scope.id,
  45. fName: $scope.fName,
  46. lName: $scope.lName,
  47. email: $scope.email,
  48. number: $scope.number,
  49. hid: $scope.hid
  50. });
  51. $scope.users[i].hid = a;
  52. $("#msgLab").text("Record Edit successfully");
  53. }
  54. }
  55. }
  56. localStorage.setItem('stu', angular.toJson($scope.users));
  57. $scope.totalItems = $scope.users.length;
  58. $scope.itemsPerPage = 3
  59. $scope.currentPage = 1;
  61. $scope.maxSize = 5;
  62. $scope.bigTotalItems = 175;
  63. $scope.bigCurrentPage = 1;
  65. $scope.pageCount = function() {
  66. return Math.ceil($scope.Friends.length / $scope.itemsPerPage);
  67. };
  68. $scope.edit2 = false;
  69. $scope.edit3 = true;
  70. $scope.$apply();
  71. }
  72. $window.alert(' Errors \n' + strErrorMsg);
  73. },
  74. error: function() {
  75. alert("error");
  76. }
  78. });
  79. };

Cancel button Code

  1. $scope.cancel = function ()
  2. {
  3. $scope.edit2 = false;
  4. $scope.edit3 = true;
  5. };

Delete button code

  1. $scope.del = function(id)
  2. {
  3. var deleteUser = $window.confirm('Are you sure you want to Record delete?');
  4. if (deleteUser) {
  5. $window.alert('One Record Delete');
  6. for (i in $scope.users) {
  7. if ($scope.users[i].id == id)
  8. {
  9. if ($scope.users[i].hid != "noimage.jpg")
  10. {
  11. $.ajax({
  12. type: "POST",
  13. url: "localstorage2.aspx/DeleteImage",
  14. contentType: "application/json; charset=utf-8",
  15. data: JSON.stringify({
  16. hid: $scope.users[i].hid
  17. }),
  18. success: function(data) {
  19. alert("succc");
  20. },
  21. error: function() {
  22. //alert("error");
  23. }
  24. });
  25. }
  26. $scope.users.splice(i, 1);
  27. $scope.newuser = {};
  28. $("#msgLab").text("Record Delete successfully");
  29. localStorage.setItem('stu', angular.toJson($scope.users));
  30. //localStorage.setItem('iid', angular.toJson($scope.newuser.id));
  31. }
  32. }
  33. }
  34. };


Edit Button Code
  1. $scope.edit = function(id) {
  2. for (i in $scope.users) {
  3. if ($scope.users[i].id == id) {
  4. if ($scope.users[i].hid == "noimage.jpg") {
  5. $scope.remove1 = false;
  6. } else {
  7. $scope.remove1 = true;
  8. }
  9. ({
  10. id: $scope.id,
  11. fName: $scope.fName,
  12. lName: $scope.lName,
  13. email: $scope.email,
  14. number: $scope.number,
  15. hid: $scope.hid
  16. }) = angular.copy($scope.users[i]);
  17. $("#getimg").attr('src', 'upload/' + $scope.users[i].hid);
  18. $scope.edit2 = true;
  19. $scope.edit3 = false;
  20. $scope.edit5 = true;
  21. $scope.edit1 = false;
  22. $scope.edit11 = true;
  23. $(myFile).val('');
  24. $("#msgLab").text("");
  25. $scope.remove = true;
  26. }
  27. }
  29. };




Remove Image at Edit time remove code
  1. $scope.removefile = function () {
  2. var Removeimg = $window.confirm('Are you sure you want to Remove The Image?');
  3. if (Removeimg) {
  4. $("#hid").val("noimage.jpg");
  5. $("#getimg").attr('src', 'upload/noimage.jpg');
  6. if ($("#hid").val() == "noimage.jpg") {
  7. $scope.remove1 = false;
  8. } else {
  9. $scope.remove1 = true;
  10. }
  11. }
  12. };
Create a New User Code
  1. $scope.editUser = function()
  2. {
  3. $scope.fName = "";
  4. $scope.lName = "";
  5. $scope.email = "";
  6. $scope.number = "";
  7. $scope.edit1 = true;
  8. $scope.edit11 = false;
  9. $scope.edit2 = true;
  10. $scope.edit3 = false;
  11. $scope.edit5 = true;
  12. $scope.edit6 = true;
  13. $(myFile).val('');
  14. $("#hid").val("noimage.jpg");
  15. $("#msgLab").text("");
  16. $scope.remove = false;
  17. $scope.id = 0;
  18. };

File Upload code

  1. $scope.uploadFile = function ()
  2. {
  3. var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
  4. if ($(myFile).val() == "") {
  5. alert("Select a file");
  6. }
  7. else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {
  8. alert("Select a image file");
  9. $(myFile).val('');
  10. $("#hid").val("noimage.jpg");
  11. }
  12. else
  13. {
  14. var file = $scope.myFile;
  15. var uploadUrl = "Image.aspx";
  16. fileUpload.uploadFileToUrl(file, uploadUrl);
  17. $scope.myFile = "";
  18. $scope.remove = true;
  19. $scope.remove1 = true;
  20. var reader = new FileReader();
  21. reader.onload = function (e) {
  22. scope.image = e.target.result;
  23. scope.$apply();
  24. }
  25. }
  26. elem.on('change', function () {
  27. reader.readAsDataURL(elem[0].files[0]);
  28. });
  29. };
  30. localstorage2.aspx Code For Delete a File From Folder
  31. <Services.WebMethod()>
  32. Public Shared Function DeleteImage(ByVal hid As String) As String
  33. If System.IO.File.Exists("D:\manish\Localstor\upload\" & hid) Then
  34. System.IO.File.Delete("D:\manish\Localstor\upload\" & hid)
  35. Else
  36. End If
  37. End Function
Image.aspx Code For Upload Fie
  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2. Response.Clear()
  3. Dim fileid As String = System.Guid.NewGuid.ToString()
  4. ' Dim fname As String = Context.Request.Files.Get(0).FileName()
  5. Context.Request.Files.Get(0).SaveAs("D:\manish\Localstor\upload\" & fileid & ".jpg")
  6. Response.Write(fileid)
  7. Response.End()
  8. End Sub