How to Add, Update and Delete JSON File

In this article you will learn how to Add Edit And Delete Data from JSON File With AngularJS and ASP.NET.

Angularjs File

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div ng-controller="userController" ng-app="myApp">
<div class="container">
<div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">
<button type="button" class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;
margin-top: 7px">
<span class="glyphicon glyphicon-user"></span>Create New User
</button>
<label id="msgLab" style="color: #008080; font-size: large"></label>
<br />
<hr />
<div class="manish">
<h3>
Users</h3>
<div class="navbar-form" role="search">
<div class="input-group add-on">
<input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term"
id="search" class="form-control" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="sear()">
<i class="glyphicon glyphicon-search"></i>Search
</button>
</div>
</div>
</div>
</div>
<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>
<br />
[
<a href="" ng-click="Btn=''">Reset</a> ]
<table class="table table-striped table-bordered table-condensed table-striped table-hover ">
<thead>
<th>Id</th>
<th>
<a href="" ng-click="Btn = 'firstName'; reverse=true"></a>
<a href="" ng-click="Btn = '-firstName'; reverse=true">
First Name</a>
</th>
<th class="text-center">
<a href="" ng-click="Btn = 'lastName'; reverse=true"></a>
<a href="" ng-click="Btn = '-lastName'; reverse=true">
Last Name</a>
</th>
<th class="text-center">
<a href="" ng-click="Btn = 'phone'; reverse=true"></a>
<a href="" ng-click="Btn = '-phone'; reverse=true">
Phone</a>
</th>
<th class="text-center">
Image
</th>
<th class="text-center">
Action
</th>
</thead>
<tbody>
<tr style="color: #7A2900" data-ng-repeat="user in users | filter:search | orderBy:Btn:reverse">
<td>
{{user.id }}
</td>
<td>
{{user.firstName }}
</td>
<td>
{{user.lastName }}
</td>
<td>
{{user.phone }}
</td>
<td class="text-center">
<img alt="Responsive image" class="img-circle col-xs-10 col-md-10" ng-src="upload/{{user.photo}}"
height="100px" width="100px" />
</td>
<td class="text-center">
<a href="#" class="btn btn-primary" ng-click="edit(user.id)">
<span class="glyphicon glyphicon-pencil"></span>Edit
</a> |
<a href="#" class="btn btn-danger" ng-click="del(user.id)">
<span
class="glyphicon glyphicon-remove"></span>Delete
</a>
</td>
</tr>
</tbody>
</table>
<p id="hide" style="font-size:x-large; color:Red;"></p>
<p ng-hide="true">
total Items: {{totalItems}}
<br />
Items per page: {{itemsPerPage}}
<br />
Current Page: {{currentPage}}
</p>
</div>
</div>
<div class="form-horizontal" id="myForm" name="myForm" ng-show="edit2" ng-hide="true">
<h3 ng-show="edit1" ng-hide="false">
Create New User:</h3>
<h3 ng-show="edit11" ng-hide="true"">
Edit User:</h3>
<div class="form-group" ng-show="edit5" ng-hide="true">
<label class="col-sm-2 control-label">ID:</label>
<div class="col-sm-10" ng-hide="true">
<input type="text" id="id" name="id" ng-model="id"/>
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
First Name:</label>
<div class="col-sm-5">
<input type="text" id="fname" name="fName" ng-model="fName" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Last Name:</label>
<div class="col-sm-5">
<input type="text" id="lname" name="lname" ng-model="lName" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Phone Number:</label>
<div class="col-sm-5">
<input type="text" id="phone" name="phone" ng-model="phone" placeholder="Phone Number" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit7" ng-hide="false">
<label class="col-sm-3 control-label" >
Image:</label>
<div class="col-sm-5">
<input class="file" type="file" file-model="myFile" id="myFile"/>
<button type="button" ng-click="uploadFile()" class="btn btn-primary">
<span class="glyphicon glyphicon-upload"> Upload File</span>
</button>
<br />
</div>
</div>
<div class="col-sm-20" ng-show="remove" ng-hide="true" style="margin-left:150px">
<img id="getimg" height="200px" width="200px" class="img-thumbnail col-xs-10 col-md-5" alt="Responsive image"/>
<button type="button" class="btn btn-info" id="Remov" ng-click="removefile()" ng-show="remove1" ng-hide="false">
<span
class="glyphicon glyphicon-remove"></span>Remove
</button>
</div>
<div class="form-group" style="margin-left:300px">
<input type="text" id="hid" name="hid" ng-model="hid" ng-hide="true" />
</div>
<button type="button" class="btn btn-primary" ng-click="SaveData()" style="margin-left:200px">
<span class="glyphicon glyphicon-save"></span>Save Data
</button>
<button type="button" id="cbtn" class="btn btn-danger" ng-click="cancel()">
<span class="glyphicon glyphicon-cancel"></span>Cancel
</button>
<br />
<br />
</div>
<div id="advertisement" ng-show="adv" ng-hide="true">
<center>Advertisement</center>
<img att="grfg" src="Images/adv/add.png" height="400" width="350" style="margin-left:120px; margin-top:20px;" />
</div>
<div id="advertisement1" ng-show="adv1" ng-hide="true">
<center>Advertisement_1</center>
<img att="grfg" src="Images/adv/edit.png" height="400" width="350" style="margin-left:120px; margin-top:20px;" />
</div>
</div>
</asp:Content>

Asp.net File

Public Class Class1
Public Property User As Object
End Class
Public Class Class2
Public Property id As String
Public Property firstName As String
Public Property lastName As String
Public Property phone As String
Public Property photo As String
End Class
<Services.WebMethod()>
Public Shared Function Data_Save(ByVal id As String, ByVal firstName As String, ByVal lastName As String, ByVal phone As String, ByVal photo As String) As String
Try
Dim str As String = ""
Dim sr As StreamReader = New StreamReader("D:\manish\Project\Project\JsonData.txt")
str = sr.ReadToEnd()
Dim cont As New List(Of Class2)
cont = JsonConvert.DeserializeObject(Of List(Of Class2))(str)
Dim Person As New Class2
'Person.id = id
Person.firstName = firstName
Person.lastName = lastName
Person.phone = phone
Person.photo = photo
Dim randomNumber As Integer
Randomize()
randomNumber = Int((100000 * Rnd()) + 1)
If str.Length <= 0 Then
Person.id = randomNumber
Dim f As String
f = JsonConvert.SerializeObject(Person, Formatting.Indented)
sr.Dispose()
Dim sw1 As StreamWriter = New StreamWriter("D:\manish\Project\Project\JsonData.txt")
sw1.Write("[" + f + "]")
sw1.Dispose()
Else
If id = 0 Then
Person.id = randomNumber
cont.Add(Person)
Else
For Each dta In cont
If dta.id = id Then
dta.firstName = firstName
dta.lastName = lastName
dta.phone = phone
dta.photo = photo
End If
Next
End If
'For Each dt In cont
'Next
Dim a As String
a = JsonConvert.SerializeObject(cont, Formatting.Indented)
sr.Dispose()
Dim sw As StreamWriter = New StreamWriter("D:\manish\Project\Project\JsonData.txt")
sw.Write(a)
sw.Dispose()
End If
Catch ex As JsonSerializationException
MsgBox(ex.Message)
End Try
End Function
<Services.WebMethod()>
Public Shared Function Data_Delete(ByVal id As String) As String
Try
Dim str As String = ""
Dim sr As StreamReader = New StreamReader("D:\manish\Project\Project\JsonData.txt")
str = sr.ReadToEnd()
Dim cont As New List(Of Class2)
Dim Class2DT As New Class2
cont = JsonConvert.DeserializeObject(Of List(Of Class2))(str)
For Each dt In cont
If dt.id = id Then
Class2DT = dt
End If
Next
cont.Remove(Class2DT)
Dim a As String
a = JsonConvert.SerializeObject(cont, Formatting.Indented)
sr.Dispose()
Dim sw As StreamWriter = New StreamWriter("D:\manish\Project\Project\JsonData.txt")
sw.Write(a)
sw.Dispose()
Catch ex As JsonSerializationException
MsgBox(ex.Message)
End Try
End Function
<Services.WebMethod()>
Public Shared Function DeleteImage(ByVal hid As String) As String
If System.IO.File.Exists("D:\manish\Project\Project\upload\" & hid) Then
System.IO.File.Delete("D:\manish\Project\Project\upload\" & hid)
Else
Return False
End If
End Function

JS File

var myApp = angular.module('myApp', ['ui.bootstrap']);
var myApp = angular.module('myApp', ['ui.bootstrap']);
//upload a file code
myApp.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function($http) {
this.uploadFileToUrl = function(file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
.success(function(data) {
if (data.split("|")[0] == "True") {
$("#getimg").attr('src', 'upload/' + data.split("|")[1] + '.jpg');
$("#hid").val(data.split("|")[1] + ".jpg");
var img = $("#hid").val();
if (img == "noimage.jpg") {
$("#Remov").hide();
} else {
$("#Remov").show();
}
} else if (data.split("|")[0] == "False") {
alert(data.split("|")[1]);
var ab = $("#hid").val();
$("#getimg").attr('src', 'upload/' + ab);
var img = $("#hid").val();
if (img == "noimage.jpg") {
$("#Remov").hide();
} else {
$("#Remov").show();
}
}
})
.error(function() {
if ($(myFile).val() == "") {
alert("Select a file");
} else {
alert("Select a image file");
}
});
}
}]);
myApp.controller('userController', ['$scope', '$window', '$filter', '$http', 'fileUpload', function($scope, $window, $filter, $http, fileUpload) {
$scope.fName = '';
$scope.lName = '';
$scope.phone = '';
$scope.id = 0;
$scope.users = [
// { id: 1, 'firstName': 'manish', 'lastName': 'Pipaliya', 'phone': '9727899812' },
// { id: 2, 'firstName': 'Depak', 'lastName': 'Patel', 'phone': '9724228344' }
];
$scope.sear = function() {
var orderBy = $filter('orderBy');
$scope.order = function(Btn) {
$scope.users = orderBy($scope.users, Btn);
};
};
$scope.LoadData = function() {
$http.get('JsonData.txt').success(function(data) {
$scope.users = data;
$scope.totalItems = $scope.users.length;
if ($scope.totalItems <= 0) {
$("#hide").text("No Record Found");
}
$scope.itemsPerPage = 3
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
$scope.pageCount = function() {
return Math.ceil($scope.users.length / $scope.itemsPerPage);
};
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.users = data.slice(begin, end);
});
});
};
$scope.LoadData();
$scope.uploadFile = function() {
var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($(myFile).val() == "") {
alert("Select a file");
} else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {
alert("Select a image file");
$(myFile).val('');
$("#hid").val("noimage.jpg");
} else {
var file = $scope.myFile;
var uploadUrl = "Image_Upload.aspx";
fileUpload.uploadFileToUrl(file, uploadUrl);
$scope.myFile = "";
$scope.remove = true;
var reader = new FileReader();
reader.onload = function(e) {
scope.image = e.target.result;
scope.$apply();
}
}
elem.on('change', function() {
reader.readAsDataURL(elem[0].files[0]);
});
return false;
};
$scope.SaveData = function() {
strErrorMsg = "";
var a = $("#hid").val();
notEmpty(document.getElementById('fname'), '-Enter your First Name.');
notEmpty(document.getElementById('lname'), '-Enter your Last Name.');
notEmpty(document.getElementById('phone'), '-Enter your Phone Number.');
ValidMno(document.getElementById('phone'), '-Enter Valid Phone Number.');
if (strErrorMsg == '') {
$.ajax({
type: "POST",
url: "UsersFormJson.aspx/Data_Save",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
id: $scope.id,
firstName: $scope.fName,
lastName: $scope.lName,
phone: $scope.phone,
photo: $scope.hid = a
}),
success: function(data) {
$scope.LoadData();
$("#hide").text('');
$scope.$apply();
}
});
$scope.edit3 = true;
$scope.edit2 = false;
$scope.adv = false;
$scope.adv1 = false;
}
if (strErrorMsg != '') {
$window.alert(' \n' + strErrorMsg);
} else {
}
};
function notEmpty(elem, helperMsg) {
if (elem.value == "") {
strErrorMsg = strErrorMsg + helperMsg + "\n";
}
}
function ValidMno(elem, helperMsg) {
if (elem.value !== "") {
var phone = /^$?([0-9]{3})$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (!(elem.value.match(phone))) {
strErrorMsg = strErrorMsg + '' + helperMsg + "\n";
}
}
}
$scope.edit = function(id) {
for (i in $scope.users) {
if ($scope.users[i].id == id) {
if ($scope.users[i].photo == "noimage.jpg") {
$("#Remov").hide();
} else {
$("#Remov").show();
}
({
id: $scope.id,
firstName: $scope.fName,
lastName: $scope.lName,
phone: $scope.phone,
photo: $scope.hid
}) = angular.copy($scope.users[i]);
$("#getimg").attr('src', 'upload/' + $scope.users[i].photo);
//alert($scope.users[i].photo);
$scope.edit3 = false;
$scope.edit2 = true;
$scope.edit11 = true;
$scope.edit1 = false;
//$(myFile).val('');
$scope.remove = true;
$scope.$apply();
$scope.adv1 = true;
$scope.adv = false;
}
}
};
$scope.removefile = function() {
var Removeimg = $window.confirm('Are you sure you want to Remove The Image?');
if (Removeimg) {
$("#hid").val("noimage.jpg");
$("#getimg").attr('src', 'upload/noimage.jpg');
if ($("#hid").val() == "noimage.jpg") {
$scope.remove1 = false;
} else {
$scope.remove1 = true;
}
}
};
//Delete a Image From Folder
$scope.delt = function(id) {
for (i in $scope.users) {
if ($scope.users[i].id == id) {
if ($scope.users[i].photo != "noimage.jpg") {
$.ajax({
type: "POST",
url: "UsersFormJson.aspx/DeleteImage",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
hid: $scope.users[i].photo
}),
success: function(data) {
},
error: function() {}
});
}
}
}
};
$scope.del = function(id) {
var deleteUser = $window.confirm('Are you sure you want to delete this Record ?');
if (deleteUser) {
for (i in $scope.users) {
if ($scope.users[i].id == id) {
$.ajax({
type: "POST",
url: "UsersFormJson.aspx/Data_Delete",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
id: $scope.users[i].id
}),
success: function(data) {
alert("Record Delete successfully");
}
});
$scope.delt(id);
$scope.LoadData();
}
}
}
alert("Keep it Continue");
};
$scope.editUser = function() {
$scope.edit11 = false;
$scope.edit1 = true;
$scope.edit3 = false;
$scope.edit2 = true;
$scope.fName = '';
$scope.phone = '';
$scope.lName = '';
$scope.id = 0;
$(myFile).val('');
$("#hid").val("noimage.jpg");
$scope.remove = false;
$scope.adv = true;
$scope.adv1 = false;
var abc = $("#hid").val();
$("#getimg").attr('src', 'upload/' + abc);
$scope.remove = true;
$("#Remov").hide();
};
$scope.cancel = function() {
$scope.edit3 = true;
$scope.edit2 = false;
$scope.adv = false;
$scope.adv1 = false;
};
}]);
Json File(JsonData.txt)[{
"id": "52182",
"firstName": "Dharmesh",
"lastName": "Patel",
"phone": "9727899812",
"photo": "noimage.jpg"
}, {
"id": "95978",
"firstName": "manish",
"lastName": "pipaliy",
"phone": "9727899812",
"photo": "noimage.jpg"
}, {
"id": "19258",
"firstName": "Depak",
"lastName": "Patel",
"phone": "9725564444",
"photo": "89f7ae05-f1b8-47e0-a11d-3c19264fdf57.jpg"
}]