ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display Loading Progress (Image) while fetching data from database using AngularJS in ASP.Net MVC<p>Hi <a class="username" rel="mahesh213"> mahesh213</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { return View(); } public JsonResult GetReport() { List&lt;Item&gt; items = new List&lt;Item&gt;(); items.Add(new Item { Id = 1, Name = &#34;aaa&#34; }); items.Add(new Item { Id = 2, Name = &#34;bbb&#34; }); items.Add(new Item { Id = 3, Name = &#34;ccc&#34; }); var JsonResult = Json(items, JsonRequestBehavior.AllowGet); return JsonResult; } [HttpPost] public JsonResult getAll(int Id) { List&lt;Report&gt; reportList = null; if (Id &gt; 0) { reportList = GetAllReports().Where(x =&gt; x.Id == Id).ToList(); } else { reportList = GetAllReports(); } var JsonResult = Json(reportList, JsonRequestBehavior.AllowGet); return JsonResult; } public List&lt;Report&gt; GetAllReports() { List&lt;Report&gt; reports = new List&lt;Report&gt;(); reports.Add(new Report { RId = 1, Id = 1, Item = &#34;Item1&#34; }); reports.Add(new Report { RId = 2, Id = 1, Item = &#34;Item2&#34; }); reports.Add(new Report { RId = 3, Id = 2, Item = &#34;Item3&#34; }); 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; } } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;style type=&#34;text/css&#34;&gt; .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%; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, [&#39;$scope&#39;, &#39;$http&#39;, &#39;$window&#39;, &#39;$timeout&#39;, function ($scope, $http, $window, $timeout) { $scope.ShowLoader = false; GetItems(); function GetItems() { $scope.Items = []; $http({ method: &#39;Get&#39;, url: &#39;/Home/GetReport/&#39; }).success(function (data, status, headers, config) { $scope.Items = data; $scope.Items.splice(0, 0, { Id: 0, Name: &#39;All&#39; }); }).error(function (data, status, headers, config) { $scope.message = &#39;Unexpected Error&#39;; }); } $scope.IsVisible = false; $scope.GetAllItems = function () { if ($scope.Item != undefined) { var Id1 = $scope.Item; //Show loader image. $scope.ShowLoader = true; $http({ method: &#39;POST&#39;, url: &#39;/Home/getAll/&#39;, params: { Id: Id1 } }).success(function (data, status, headers, config) { //Hide loader image &amp; process successful data. $scope.ShowLoader = false; if (data.length &gt; 0) { $scope.items = data; $scope.IsVisible = true; } else { $scope.items = []; $scope.IsVisible = false; } }).error(function (data, status, headers, config) { $scope.items = &#39;Unexpected Error&#39;; //Hide loader image. $scope.ShowLoader = false; }); } else { $scope.items = []; $scope.IsVisible = false; } } } ]); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div class=&#34;modalPopup&#34; align=&#34;center&#34; ng-show=&#34;ShowLoader&#34;&gt; &lt;br /&gt;&lt;br /&gt; Loading. Please wait.&lt;br /&gt;&lt;br /&gt; &lt;img src=&#34;../../Images/progress.gif&#34; alt=&#34;Loading. Please wait.&#34; /&gt; &lt;/div&gt; &lt;div class=&#34;form-horizontal&#34;&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label for=&#34;ID&#34; class=&#34;control-label col-xs-2&#34;&gt; Item&lt;/label&gt; &lt;div class=&#34;col-md-2&#34;&gt; &lt;select style=&#34;display: inline&#34; data-ng-model=&#34;Item&#34; class=&#34;form-control&#34; data-ng-options=&#34;p.Id as p.Name for p in Items&#34;&gt; &lt;option value=&#34;&#34;&gt;-- Select Item --&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;button class=&#34;btn btn-success btn-sm&#34; ng-model=&#34;IsVisible&#34; ng-click=&#34;GetAllItems()&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-ok&#34;&gt;&lt;/span&gt;Submit &lt;/button&gt; &lt;/div&gt; &lt;div class=&#34;container&#34; ng-show=&#34;IsVisible&#34; id=&#34;printarea&#34;&gt; &lt;table class=&#34;table table-bordered&#34;&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Item&lt;/th&gt; &lt;/tr&gt; &lt;tr ng-repeat=&#34;item in items&#34;&gt; &lt;td&gt;{{item.RId}}&lt;/td&gt; &lt;td&gt;{{item.Item}}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/HNRXzcI.gif" alt="" width="293" height="237" /></p>https://www.aspforums.net:443/Threads/124071/Display-Loading-Progress-Image-while-fetching-data-from-database-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/124071/Display-Loading-Progress-Image-while-fetching-data-from-database-using-AngularJS-in-ASPNet-MVC/Fri, 30 Aug 2019 07:15:31 GMT