Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetOrders()
{
return Json(OrdersList(), JsonRequestBehavior.AllowGet);
}
public JsonResult GetItemsByOrderId(int? id)
{
List<Item> items = ItemsList().Where(x => x.OrderId == id).ToList();
return Json(items, JsonRequestBehavior.AllowGet);
}
public JsonResult Save(string[] items)
{
for (int i = 0; i < items.Length; i++)
{
JavaScriptSerializer se = new JavaScriptSerializer();
DeletedItem deleted = se.Deserialize<DeletedItem>(items[i].ToString());
// Write code to remove from database.
foreach (Item item in ItemsList().ToList())
{
if (item.Id == deleted.Id && item.OrderId == deleted.OrderId)
{
ItemsList().Remove(item);
}
}
}
// Get updated record from database after delete.
return Json(items.ToList(), JsonRequestBehavior.AllowGet);
}
private static List<Order> OrdersList()
{
List<Order> orders = new List<Order>();
orders.Add(new Order { OrderId = 1, OrderName = "Order 1" });
orders.Add(new Order { OrderId = 2, OrderName = "Order 2" });
return orders;
}
private static List<Item> ItemsList()
{
List<Item> items = new List<Item>();
items.Add(new Item { OrderId = 1, Id = 1, Name = "Item 1" });
items.Add(new Item { OrderId = 1, Id = 2, Name = "Item 4" });
items.Add(new Item { OrderId = 2, Id = 3, Name = "Item 3" });
items.Add(new Item { OrderId = 2, Id = 4, Name = "Item 2" });
return items;
}
public class Order
{
public int OrderId { get; set; }
public string OrderName { get; set; }
}
public class Item
{
public int OrderId { get; set; }
public int Id { get; set; }
public string Name { get; set; }
}
public class DeletedItem
{
public int OrderId { get; set; }
public int Id { get; set; }
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $http) {
PopulateOrders();
$scope.GetItems = function (orderId) {
$http({ method: 'Get', url: '/Home/GetItemsByOrderId/', params: { id: orderId} })
.success(function (data) {
if (data.length > 0) {
$scope.Items = data;
} else {
$scope.Items = [];
}
});
}
$scope.DeletedItems = [];
$scope.DeleteItem = function (item) {
var obj = {};
obj.OrderId = item.OrderId;
obj.Id = item.Id;
$scope.DeletedItems.push(obj);
var index = $scope.Items.indexOf(item);
$scope.Items.splice(index, 1);
}
$scope.Save = function () {
$http({ method: 'Get', url: '/Home/Save/', params: { items: $scope.DeletedItems} })
.success(function (data) {
});
}
function PopulateOrders() {
$scope.Orders = [];
$http({ method: 'Get', url: '/Home/GetOrders/' })
.success(function (data) {
if (data.length > 0) {
$scope.Orders = data;
} else {
$scope.Orders = [];
}
});
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<table class="table table-responsive">
<tr>
<th>Order Id</th>
<th>Order Name</th>
<th> </th>
</tr>
<tr ng-repeat="order in Orders">
<td>{{order.OrderId}}</td>
<td>{{order.OrderName}}</td>
<td><input type="button" value="Get Items" ng-click="GetItems(order.OrderId)" class="btn btn-sm btn-primary" /></td>
</tr>
</table>
<br />
<table class="table table-responsive" ng-show="Items">
<tr>
<th>Item Id</th>
<th>Item Name</th>
<th>Delete</th>
</tr>
<tr ng-repeat="item in Items">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td><input type="button" value="Delete" ng-click="DeleteItem(item)" class="btn btn-sm btn-danger" /></td>
</tr>
</table>
<center>
<input type="button" value="Save" ng-click="Save()" class="btn btn-md btn-success" />
<input type="button" value="Cancel" class="btn btn-md btn-default" />
</center>
</body>
</html>
Screenshot
Deleted Items in controller
