Remove multiple Rows from Database using AngularJS in ASP.Net MVC

Last Reply 10 days ago By dharmendr

Posted 10 days ago

Hi,

I have one table Items

Orders

OrderId OrderName

1 Order1

Item

OrderId Id Name

1 1 aaa

1 2 bbb

1 3 ccc

After clicking of edit button it was dislaying based upon OrderId 3 rows on form

i have removed 2 rows after clicking of save button only i need to remove that rows

I didn't get any idea how to remove particular row

based upon Id (Items table)

Could you please help me

I have shared you my code

string result = "Error! Items Is Not Complete!";
bool isLocIdExist1 = db.Order.Where(x => x.OrderId == Items.OrderId).ToList().Count > 0 ? true : false;
decimal OId = Slabs.OrderId;
decimal ItemId = Slabs.Id;
                                     
        foreach (var controls in Items.details)
        {
            var itemDetail = db.Items.Where(x => x.Id == controls.Id).FirstOrDefault();
            if (slabDetail == null)
            {
                Item item = new Item();
                item.OrderId =OId
                item.Id = ItemId;
                item.Name = controls.Name;                                
                db.Items.Add(slab);
                db.SaveChanges();
                result = "Items has been Created Succuessfully!";
            }

            else
            {
                itemDetail.Id = ItemId;
                item.OrderId = OId;
                item.Name = controls.Name;                              
                db.SaveChanges();
                result = "Items has been Upadted Succuessfully!";                        
            }
        }

return Json(result, JsonRequestBehavior.AllowGet);
You are viewing reply posted by: dharmendr 10 days ago.
Posted 10 days ago Modified on 9 days ago

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>&nbsp;</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