Hi rani,
Check this example. Now please take its reference and correct your code.
Database
I have made use of the following table Customers with the schema as follows.
I have already inserted few records in the table.
You can download the database table SQL by clicking the download link below.
Download SQL file
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.Customers = [];
PopulateCustomers($scope, $http);
$scope.EditCustomer = function (id) {
for (var i = 0; i < $scope.Customers.length; i++) {
if ($scope.Customers[i].Id == id) {
$scope.Customers[i].EditMode = true;
} else {
$scope.Customers[i].EditMode = false;
}
}
}
$scope.UpdateCustomer = function (customer) {
var data = { id: customer.Id, name: customer.Name, country: customer.Country };
$http.post("Default.aspx/UpdateCustomer", JSON.stringify(data), { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
PopulateCustomers($scope, $http);
});
}
$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);
});
}
}
$scope.CancelEdit = function (customer) {
for (var i = 0; i < $scope.Customers.length; i++) {
$scope.Customers[i].EditMode = false;
}
}
});
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">
<td>
<span ng-show="!customer.EditMode">{{customer.Name}}</span>
<input class="form-control" type="text" ng-model="customer.Name" ng-show="customer.EditMode" />
</td>
<td>
<span ng-show="!customer.EditMode">{{customer.Country}}</span>
<input class="form-control" type="text" ng-model="customer.Country" ng-show="customer.EditMode" />
</td>
<td>
<div ng-show="!customer.EditMode">
<button type="button" class="btn btn-primary btn-sm glyphicon glyphicon-edit" ng-click="EditCustomer(customer.Id)">
Edit</button>
<button type="button" class="btn btn-danger btn-sm glyphicon glyphicon-remove" ng-click="DeleteCustomer(customer)">
Delete</button>
</div>
<div ng-show="customer.EditMode">
<button type="button" class="btn btn-success btn-sm glyphicon glyphicon-ok" ng-click="UpdateCustomer(customer)">
Update</button>
<button type="button" class="btn btn-default btn-sm glyphicon glyphicon-erase" ng-click="CancelEdit(customer)">
Cancel</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
VB.Net
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services
Code
C#
[WebMethod]
public static string GetCustomers()
{
List<object> customers = new List<object>();
string sql = "SELECT * FROM Customers";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new
{
Id = sdr["CustomerId"],
Name = sdr["Name"],
Country = sdr["Country"]
});
}
}
conn.Close();
}
return (new JavaScriptSerializer().Serialize(customers));
}
}
[WebMethod]
public static void UpdateCustomer(int id, string name, string country)
{
string sql = "UPDATE Customers SET Name = @Name, Country = @Country WHERE CustomerId = @Id";
using (SqlConnection con = new SqlConnection())
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Id", id);
cmd.Parameters.AddWithValue("@Name", name);
cmd.Parameters.AddWithValue("@Country", country);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
[WebMethod]
public static void DeleteCustomer(int id)
{
string sql = "DELETE FROM Customers WHERE CustomerId = @Id";
using (SqlConnection con = new SqlConnection())
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Id", id);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
VB.Net
<WebMethod()>
Public Shared Function GetCustomers() As String
Dim customers As List(Of Object) = New List(Of Object)()
Dim sql As String = "SELECT * FROM Customers"
Using conn As SqlConnection = New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As SqlCommand = New SqlCommand(sql)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New With {
.Id = sdr("CustomerId"),
.Name = sdr("Name"),
.Country = sdr("Country")
})
End While
End Using
conn.Close()
End Using
Return (New JavaScriptSerializer().Serialize(customers))
End Using
End Function
<WebMethod()>
Public Shared Sub UpdateCustomer(ByVal id As Integer, ByVal name As String, ByVal country As String)
Dim sql As String = "UPDATE Customers SET Name = @Name, Country = @Country WHERE CustomerId = @Id"
Using con As SqlConnection = New SqlConnection()
con.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As SqlCommand = New SqlCommand(sql)
cmd.Connection = con
cmd.Parameters.AddWithValue("@Id", id)
cmd.Parameters.AddWithValue("@Name", name)
cmd.Parameters.AddWithValue("@Country", country)
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Using
End Using
End Sub
<WebMethod()>
Public Shared Sub DeleteCustomer(ByVal id As Integer)
Dim sql As String = "DELETE FROM Customers WHERE CustomerId = @Id"
Using con As SqlConnection = New SqlConnection()
con.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As SqlCommand = New SqlCommand(sql)
cmd.Connection = con
cmd.Parameters.AddWithValue("@Id", id)
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Using
End Using
End Sub
Screenshot
