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

Last Reply 10 months ago By dharmendr

Posted 10 months 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 months ago.
Posted 10 months ago Modified on 10 months 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