DevExpress.Web.Mvc5.Dashboard 26.1.6

DevExpress BI Dashboard for ASP.NET MVC 5

DevExpress BI Dashboard is a royalty-free data visualization and analysis product that allows developers and users to create and modify interactive, data-driven dashboards. The package is mostly equivalent to DevExpress.Web.Mvc.Dashboard, except it targets the ASP.NET MVC 5 framework specifically.

Key Features

• More than 15 data visualization widgets, including charts, grids, pivot tables, cards, gauges, maps, treemaps, range filters, filter elements, and layout containers
• Designer and Viewer modes — Switch between the full editing UI and read-only display
• Dashboard storage — Use the file system or implement a custom provider, such as a database, to save and load dashboards
• Server-Side API — customization events and data pipeline hooks via DashboardConfigurator
• Client-Side API — Customize the embedded dashboard control with JavaScript
• Support for popular data source types — SQL, JSON, OLAP, Excel, Object, and more
• Data shaping — Sort, filter, and group data as your needs dictate
• Built-in data analytics capabilities, including calculated fields, aggregates, window functions, dashboard parameters, and more

Examples

Example 1: Integrate the Web Dashboard into an ASP.NET MVC 5 Application

1. Reference the DevExpress Dashboard assemblies in your project. Use the DevExpress Project Wizard — on the Suite tab, enable the Dashboard suite and click Update Project — or add the assemblies manually. For details, see Integrate the Dashboard Extension into a Project.

2. Add a DefaultDashboard controller (in the project's Controllers folder) that derives from DashboardController:

   using DevExpress.DashboardWeb.Mvc;
   
   public class DefaultDashboardController : DashboardController {
   }
   

3. Create the App_Data/Dashboards folder, then register the dashboard route and storage in the DashboardConfig class (typically in the App_Start folder):

   using System.Web.Routing;
   using DevExpress.DashboardWeb;
   using DevExpress.DashboardWeb.Mvc;
   
   public class DashboardConfig {
       public static void RegisterService(RouteCollection routes) {
           routes.MapDashboardRoute("api/dashboard", "DefaultDashboard");
           DashboardConfigurator.Default.SetDashboardStorage(
               new DashboardFileStorage(@"~/App_Data/Dashboards"));
       }
   }
   

4. Register the client-side resources — add the following resources section to the <devExpress> section of Web.config to attach the third-party (jQuery, knockout, Ace) and DevExtreme scripts. The DevExpress Project Wizard's Dashboard suite adds this section, along with the Dashboard extension's own scripts and styles, automatically:

   <devExpress>
       <resources>
           <add type="ThirdParty" />
           <add type="DevExtreme" />
       </resources>
   </devExpress>
   

5. Add the Dashboard extension to a Razor view:

   @using DevExpress.DashboardWeb
   @using DevExpress.DashboardWeb.Mvc
   
   @Html.DevExpress().Dashboard(settings => {
       settings.Name = "Dashboard";
       settings.ControllerName = "DefaultDashboard";
       settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
       settings.Height = System.Web.UI.WebControls.Unit.Pixel(800);
       settings.WorkingMode = WorkingMode.Designer;
   }).GetHtml()
   

The WorkingMode property switches the control between Designer (full editing UI), Viewer, and ViewerOnly (read-only) modes.

For step-by-step instructions, refer to the following help topic: Create an ASP.NET MVC Dashboard Application.

Example 2: Customize the Control with the Client-Side API

Handle the BeforeRender client-side event to access the DashboardControl instance. The following code registers the Dashboard Panel extension, which displays a list of available dashboards, and disables export functionality:

<script type="text/javascript">
    function onBeforeRender(sender) {
        var dashboardControl = sender.GetDashboardControl();
        // Display the Dashboard Panel with a list of available dashboards.
        dashboardControl.registerExtension(
            new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
        // Remove the export functionality.
        dashboardControl.unregisterExtension("dashboardExport");
    }
</script>

@Html.DevExpress().Dashboard(settings => {
    settings.Name = "Dashboard";
    settings.ControllerName = "DefaultDashboard";
    settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()

For more information on the client-side API and available extensions, refer to the following help topics:

• Client-Side API Overview for ASP.NET MVC Dashboard
• Manage Extensions in ASP.NET MVC

Demos

• DevExpress ASP.NET MVC Dashboard Demo
• DevExpress BI Dashboard GitHub Demos

Evaluation Period, Pricing Options, and Licensing Terms

Whether you own a license or want to start a 30-day evaluation, download and register your DevExpress license key. To obtain your key, sign in to the DevExpress Download Manager with an existing DevExpress.com account or create a free account. For key registration instructions, see License Key for DevExpress Products.

If you purchase a license after evaluating a product, re-register your updated DevExpress license key to remove evaluation warnings and messages.

This package is included in the following commercial subscriptions:

• DevExpress Universal Subscription

See DevExpress Subscriptions & Licensing for subscription comparison tables, purchasing FAQ, and licensing information.

Documentation

• ASP.NET MVC Dashboard Extension
• Integrate the Dashboard Extension into a Project
• Create Dashboards on the Web
• End-User Documentation for DevExpress BI Dashboard

Software Bill of Materials (SBOM)

To access SBOM files for DevExpress packages, please refer to the following article: Software Bill of Materials (SBOM) for DevExpress .NET assemblies/NuGet packages, JavaScript, VCL and other redistributable artifacts.

See Also: Information Security | Security - What You Need to Know

Useful Online Resources

• www.devexpress.com
• DevExpress Support Center
• DevExpress Blogs