diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/AbpViewComponentHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/AbpViewComponentHelper.cs
index 7f9d6fb28a..8d0dede237 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/AbpViewComponentHelper.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/AbpViewComponentHelper.cs
@@ -79,7 +79,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
}
PageWidgetManager.TryAdd(widget);
- return await DefaultViewComponentHelper.InvokeAsync(widget.ViewComponentType, arguments);
+
+ return new HtmlContentBuilder()
+ .AppendHtml($"")
+ .AppendHtml(await DefaultViewComponentHelper.InvokeAsync(widget.ViewComponentType, arguments))
+ .AppendHtml("
");
}
}
}
\ No newline at end of file
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml
index 712182f79f..4e46c98b59 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml
@@ -1,20 +1,18 @@
-
-
-
- User Statistics
-
-
-
-
-
-
+
+
+ User Statistics
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js
index e026e621dd..5dccaf7560 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js
@@ -1,29 +1,35 @@
-(function () {
- var serviceMethod = dashboardDemo.dashboard.getNewUserStatisticWidget;
-
- function ChartManager($wrapper) {
+abp.widgets = abp.widgets || {}; //TODO: Remove later
+(function () {
+ abp.widgets.NewUserStatisticWidget = function ($wrapper) {
var _latestFilters;
var _chart;
- var getFrequencyVal = function () {
- return $wrapper.find('.frequency-filter option:selected').val();
+ var refresh = function (filters) {
+ _latestFilters = filters || _latestFilters;
+ dashboardDemo.dashboard.getNewUserStatisticWidget({
+ startDate: _latestFilters.startDate,
+ endDate: _latestFilters.endDate,
+ frequency: $wrapper.find('.frequency-filter option:selected').val()
+ }).then(function(result) {
+ _chart.data = {
+ labels: Object.keys(result.data),
+ datasets: [
+ {
+ label: 'User count',
+ data: Object.values(result.data),
+ backgroundColor: 'rgba(255, 132, 132, 1)'
+ }
+ ]
+ };
+ _chart.update();
+ });
};
- var createChart = function (statistic) {
+ var init = function (filters) {
_chart = new Chart($wrapper.find('.NewUserStatisticChart'),
{
type: 'bar',
- data: {
- labels: Object.keys(statistic.data),
- datasets: [
- {
- label: 'User count',
- data: Object.values(statistic.data),
- backgroundColor: 'rgba(255, 132, 132, 1)'
- }
- ]
- },
options: {
scales: {
yAxes: [{
@@ -34,73 +40,19 @@
}
}
});
- };
- var refreshChart = function (statistic) {
- _chart.data = {
- labels: Object.keys(statistic.data),
- datasets: [
- {
- label: 'User count',
- data: Object.values(statistic.data),
- backgroundColor: 'rgba(255, 132, 132, 1)'
- }
- ]
- };
- _chart.update();
- };
+ refresh(filters);
- var render = function (args, callback) {
- serviceMethod({
- startDate: _latestFilters.startDate,
- endDate: _latestFilters.endDate,
- frequency: getFrequencyVal()
- })
- .then(function (result) {
- callback(result);
+ $wrapper
+ .find('.frequency-filter')
+ .on('change', function () {
+ refresh();
});
};
- var init = function (filters) {
- _latestFilters = filters;
- render(filters, createChart);
- };
-
- var refresh = function (filters) {
- _latestFilters = filters;
- render(filters, refreshChart);
- };
-
- $wrapper.find('.frequency-filter').on('change',
- function () {
- refresh(_latestFilters);
- });
-
return {
init: init,
refresh: refresh
};
}
-
- abp.event.on('init-widgets', function (args) {
- args.container
- .find('.newUserStatistic-widget')
- .each(function () {
- var $this = $(this);
- var chartManager = new ChartManager($this);
- chartManager.init(args.filters);
- $this.data('chart-manager', chartManager);
- });
-
- });
-
- abp.event.on('refresh-widgets', function (args) {
- args.container
- .find('.newUserStatistic-widget')
- .each(function () {
- var $this = $(this);
- var chartManager = $this.data('chart-manager');
- chartManager.refresh(args.filters);
- });
- });
})();
\ No newline at end of file
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js
index 0b2fff4c81..9c591df854 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js
@@ -1,26 +1,73 @@
-(function () {
-
- function triggerWidgets(eventName) {
- abp.event.trigger(
- eventName,
- {
- container: $('#MyDashboardWidgetsArea'),
- filters: {
- startDate: $('#StartDate').val(),
- endDate: $('#EndDate').val()
- }
+abp.widgets = abp.widgets || {}; //TODO: Remove later
+(function () {
+
+ abp.DashboardManager = function (opts) {
+
+ if (typeof opts === 'string') {
+ opts = {
+ wrapper: opts
+ };
+ }
+
+ var $dashboardWrapper;
+ if (typeof opts.wrapper === 'string') {
+ $dashboardWrapper = $(opts.wrapper);
+ } else {
+ $dashboardWrapper = opts.wrapper;
+ }
+
+ var getFilters = function() {
+ if (!opts.filterCallback) {
+ return {};
}
- );
- }
- $(function () {
+ return opts.filterCallback();
+ }
+
+ 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);
+ }
+ });
+ };
+
+ 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());
+ }
+ });
+ }
+
+ return {
+ init: init,
+ refresh: refresh
+ };
+ };
- $('#MyDashboardFilterForm').submit(function(e) {
- e.preventDefault();
+ var filterForm = $('#MyDashboardFilterForm');
+
+ var myDashboard = new abp.DashboardManager({
+ wrapper: '#MyDashboardWidgetsArea',
+ filterCallback: function() {
+ return filterForm.serializeFormToObject();
+ }
+ });
- triggerWidgets('refresh-widgets');
- });
+ myDashboard.init();
- triggerWidgets('init-widgets');
+ filterForm.submit(function(e) {
+ e.preventDefault();
+ myDashboard.refresh();
});
})();
\ No newline at end of file