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

Last Reply 28 days ago By dharmendr

Posted 29 days 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")
}

 

You are viewing reply posted by: dharmendr 28 days ago.
Posted 28 days 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