Hi rani,
In the below sample i have used html button control. But i have not assigned the type attribute. So submit is the default value. Thats why page gets postback.
To over come this problem assign the type attribute to button.
And replace the below html and angular code. The C# and VB.Net code will remain same.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Inline Editing in AngularJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $http, $window) {
$scope.selected = {};
$scope.GetTemplateView = function (customer) {
if (customer.Id === $scope.selected.Id) {
return 'edit';
} else {
return 'display';
}
}
PopulateCustomers($scope, $http);
$scope.EditCustomer = function (customer) {
$scope.selected = angular.copy(customer);
}
$scope.CancelEdit = function () {
PopulateCustomers($scope, $http);
$scope.selected = {};
}
$scope.UpdateCustomer = function (index) {
var customer = $scope.Customers[index];
var data = { id: customer.Id, name: customer.Name, country: customer.Country };
$http.post("Default.aspx/UpdateCustomer", JSON.stringify(data), { headers: { 'Content-Type': 'application/json'} });
$scope.selected = {};
}
$scope.DeleteCustomer = function (customer) {
if ($window.confirm("Do you want to delete customer " + customer.Name + " ?")) {
var data = { id: customer.Id };
$http.post("Default.aspx/DeleteCustomer", JSON.stringify(data), { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
PopulateCustomers($scope, $http);
});
}
}
});
function PopulateCustomers($scope, $http) {
$http.post("Default.aspx/GetCustomers", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.Customers = eval(response.data.d);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in Customers" ng-include="GetTemplateView(customer)">
</tr>
</tbody>
</table>
<%--Template For Display View--%>
<script type="text/ng-template" id="display">
<td>{{customer.Name}}</td>
<td>{{customer.Country}}</td>
<td>
<button type="button" class="btn btn-primary btn-sm glyphicon glyphicon-edit" ng-click="EditCustomer(customer)"> Edit</button>
<button type="button" class="btn btn-danger btn-sm glyphicon glyphicon-remove" ng-click="DeleteCustomer(customer)"> Delete</button>
</td>
</script>
<%--Template For Edit View--%>
<script type="text/ng-template" id="edit">
<td><input class="form-control" type="text" ng-model="customer.Name" width="100px" /></td>
<td><input class="form-control" type="text" ng-model="customer.Country" /></td>
<td>
<button type="button" class="btn btn-success btn-sm glyphicon glyphicon-ok" ng-click="UpdateCustomer($index)"> Update</button>
<button type="button" class="btn btn-default btn-sm glyphicon glyphicon-erase" ng-click="CancelEdit()"> Cancel</button>
</td>
</script>
</div>
</form>
</body>
</html>
Screenshot
