Display Loading Progress (Image) while fetching data from database using AngularJS in ASP.Net MVC

Last Reply 20 days ago By dharmendr

Posted 22 days ago

Hi,

After clicking of submit button need to display loading image

it loads 100% then only display grid view records on view

Filter HTML Table based on DropDownList on Button Click using AngularJS in ASP.Net MVC

I am using above code for fecthing records based upon Item

Posted 20 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 GetReport()
    {
        List<Item> items = new List<Item>();
        items.Add(new Item { Id = 1, Name = "aaa" });
        items.Add(new Item { Id = 2, Name = "bbb" });
        items.Add(new Item { Id = 3, Name = "ccc" });

        var JsonResult = Json(items, JsonRequestBehavior.AllowGet);
        return JsonResult;
    }

    [HttpPost]
    public JsonResult getAll(int Id)
    {
        List<Report> reportList = null;
        if (Id > 0)
        {
            reportList = GetAllReports().Where(x => x.Id == Id).ToList();
        }
        else
        {
            reportList = GetAllReports();
        }
        var JsonResult = Json(reportList, JsonRequestBehavior.AllowGet);
        return JsonResult;
    }

    public List<Report> GetAllReports()
    {
        List<Report> reports = new List<Report>();
        reports.Add(new Report { RId = 1, Id = 1, Item = "Item1" });
        reports.Add(new Report { RId = 2, Id = 1, Item = "Item2" });
        reports.Add(new Report { RId = 3, Id = 2, Item = "Item3" });

        return reports;
    }

    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public class Report
    {
        public int RId { get; set; }
        public int Id { get; set; }
        public string Item { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <style type="text/css">
        .modalPopup
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: #B8B8B8;
            z-index: 99;
            opacity: 0.9;
            filter: alpha(opacity=90);
            -moz-opacity: 0.9;
            min-height: 100%;
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', ['$scope', '$http', '$window', '$timeout', function ($scope, $http, $window, $timeout) {
            $scope.ShowLoader = false;
            GetItems();
            function GetItems() {
                $scope.Items = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetReport/'
                }).success(function (data, status, headers, config) {
                    $scope.Items = data;
                    $scope.Items.splice(0, 0, { Id: 0, Name: 'All' });
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.IsVisible = false;
            $scope.GetAllItems = function () {
                if ($scope.Item != undefined) {
                    var Id1 = $scope.Item;
                    //Show loader image.
                    $scope.ShowLoader = true;
                    $http({
                        method: 'POST',
                        url: '/Home/getAll/',
                        params: { Id: Id1 }
                    }).success(function (data, status, headers, config) {
                        //Hide loader image & process successful data.
                        $scope.ShowLoader = false;
                        if (data.length > 0) {
                            $scope.items = data;
                            $scope.IsVisible = true;
                        } else {
                            $scope.items = [];
                            $scope.IsVisible = false;
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.items = 'Unexpected Error';
                        //Hide loader image.
                        $scope.ShowLoader = false;
                    });
                } else {
                    $scope.items = [];
                    $scope.IsVisible = false;
                }
            }
        } ]); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="modalPopup" align="center" ng-show="ShowLoader">
        <br /><br />
        Loading. Please wait.<br /><br />
        <img src="../../Images/progress.gif" alt="Loading. Please wait." />
    </div>
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">
                Item</label>
            <div class="col-md-2">
                <select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items">
                    <option value="">-- Select Item --</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="GetAllItems()">
            <span class="glyphicon glyphicon-ok"></span>Submit
        </button>
    </div>
    <div class="container" ng-show="IsVisible" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Item</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.RId}}</td>
                <td>{{item.Item}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

Screenshot