Integrate the Dashboard Extension into a Project

  • 6 minutes to read

This topic describes how to integrate the Dashboard extension into the existing ASP.NET MVC web application.

Reference the Assemblies

An ASP.NET MVC application need specific assemblies to utilize the DevExpress Dashboard functionality. You can add them as follows:

  • Use the Project Wizard to simplify the integration of DevExpress ASP.NET MVC extensions into your project. On the Wizard's Suite tab, select the Dashboard suite and click Update Project to reference assemblies.

  • Refer to Manual Integration into an Existing Project for instructions on how to manually incorporate DevExpress MVC Extensions into ASP.NET MVC applications. Review the ASP.NET MVC Deployment topic for a list of assemblies required for DevExpress Dashboard.

Attach the JavaScript Files

The Dashboard extension requires you to attach the following 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:

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

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

Attach the Style Sheets

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

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

View code ("_Layout.cshtml"):

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

Add Route Definition

Call the RouteCollectionExtension.MapDashboardRoute method to add the Dashboard's route. The code snippet below adds the route in the RouteConfig.cs file.

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

You can adjust routing when a Web Dashboard is used in ASP.NET MVC Areas. See the T541859 KB article for details.

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

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

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.

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

Example

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

<!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>

Next Steps

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

See Also