Display alert message if nested GridView is Empty (No Record) using AngularJS in ASP.Net

Last Reply 4 months ago By dharmendr

Posted 4 months ago

Hi,

after clicking of edit button in parent gridview

if values are present (customer.Orders) in nested grid view then only i need to procced to process or else display alert message values are not present in subgrid view

[Solved] AngularJS ng-repeat not displaying JSON data in ASP.Net MVC 

In above url i have one buton on main gridview

Could you please help me

<td ng-click="Edit(customer.Customers.CustomerID)" href="">CustomerID</td>
$scope.Edit=(CustomerID){
if () {
    alert("evrything is fine")
} else {
    alert("valeus are not present in both grid views")
}

 

Posted 4 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GeCustomerOrders()
    {
        NorthwindEntities db = new NorthwindEntities();
        List<CustomerModel> CO = new List<CustomerModel>();
        string[] customesids = new string[] { "ALFKI", "ANATR", "FISSA", "PARIS" };
        var cust = db.Customers.Where(x => customesids.Contains(x.CustomerID)).OrderBy(a => a.ContactName).ToList();
        foreach (var i in cust)
        {
            List<OrderDetail> orders = db.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).Take(2)
                .OrderBy(a => a.OrderDate)
                .Select(x => new OrderDetail { OrderDate = x.OrderDate, ShipName = x.ShipName }).ToList();
            CO.Add(new CustomerModel
            {
                Customers = new CustomerDetail { CustomerID = i.CustomerID, ContactName = i.ContactName, Address = i.Address },
                Orders = orders
            });
        }
        return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public class CustomerModel
    {
        public CustomerDetail Customers { get; set; }
        public List<OrderDetail> Orders { get; set; }
    }

    public class CustomerDetail
    {
        public string CustomerID { get; set; }
        public string ContactName { get; set; }
        public string Address { get; set; }
    }

    public class OrderDetail
    {
        public DateTime? OrderDate { get; set; }
        public string ShipName { 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://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
        app.filter("dateFilter", function () {
            return function (item) {
                if (item != null) {
                    return new Date(parseInt(item.substr(6)));
                }
                return "";
            };
        });
        app.controller('MyController', function ($scope, $http, MyService) {
            GetAllEmployees();
            //To Get All Employee Records 
            function GetAllEmployees() {
                var getData = MyService.getemployee();
                getData.then(function (emp) {
                    $scope.Customers = emp.data;
                }, function (emp) {
                    alert("Records gathering failed!");
                });
            }
            $scope.Edit = function (CustomerID) {
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if ($scope.Customers[i].Customers.CustomerID == CustomerID) {
                        if ($scope.Customers[i].Orders.length > 0) {
                            alert("evrything is fine")
                        } else {

                            alert("valeus are not present in both grid views")
                        }
                        break;
                    }
                }
            }
        });
        app.service("MyService", function ($http) {
            //get All Employees
            this.getemployee = function () {
                return $http.get("/Home/GeCustomerOrders");
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive">
            <thead>
                <tr class="success">
                    <th></th>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody dir-paginate="customer in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                <tr ng-class-even="'even'" ng-class-odd="'odd'">
                    <td>
                        <button type="button" ng-click="expanded = !expanded" class="btn btn-default">
                            <span ng-bind="expanded ? '-' : '+'"></span>
                        </button>
                    </td>
                    <td>{{customer.Customers.CustomerID }}</td>
                    <td>{{customer.Customers.ContactName }}</td>
                    <td>{{customer.Customers.Address}}</td>
                    <td ng-click="Edit(customer.Customers.CustomerID)" class="btn btn-primary">Edit</td>
                </tr>
                <tr class="sub" ng-show="expanded">
                    <td>
                    </td>
                    <td colspan="5">
                        <table class="table table-responsive">
                            <tr class="info">
                                <th>OrderDate</th>
                                <th>Ship Name</th>
                            </tr>
                            <tr dir-paginate="order in customer.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                                ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>
                                    <input type="hidden" ng-model="order.OrderID" />
                                    {{order.OrderDate | dateFilter | date:"dd-MM-yyyy"}}
                                </td>
                                <td>{{order.ShipName}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Screenshot