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

Last Reply 2 months ago By dharmendr

Posted 2 months 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

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