Important
This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.
Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:
The DashboardViewer extension provides the capability to display dashboards in ASP.NET MVC web applications. To learn how to create an ASP.NET MVC Viewer application from scratch, see How to use the ASP.NET MVC DashboardViewer extension to display a dashboard.
This topic describes the specifics of integrating the DashboardViewer extension into an ASP.NET MVC web application.
Attach the Required JavaScript Files
The DashboardViewer extension requires you to attach the following JS scripts.
- The jQuery and globalize scripts. To learn more, see Web Viewer - Prerequisites.
A specific DashboardViewer Javascript file. To attach the DashboardViewer Javascript file, use the ExtensionsFactory.GetScripts method within the View page’s HEAD or BODY tag.
The following code snippet shows how to do this.
View code (“_Layout.cshtml“):
<head>
...
@Html.DevExpress().GetScripts(
// ...
new Script { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
...
</head>
<head>
...
@Html.DevExpress().GetScripts(
' ...
New Script With { .ExtensionSuite = ExtensionSuite.DashboardViewer }
)
...
</head>
Attach the Required Style Sheets
To attach the required style sheets, use the ExtensionsFactory.GetStyleSheets extension method within the View page’s HEAD (recommended) or BODY tag.
The code sample below demonstrates how to do this for the DashboardViewer extension.
View code (“_Layout.cshtml“):
<head>
...
@Html.DevExpress().GetStyleSheets(
// ...
new StyleSheet { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
...
</head>
<head>
...
@Html.DevExpress().GetStyleSheets(
' ...
New StyleSheet With { .ExtensionSuite = ExtensionSuite.DashboardViewer }
)
...
</head>
Add View and Extension Code
To use the DashboardViewer in ASP.NET MVC, use the DashboardViewerExtension class. To add the DashboardViewer extension to a view, call the MvcDashboardFactory.DashboardViewer helper method. This method provides a parameter that returns the DashboardViewerSettings. Use these settings to customize the DashboardViewer extension.
The following code demonstrates how to add the DashboardViewer to a view.
View code (“Index.cshtml“):
@Html.Action("DashboardViewerPartial")
@Html.Action("DashboardViewerPartial")
Partial view code (“_DashboardViewerPartial.cshtml“):
@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
settings.Name = "DashboardViewer";
settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
}).BindToSource(Model).GetHtml()
@ModelType DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(Sub(settings)
settings.Name = "DashboardViewer"
settings.CallbackRouteValues = New With {Key .Controller = "Home", Key .Action = "DashboardViewerPartial"}
settings.ExportRouteValues = New With {Key .Controller = "Home", Key .Action = "DashboardViewerPartialExport"}
End Sub).BindToSource(Model).GetHtml()
Add Controller Code
In the controller code, you need to specify the dashboard that will be displayed within the DashboardViewer extension using the DashboardSourceModel.DashboardSource property.
using DevExpress.Web.Mvc;
using DevExpress.DashboardWeb.Mvc;
// ...
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult DashboardViewerPartial() {
return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model);
}
public FileStreamResult DashboardViewerPartialExport() {
return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model);
}
}
class DashboardViewerSettings {
public static DashboardSourceModel Model {
get {
return DashboardSourceModel();
}
}
private static DashboardSourceModel DashboardSourceModel() {
DashboardSourceModel model = new DashboardSourceModel();
// Specifies the dashboard to be displayed within the Dashboard Viewer.
model.DashboardSource = typeof(Dashboard1);
return model;
}
}
Imports DevExpress.Web.Mvc
Imports DevExpress.DashboardWeb.Mvc
Public Class HomeController
Inherits System.Web.Mvc.Controller
Function Index() As ActionResult
Return View()
End Function
Public Function DashboardViewerPartial() As ActionResult
Return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model)
End Function
Public Function DashboardViewerPartialExport() As ActionResult
Return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model)
End Function
End Class
Class DashboardViewerSettings
Public Shared ReadOnly Property Model() As DashboardSourceModel
Get
Return DashboardSourceModel()
End Get
End Property
Private Shared Function DashboardSourceModel() As DashboardSourceModel
Dim model As New DashboardSourceModel()
' Specifies the dashboard to be displayed within the Dashboard Viewer.
model.DashboardSource = GetType(Dashboard1)
Return model
End Function
End Class
Example
The following example demonstrates how to load a dashboard to an MVC Dashboard Viewer at runtime.
@using(Html.BeginForm()) {
@Html.Action("DashboardViewerPartial")
}
@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
settings.Name = "DashboardViewer";
settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
settings.FullscreenMode = true;
}).BindToSource(Model).GetHtml()
Imports System.Web.Mvc
Imports DevExpress.DashboardWeb.Mvc
Imports DevExpress.DataAccess.ConnectionParameters
Imports System.IO
Namespace MVCLoadingDashboard.Controllers
Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
Return View()
End Function
<ValidateInput(False)> _
Public Function DashboardViewerPartial() As ActionResult
Return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model)
End Function
Public Function DashboardViewerPartialExport() As FileStreamResult
Return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model)
End Function
End Class
Friend Class DashboardViewerSettings
Public Shared ReadOnly Property Model() As DashboardSourceModel
Get
Dim model_Renamed As New DashboardSourceModel()
model_Renamed.DashboardId = "SalesDashboard"
model_Renamed.DashboardLoading = Sub(sender, e)
' Checks the identifier of the required dashboard.
If e.DashboardId = "SalesDashboard" Then
' Writes the dashboard XML definition from a file to a string.
Dim dashboardDefinition As String =
File.ReadAllText(System.Web.Hosting.HostingEnvironment.MapPath("~\App_Data\SalesDashboard.xml"))
' Specifies the dashboard XML definition.
e.DashboardXml = dashboardDefinition
End If
End Sub
model_Renamed.ConfigureDataConnection = Sub(sender, e)
If e.DataSourceName = "SQL Data Source 1" Then
' Gets connection parameters used to establish a connection to the database.
Dim parameters As Access97ConnectionParameters =
CType(e.ConnectionParameters, Access97ConnectionParameters)
Dim databasePath As String = System.Web.Hosting.HostingEnvironment.MapPath("~\App_Data\nwind.mdb")
' Specifies the path to a database file.
parameters.FileName = databasePath
End If
End Sub
Return model_Renamed
End Get
End Property
End Class
End Namespace
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
</head>
<body>
<div class="content">
@RenderBody()
</div>
</body>
</html>
@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
settings.Name = "DashboardViewer";
settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
settings.FullscreenMode = true;
}).BindToSource(Model).GetHtml()
using System.Web.Mvc;
using DevExpress.DashboardWeb.Mvc;
using DevExpress.DataAccess.ConnectionParameters;
using System.IO;
namespace MVCLoadingDashboard.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[ValidateInput(false)]
public ActionResult DashboardViewerPartial() {
return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model);
}
public FileStreamResult DashboardViewerPartialExport() {
return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model);
}
}
class DashboardViewerSettings {
public static DashboardSourceModel Model {
get {
DashboardSourceModel model = new DashboardSourceModel();
model.DashboardId = "SalesDashboard";
model.DashboardLoading = (sender, e) => {
// Checks the identifier of the required dashboard.
if (e.DashboardId == "SalesDashboard") {
// Writes the dashboard XML definition from a file to a string.
string dashboardDefinition = File.ReadAllText(System.Web.Hosting.
HostingEnvironment.MapPath(@"~\App_Data\SalesDashboard.xml"));
// Specifies the dashboard XML definition.
e.DashboardXml = dashboardDefinition;
}
};
model.ConfigureDataConnection = (sender, e) => {
if (e.DataSourceName == "SQL Data Source 1") {
// Gets connection parameters used to establish a connection to the database.
Access97ConnectionParameters parameters =
(Access97ConnectionParameters)e.ConnectionParameters;
string databasePath = System.Web.Hosting.
HostingEnvironment.MapPath(@"~\App_Data\nwind.mdb");
// Specifies the path to a database file.
parameters.FileName = databasePath;
}
};
return model;
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.DashboardViewer }
)
</head>
<body>
<div class="content">
@RenderBody()
</div>
</body>
</html>
@using(Html.BeginForm()) {
@Html.Action("DashboardViewerPartial")
}