Add RefreshUrl for Widgets

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/AbpViewComponentHelper.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Linq;
+using System.Text;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Html;
@@ -80,8 +81,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
 
             PageWidgetManager.TryAdd(widget);
 
+            var wrapperAttributesBuilder = new StringBuilder($"class=\"abp-widget-wrapper\" data-widget-name=\"{widget.Name}\"");
+
+            if (widget.RefreshUrl != null)
+            {
+                wrapperAttributesBuilder.Append($" data-refresh-url=\"{widget.RefreshUrl}\"");
+            }
+
             return new HtmlContentBuilder()
-                .AppendHtml($"<div class=\"abp-widget-wrapper\" data-widget-name=\"{widget.Name}\">")
+                .AppendHtml($"<div {wrapperAttributesBuilder}>")
                 .AppendHtml(await DefaultViewComponentHelper.InvokeAsync(widget.ViewComponentType, arguments))
                 .AppendHtml("</div>");
         }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/WidgetAttribute.cs

@@ -35,6 +35,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
 
         public int? DefaultHeight { get; set; }
 
+        public string RefreshUrl { get; set; }
+
         public static bool IsWidget(Type type)
         {
             return type.IsSubclassOf(typeof(ViewComponent)) &&

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/WidgetDefinition.cs

@@ -50,6 +50,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
         [CanBeNull]
         public WidgetDimensions DefaultDimensions { get; set; }
 
+        [CanBeNull]
+        public string RefreshUrl { get; set; }
+
         public WidgetDefinition(
             [NotNull] Type viewComponentType,
             [CanBeNull] ILocalizableString displayName = null)
@@ -63,6 +66,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
             RequiresAuthentication = WidgetAttribute.RequiresAuthentication;
             Styles = GetStyles(WidgetAttribute);
             Scripts = GetScripts(WidgetAttribute);
+            RefreshUrl = WidgetAttribute.RefreshUrl;
             
             if (WidgetAttribute.DefaultWidth.HasValue && WidgetAttribute.DefaultHeight.HasValue)
             {
@@ -191,6 +195,12 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
             return WithResources(Scripts, bundleContributorTypes);
         }
 
+        public WidgetDefinition WithRefreshUrl(string refreshUrl)
+        {
+            RefreshUrl = refreshUrl;
+            return this;
+        }
+
         private WidgetDefinition WithResources(List<WidgetResourceItem> resourceItems, Type[] bundleContributorTypes)
         {
             if (bundleContributorTypes.IsNullOrEmpty())

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

@@ -22,32 +22,59 @@
             }
 
             return opts.filterCallback();
-        }
+        };
+
+        var initWidget = function($widgetWrapperDiv) {
+            var widgetName = $widgetWrapperDiv.attr('data-widget-name');
+            var widgetApiClass = abp.widgets[widgetName];
+            if (widgetApiClass) {
+                var widgetApi = new widgetApiClass($widgetWrapperDiv);
+                if (widgetApi.init) {
+                    widgetApi.init(getFilters());
+                }
+
+                $widgetWrapperDiv.data('abp-widget-api', widgetApi);
+            }
+        };
         
         var init = function () {
             $dashboardWrapper.find('.abp-widget-wrapper').each(function () {
-                var $widgetWrapperDiv = $(this);
-                var widgetName = $widgetWrapperDiv.attr('data-widget-name');
-                var widgetApiClass = abp.widgets[widgetName];
-                if (widgetApiClass) {
-                    var widgetApi = new widgetApiClass($widgetWrapperDiv);
-                    if (widgetApi.init) {
-                        widgetApi.init(getFilters());
-                    }
-                    $widgetWrapperDiv.data('abp-widget-api', widgetApi);
-                }
+                initWidget($(this));
             });
         };
 
+        var callRefreshWidgetApi = function ($widgetWrapperDiv) {
+            var widgetApi = $widgetWrapperDiv.data('abp-widget-api');
+            if (widgetApi && widgetApi.refresh) {
+                widgetApi.refresh(getFilters());
+            }
+        }
+
+        var refreshWidget = function ($widgetWrapperDiv) {
+            var refreshUrl = $widgetWrapperDiv.attr('data-refresh-url');
+            if (refreshUrl) {
+                abp.ajax({
+                    url: refreshUrl,
+                    type: 'GET',
+                    dataType: 'html',
+                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
+                    data: getFilters()
+                }).then(function(result) {
+                    var $newWidgetWrapperDiv = $(result);
+                    $widgetWrapperDiv.replaceWith($newWidgetWrapperDiv);
+                    $widgetWrapperDiv = $newWidgetWrapperDiv;
+                    initWidget($widgetWrapperDiv);
+                });
+            } else {
+                callRefreshWidgetApi($widgetWrapperDiv);
+            }
+        };
+
         var refresh = function() {
-            $dashboardWrapper.find('.abp-widget-wrapper').each(function () {
-                var $widgetWrapperDiv = $(this);
-                var widgetApi = $widgetWrapperDiv.data('abp-widget-api');
-                if (widgetApi && widgetApi.refresh) {
-                    widgetApi.refresh(getFilters());
-                }
+            $dashboardWrapper.find('.abp-widget-wrapper').each(function() {
+                refreshWidget($(this));
             });
-        }
+        };
         
         return {
             init: init,

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Shared/Components/CountersWidget/CountersWidgetController.cs

@@ -0,0 +1,17 @@
+using System;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+
+namespace DashboardDemo.Web.Pages.Shared.Components.CountersWidget
+{
+    [Route("Widgets")]
+    public class CountersWidgetController : AbpController
+    {
+        [HttpGet]
+        [Route("Counters")]
+        public IActionResult Counters(DateTime startDate, DateTime endDate)
+        {
+            return ViewComponent("CountersWidget", new {startDate, endDate});
+        }
+    }
+}

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

@@ -8,7 +8,7 @@ namespace DashboardDemo.Web.Pages.Shared.Components.CountersWidget
 {
     [Widget(
         StyleFiles = new[] { "/Pages/Shared/Components/CountersWidget/Default.css" },
-        ScriptFiles = new[] { "/Pages/Shared/Components/CountersWidget/Default.js" }
+        RefreshUrl = "Widgets/Counters"
         )]
     public class CountersWidgetViewComponent : AbpViewComponent
     {

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Shared/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"><span class="new-user-count">@Model.NewUsers</span></div>
+                <div class="counters-widget-count">@Model.NewUsers</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"><span class="active-user-count">@Model.ActiveUsers</span></div>
+                <div class="counters-widget-count">@Model.ActiveUsers</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"><span class="total-income">$@Model.TotalIncome.ToString("0.00")</span></div>
+                <div class="counters-widget-count">@Model.TotalIncome.ToString("c")</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"><span class="total-profit">$@Model.TotalProfit.ToString("0.00")</span></div>
+                <div class="counters-widget-count">@Model.TotalProfit.ToString("c")</div>
                 <div class="counters-widget-count-name">Total Profit</div>
             </div>
         </abp-column>

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

@@ -1,26 +0,0 @@
-abp.widgets = abp.widgets || {}; //TODO: Remove later
-(function () {
-    abp.widgets.CountersWidget = function ($wrapper) {
-
-        var refresh = function (filters) {
-            dashboardDemo.dashboard.getCountersWidget({
-                startDate: filters.startDate,
-                endDate: filters.endDate
-            }).then(function (result) {
-                $wrapper.find('.new-user-count').text(result.newUsers);
-                $wrapper.find('.active-user-count').text(result.activeUsers);
-                $wrapper.find('.total-income').text('$' + result.totalIncome.toFixed(2));
-                $wrapper.find('.total-profit').text('$' + result.totalProfit.toFixed(2));
-            });
-        };
-
-        var init = function (filters) {
-            // there is no initial process for this widget.
-        };
-
-        return {
-            init: init,
-            refresh: refresh
-        };
-    };
-})();