The requested page is not available for the requested platform. You are viewing the content for Default platform.

Integration of the DashboardViewer Extension into the Project

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>
    

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>

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")

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()

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;
        }
    }

Example

The following example demonstrates how to load a dashboard to an MVC Dashboard Viewer at runtime.


@using(Html.BeginForm()) {
    @Html.Action("DashboardViewerPartial")
}