Integrate the Dashboard Extension into a Project

Aug 01, 2019
5 minutes to read

The Dashboard extension provides the capability to create dashboards in ASP.NET MVC web applications. To learn how to create the ASP.NET MVC Designer application from scratch, see Create an ASP.NET MVC Designer.

This topic describes the specifics of integrating the Dashboard extension to the ASP.NET MVC web application.

Attach the JavaScript Files
Attach the Style Sheets
Add Route Definition
Add Extension Code
Add Controller Code
Example
Next Steps

Attach the JavaScript Files

The Dashboard extension requires you to attach the following JS scripts.

The jQuery, jQuery UI, globalize, knockout, and ace scripts. For automatic integration, include client-side libraries on a web page by adding the “resources” section to the application’s Web.config file:
- XML
```
<devExpress>
    
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>
```
Refer to Required Client Libraries for details.

The specific Dashboard JavaScript file. To attach the Dashboard JavaScript file, use the ExtensionsFactory.GetScripts method within the View page’s HEAD tag.

The following code snippet shows how to do this.

View code (“_Layout.cshtml“):

C#
VB.NET

<head>
    ...
    @Html.DevExpress().GetScripts( 
        // ...
        new Script { ExtensionSuite = ExtensionSuite.Dashboard },
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new Script { ExtensionSuite = ExtensionSuite.Editors }
    )
    ...
</head>

<head>
    ... 
    @Html.DevExpress().GetScripts( 
        ' ... 
        New Script With { .ExtensionSuite = ExtensionSuite.Dashboard }, 
        New Script With {.ExtensionSuite = ExtensionSuite.NavigationAndLayout}, 
        New Script With {.ExtensionSuite = ExtensionSuite.Editors}
    )
    ...
</head>

Attach the Style Sheets

Use the ExtensionsFactory.GetStyleSheets extension method within the View page’s HEAD tag to attach the required style sheets.

The code sample below demonstrates how to do this for the Dashboard extension.

View code (“_Layout.cshtml“):

C#
VB.NET

<head>
    ...
    @Html.DevExpress().GetStyleSheets( 
        // ...
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard },
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }
    )
    ...
</head>

<head>
    ...
    @Html.DevExpress().GetStyleSheets( 
        ' ...
        New StyleSheet With { .ExtensionSuite = ExtensionSuite.Dashboard },
        New StyleSheet With { .ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        New StyleSheet With { .ExtensionSuite = ExtensionSuite.Editors }
    )
    ...
</head>

Add Route Definition

Call the RouteCollectionExtension.MapDashboardRoute method to add the Dashboard’s route. The code snippet below shows how to add the required code to the RouteConfig.cs file.

C#
VB.NET

using DevExpress.DashboardWeb.Mvc;
// ...
public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
            routes.MapDashboardRoute("api/dashboard");
// ...
}

Imports DevExpress.DashboardWeb.Mvc
' ...
Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")
            routes.MapDashboardRoute("api/dashboard")
' ...
End Sub

Note

To learn how to adjust routing when a Web Dashboard is used in ASP.NET MVC Areas, see the T541859 KB article.

Add Extension Code

To use the Dashboard in ASP.NET MVC, utilize the DashboardExtension class. To add a Dashboard extension to a View, call the MvcDashboardFactory.Dashboard helper method. This method provides a parameter that returns the DashboardExtensionSettings. Use these settings to customize the Dashboard extension.

View code (Razor):

C#
VB.NET

@using DevExpress.DashboardWeb

@Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "Dashboard";
    // Specifies a working mode of the extension as 'Designer'.
    settings.WorkingMode = WorkingMode.Designer;
    // Specifies an identifier of the default dashboard loaded to the Web Dashboard.
    settings.InitialDashboardId = "dashboard1";
}).GetHtml()

@imports DevExpress.DashboardWeb

@Html.DevExpress().Dashboard(Sub(settings)
        settings.Name = "Dashboard"
        ' Specifies a working mode of the extension as 'Designer'.
        settings.WorkingMode = WorkingMode.Designer
        ' Specifies an identifier of the default dashboard loaded to the Web Dashboard.
        settings.InitialDashboardId = "dashboard1"
    End Sub).GetHtml()

Add Controller Code

The Dashboard extension does not require any specific code in a controller. Make sure that your project contains the standard HomeController class.

C#
VB.NET

// ...
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Namespace Controllers
    Public Class HomeController
        Inherits Controller
        Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

Example

This example shows how to create an ASP.NET MVC Dashboard Designer application with a set of default data connections.

Note

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

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )    
</head>

<body>
    @RenderBody()
</body>
</html>

using System.Web.Mvc;

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

<div id="#Dashboard" style="position: absolute; left: 0; right: 0; top:0; bottom:0;">
    @Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "Dashboard";
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

using System.Web.Routing;
using DevExpress.DashboardWeb;
using DevExpress.DashboardWeb.Mvc;

public class DashboardConfig
{
    public static void RegisterService(RouteCollection routes)
    {
        routes.MapDashboardRoute();
        DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage(@"~/App_Data/Dashboards"));
    }
}

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCxDashboard_SimpleDesigner
{
    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();
        }
    }
}

Imports System.Web.Mvc

Namespace MVCxDashboard_SimpleDesigner.Controllers
    Public Class HomeController
        Inherits Controller

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

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

Namespace MVCxDashboard_SimpleDesigner
    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()
        End Sub
    End Class
End Namespace

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )    
</head>

<body>
    @RenderBody()
</body>
</html>

Imports DevExpress.DashboardWeb
Imports DevExpress.DashboardWeb.Mvc
Imports System.Web.Routing

Public Class DashboardConfig
    Public Shared Sub RegisterService(ByVal routes As RouteCollection)
        routes.MapDashboardRoute()
        DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/Dashboards"))
    End Sub
End Class

<div id="#Dashboard" style="position: absolute; left: 0; right: 0; top:0; bottom:0;">
    @Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "Dashboard";
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

Next Steps

You can perform the following actions to prepare the control for first use:

Prepare a dashboard storage that keeps dashboards.
Provide a set of default data sources available for end-users.
Provide a set of predefined data connections.
Specify whether Web Dashboard acts as the Designer or Viewer.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Attach the JavaScript Files

Attach the Style Sheets

Add Route Definition

Add Extension Code

Add Controller Code

Example

Next Steps