Refresh the counters widget by AJAX

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs

@@ -0,0 +1,11 @@
+using System;
+
+namespace DashboardDemo
+{
+    public class CountersWidgetInputDto
+    {
+        public DateTime StartDate { get; set; }
+
+        public DateTime EndDate { get; set; }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetResultDto.cs

@@ -0,0 +1,10 @@
+namespace DashboardDemo
+{
+    public class CountersWidgetResultDto
+    {
+        public int NewUsers { get; set; }
+        public int ActiveUsers { get; set; }
+        public double TotalIncome { get; set; }
+        public double TotalProfit { get; set; }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs

@@ -1,7 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Text;
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Volo.Abp.Application.Services;
 
 namespace DashboardDemo
@@ -10,19 +7,4 @@ namespace DashboardDemo
     {
         Task<CountersWidgetResultDto> GetCountersWidgetAsync(CountersWidgetInputDto input);
     }
-
-    public class CountersWidgetInputDto
-    {
-        public DateTime StartDate { get; set; }
-
-        public DateTime EndDate { get; set; }
-    }
-
-    public class CountersWidgetResultDto
-    {
-        public int NewUsers { get; set; }
-        public int ActiveUsers { get; set; }
-        public double TotalIncome { get; set; }
-        public double TotalProfit { get; set; }
-    }
 }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewComponent.cs

@@ -7,7 +7,8 @@ using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 namespace DashboardDemo.Web.Pages.Components.CountersWidget
 {
     [Widget(
-        StyleFiles = new[] { "/Pages/Components/CountersWidget/Default.css" }
+        StyleFiles = new[] { "/Pages/Components/CountersWidget/Default.css" },
+        ScriptFiles = new[] { "/Pages/Components/CountersWidget/Default.js" }
         )]
     public class CountersWidgetViewComponent : AbpViewComponent
     {

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.cshtml

@@ -3,25 +3,25 @@
     <abp-row>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.NewUsers</div>
+                <div class="counters-widget-count"><span class="new-user-count">@Model.NewUsers</span></div>
                 <div class="counters-widget-count-name">New Users</div>
             </div>
         </abp-column>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.ActiveUsers</div>
+                <div class="counters-widget-count"><span class="active-user-count">@Model.ActiveUsers</span></div>
                 <div class="counters-widget-count-name">Active Users</div>
             </div>
         </abp-column>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.TotalIncome.ToString("C")</div>
+                <div class="counters-widget-count"><span class="total-income">$@Model.TotalIncome.ToString("0.00")</span></div>
                 <div class="counters-widget-count-name">Total Income</div>
             </div>
         </abp-column>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.TotalProfit.ToString("C")</div>
+                <div class="counters-widget-count"><span class="total-profit">$@Model.TotalProfit.ToString("0.00")</span></div>
                 <div class="counters-widget-count-name">Total Profit</div>
             </div>
         </abp-column>

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.js

@@ -0,0 +1,25 @@
+(function() {
+
+    function refresh(args) {
+        var mainContainer = args.container;
+        var globalFilters = args.filters;
+
+        mainContainer
+            .find('.counters-widget')
+            .each(function () {
+                var $this = $(this);
+                dashboardDemo.dashboard
+                    .getCountersWidget({
+                        startDate: globalFilters.startDate,
+                        endDate: globalFilters.endDate
+                    }).then(function (result) {
+                        $this.find('.new-user-count').text(result.newUsers);
+                        $this.find('.active-user-count').text(result.activeUsers);
+                        $this.find('.total-income').text('$' + result.totalIncome.toFixed(2));
+                        $this.find('.total-profit').text('$' + result.totalProfit.toFixed(2));
+                    });
+            });
+    }
+
+    abp.event.on('refresh-widgets', refresh);
+})();

samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml

@@ -1,6 +1,10 @@
 @page
 @model DashboardDemo.Web.Pages.MyDashboardModel
 
+@section scripts {
+    <abp-script src="/Pages/MyDashboard.js" />
+}
+
 @section styles {
     <abp-style src="/Pages/MyDashboard.css" />
 }
@@ -19,8 +23,12 @@
     </abp-row>
 </form>
 
-@await Component.InvokeAsync("CountersWidget", new
-{
-    startDate = @Model.StartDate,
-    endDate = @Model.EndDate
-})
+<div id="MyDashboardWidgetsArea">
+
+    @await Component.InvokeAsync("CountersWidget", new
+    {
+        startDate = @Model.StartDate,
+        endDate = @Model.EndDate
+    })
+
+</div>

samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js

@@ -0,0 +1,26 @@
+(function () {
+
+    function triggerWidgets(eventName) {
+        abp.event.trigger(
+            eventName,
+            {
+                container: $('#MyDashboardWidgetsArea'),
+                filters: {
+                    startDate: $('#StartDate').val(),
+                    endDate: $('#EndDate').val()
+                }
+            }
+        );
+    }
+
+    $(function () {
+
+        $('#MyDashboardFilterForm').submit(function(e) {
+            e.preventDefault();
+
+            triggerWidgets('refresh-widgets');
+        });
+
+        triggerWidgets('init-widgets');
+    });
+})();