How to: Create an ASP.NET MVC Dashboard Designer Application with Predefined Data Sources

• Oct 15, 2019
• 5 minutes to read

This example shows how to create an ASP.NET MVC Dashboard Designer application and provide data for dashboards.

The project contains a simple dashboard and two available data sources: the XML and OLAP data sources. You can use these data sources to create a new dashboard. To learn how to create an MVC Designer application from scratch, see the following topic: Create an ASP.NET MVC Designer.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-aspnet-mvc-dashboard-designer-application-with-predefined-data-sources-t393595.

FilterConfig.cs

using System.Web;
using System.Web.Mvc;

namespace MVCxDashboard_PredefinedDataSources {
    public class FilterConfig {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters) {
            filters.Add(new HandleErrorAttribute());
        }
    }
}

RouteConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCxDashboard_PredefinedDataSources {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");

            routes.MapRoute(
                name: "Default", // Route name
                url: "{controller}/{action}/{id}", // URL with parameters
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );
        }
    }
}

DashboardConfig.cs

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DashboardWeb.Mvc;
using DevExpress.DataAccess.ConnectionParameters;
using DevExpress.DataAccess.Sql;
using System.Web.Hosting;
using System.Web.Routing;

namespace MVCxDashboard_PredefinedDataSources {
    public static class DashboardConfig {
        public static void RegisterService(RouteCollection routes) {
            routes.MapDashboardRoute("dashboardControl");

            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            DashboardConfigurator.Default.SetDashboardStorage(dashboardFileStorage);

            DashboardSqlDataSource xmlDataSource = new DashboardSqlDataSource("XML Data Source", "xmlConnection");
            SelectQuery countriesQuery = SelectQueryFluentBuilder
                .AddTable("Countries")
                .SelectColumns("Country", "Latitude", "Longitude", "Year", "EnergyType", "Production", "Import")
                .Build("Countries");
            xmlDataSource.Queries.Add(countriesQuery);

            DashboardOlapDataSource olapDataSource = new DashboardOlapDataSource("OLAP Data Source", "olapConnection");

            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
            dataSourceStorage.RegisterDataSource("xmlDataSource1", xmlDataSource.SaveToXml());
            dataSourceStorage.RegisterDataSource("olapDataSource1", olapDataSource.SaveToXml());
            DashboardConfigurator.Default.SetDataSourceStorage(dataSourceStorage);

            DashboardConfigurator.Default.ConfigureDataConnection += Default_ConfigureDataConnection;
        }

        private static void Default_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "xmlConnection") {
                string databasePath = HostingEnvironment.MapPath("~/App_Data/DashboardEnergyStatictics.xml");
                e.ConnectionParameters = new XmlFileConnectionParameters(databasePath);
            }
        }
    }
}

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCxDashboard_PredefinedDataSources.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            return View();
        }
    }
}

Index.cshtml (C#)

<div id="#Button1 " style="position: absolute; left: 80px; right: 0; top:0; bottom:40px;">
    @Html.DevExpress().Button(settings => {
    settings.Name = "SwitchWorkingModesButton";
    settings.Text = "Switch to Viewer";
    settings.UseSubmitBehavior = true;
    settings.ClientSideEvents.Click = "function(s, e) { switchWorkingModes(s, e); }";
}).GetHtml()
</div>
<div id="#Dashboard" style="position: absolute; left: 0; right: 0; top:40px; bottom:0;">
    @Html.DevExpress().Dashboard(settings => {
    settings.Name = "Dashboard";
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

<script>
    function switchWorkingModes(s, e) {
        var workingMode = Dashboard.GetWorkingMode();
        if (workingMode == 'designer') {
            Dashboard.SwitchToViewer();
            SwitchWorkingModesButton.SetText('Switch to Designer');
        }
        else {
            Dashboard.SwitchToDesigner();
            SwitchWorkingModesButton.SetText('Switch to Viewer');
        }
    }
</script>

Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCxDashboard_PredefinedDataSources {
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication {
        protected void Application_Start() {
            DashboardConfig.RegisterService(RouteTable.Routes);
            AreaRegistration.RegisterAllAreas();

            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

            ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();

            DevExpress.Web.ASPxWebControl.CallbackError += Application_Error;
        }

        protected void Application_Error(object sender, EventArgs e) {
            Exception exception = System.Web.HttpContext.Current.Server.GetLastError();
            //TODO: Handle Exception
        }
    }
}

HomeController.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.Mvc

Namespace MVCxDashboard_PredefinedDataSources.Controllers
    Public Class HomeController
        Inherits Controller

        Public Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

FilterConfig.vb

Imports System.Web
Imports System.Web.Mvc

Namespace MVCxDashboard_PredefinedDataSources
    Public Class FilterConfig
        Public Shared Sub RegisterGlobalFilters(ByVal filters As GlobalFilterCollection)
            filters.Add(New HandleErrorAttribute())
        End Sub
    End Class
End Namespace

DashboardConfig.vb

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters
Imports DevExpress.DataAccess.Sql
Imports System.Web.Hosting
Imports System.Web.Routing
Imports DevExpress.DashboardWeb.Mvc

Namespace MVCxDashboard_PredefinedDataSources
    Public NotInheritable Class DashboardConfig

        Private Sub New()
        End Sub

        Public Shared Sub RegisterService(ByVal routes As RouteCollection)
            routes.MapDashboardRoute("dashboardControl")

            Dim dashboardFileStorage As New DashboardFileStorage("~/App_Data/Dashboards")
            DashboardConfigurator.Default.SetDashboardStorage(dashboardFileStorage)

            Dim xmlDataSource As New DashboardSqlDataSource("XML Data Source", "xmlConnection")
            Dim countriesQuery As SelectQuery = SelectQueryFluentBuilder.AddTable("Countries").SelectColumns("Country", "Latitude", "Longitude", "Year", "EnergyType", "Production", "Import").Build("Countries")
            xmlDataSource.Queries.Add(countriesQuery)

            Dim olapDataSource As New DashboardOlapDataSource("OLAP Data Source", "olapConnection")

            Dim dataSourceStorage As New DataSourceInMemoryStorage()
            dataSourceStorage.RegisterDataSource("xmlDataSource1", xmlDataSource.SaveToXml())
            dataSourceStorage.RegisterDataSource("olapDataSource1", olapDataSource.SaveToXml())
            DashboardConfigurator.Default.SetDataSourceStorage(dataSourceStorage)

            AddHandler DashboardConfigurator.Default.ConfigureDataConnection, AddressOf Default_ConfigureDataConnection
        End Sub

        Private Shared Sub Default_ConfigureDataConnection(ByVal sender As Object, ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.ConnectionName = "xmlConnection" Then
                Dim databasePath As String = HostingEnvironment.MapPath("~/App_Data/DashboardEnergyStatictics.xml")
                e.ConnectionParameters = New XmlFileConnectionParameters(databasePath)
            End If
        End Sub
    End Class
End Namespace

Global.asax.vb

Imports System.Web.Http
Imports System.Web.Mvc
Imports System.Web.Routing

Namespace MVCxDashboard_PredefinedDataSources
    ' Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    ' visit http://go.microsoft.com/?LinkId=9394801

    Public Class MvcApplication
        Inherits System.Web.HttpApplication

        Protected Sub Application_Start()
            DashboardConfig.RegisterService(RouteTable.Routes)
            AreaRegistration.RegisterAllAreas()

            GlobalConfiguration.Configure(AddressOf WebApiConfig.Register)
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
            RouteConfig.RegisterRoutes(RouteTable.Routes)

            ModelBinders.Binders.DefaultBinder = New DevExpress.Web.Mvc.DevExpressEditorsBinder()

            AddHandler DevExpress.Web.ASPxWebControl.CallbackError, AddressOf Application_Error
        End Sub

        Protected Sub Application_Error(ByVal sender As Object, ByVal e As EventArgs)
            Dim exception As Exception = System.Web.HttpContext.Current.Server.GetLastError()
            'TODO: Handle Exception
        End Sub
    End Class
End Namespace

RouteConfig.vb

Imports System.Web.Mvc
Imports System.Web.Routing

Namespace MVCxDashboard_PredefinedDataSources
    Public Class RouteConfig
        Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")

            routes.MapRoute(name:="Default", url:="{controller}/{action}/{id}", defaults:=New With {
                Key .controller = "Home",
                Key .action = "Index",
                Key .id = UrlParameter.Optional
            })
        End Sub
    End Class
End Namespace

Index.cshtml (VB.NET)

<div id="#Button1 " style="position: absolute; left: 80px; right: 0; top:0; bottom:40px;">
    @Html.DevExpress().Button(settings => {
    settings.Name = "SwitchWorkingModesButton";
    settings.Text = "Switch to Viewer";
    settings.UseSubmitBehavior = true;
    settings.ClientSideEvents.Click = "function(s, e) { switchWorkingModes(s, e); }";
}).GetHtml()
</div>
<div id="#Dashboard" style="position: absolute; left: 0; right: 0; top:40px; bottom:0;">
    @Html.DevExpress().Dashboard(settings => {
    settings.Name = "Dashboard";
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

<script>
    function switchWorkingModes(s, e) {
        var workingMode = Dashboard.GetWorkingMode();
        if (workingMode == 'designer') {
            Dashboard.SwitchToViewer();
            SwitchWorkingModesButton.SetText('Switch to Designer');
        }
        else {
            Dashboard.SwitchToDesigner();
            SwitchWorkingModesButton.SetText('Switch to Viewer');
        }
    }
</script>