Create an ASP.NET MVC Dashboard Application

• Aug 03, 2020
• 4 minutes to read

This tutorial shows how to create the dashboard web application using the ASP.NET MVC Dashboard extension.

Note

Download the completed project: Creating an ASP.NET MVC Dashboard Designer Application (Runtime sample)

Watch the video: ASP.NET MVC Dashboard: Creating a Designer & Viewer

• Steps 1-5. Create an ASP.NET MVC Application
• Steps 6-8. Add a Dashboard Extension to the MVC Application
• Step 9. Create a Dashboard Storage
• Steps 10-12. Provide Data
• Steps 13-14. Create a Dashboard
• Steps 15-17. Switch to the Viewer Mode

Steps 1-5. Create an ASP.NET MVC Application

This section describes how to create an MVC application using the DevExpress Template Gallery.

1. Run Visual Studio 2012, 2013, 2015 or 2017.

2. Create a new project by selecting File | New | Project…Select the Web section in the invoked dialog and choose the DevExpress v18.2 Template Gallery.

   

3. In the DevExpress Template Gallery, go to the ASP.NET MVC category and select Empty Web Application.

   

4. Go to the Choose Layout page and select Standard.

   

5. Then, go to the Suites page and tick the checkbox next to Dashboard to attach the Web Dashboard’s stylesheet and script.

   

   Click Create Project.

Steps 6-8. Add a Dashboard Extension to the MVC Application

6. Build the solution.

7. Open the Views | Home | Index.cshtml file, right-click the desired location in the Code Editor to display the Shortcut menu and click the Insert DevExpress MVC Extension… to invoke the Insert DevExpress Extension wizard.

   

8. In the Insert DevExpress Extension wizard, go to the Visualization tab, select Dashboard and click Insert.

   

   The wizard automatically generates the Dashboard extension’s code.

   Note

   The basic cldr content needed for the Web Dashboard is included. However, for locales other than “en” (or currencies other than “USD”), cldr content should be loaded additionally (read more in the Globalize documentation).

Step 9. Create a Dashboard Storage

9. Right-click the App_Data folder and add the Dashboards folder. In the DashboardConfig.cs file (located in the App_Start folder), uncomment the DashboardConfigurator.SetDashboardStorage method call and change the dashboard storage path to ~/App_Data/Dashboards.

   C#

   using System.Web.Routing;
   using DevExpress.DashboardWeb.Mvc;
   
   public class DashboardConfig {
       public static void RegisterService(RouteCollection routes) {
           routes.MapDashboardRoute("api/dashboard");
   
           // Uncomment this line to save dashboards to the App_Data folder.
           DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage(@"~/App_Data/Dashboards"));
   
          // ...
       }
   }
   

   VB.NET

   Imports System.Web.Routing
   Imports DevExpress.DashboardWeb.Mvc
   
   Public Class DashboardDesignerConfig
     Public Shared Sub RegisterService(ByVal routes As RouteCollection)
           routes.MapDashboardRoute("api/dashboard")
   
           ' Uncomment this line to save dashboards to the App_Data folder.
           DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/Dashboards"))
   
           ' ...
     End Sub
   End Class
   

Steps 10-12. Provide Data

10. Right-click the App_Data folder, select Add | Existing Item and locate the nwind.mdb database using the following path:

    C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data\nwind.mdb

11. Specify a connection string to the added database within the project’s Web.config file as shown below.

    XML

    <connectionStrings>
        <add name="nwindConnection" connectionString="XpoProvider=MSAccess; Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|\nwind.mdb;" />
      </connectionStrings>
    

    Note

    Note that the connection string should contain the XpoProvider parameter that depends on the used database type. For details on how to specify connection strings for different database types, see Register Default Data Connections.

12. In the DashboardConfig.cs file (located in the App_Start folder), pass the ConfigFileConnectionStringsProvider instance as the SetConnectionStringsProvider method’s parameter to allow creating new data sources based on connection strings from the Web.config file:

    C#

    using System.Web.Routing;
    using DevExpress.DashboardWeb.Mvc;
    
    public class DashboardConfig {
        public static void RegisterService(RouteCollection routes) {
            routes.MapDashboardRoute("api/dashboard");
    
            // ...
            DashboardConfigurator.Default.SetConnectionStringsProvider(new DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider());    
        }
    }
    

    VB.NET

    Imports System.Web.Routing
    Imports DevExpress.DashboardWeb.Mvc
    
    Public Class DashboardDesignerConfig
      Public Shared Sub RegisterService(ByVal routes As RouteCollection)
            routes.MapDashboardRoute("api/dashboard")
    
            ' ...
            DashboardConfigurator.Default.SetConnectionStringsProvider(New DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider())
      End Sub
    End Class
    

Steps 13-14. Create a Dashboard

13. The designer application is now ready. Build and run the project.

    

    Your application should look as follows:

    

14. For instructions on how to create your first dashboard in the Web Designer, go to Create a Dashboard using the Web Dashboard.

Steps 15-17. Switch to the Viewer Mode

After you create and save a dashboard, you can now switch your Dashboard Designer application to the Viewer mode.

15. In a project, open the Views | Home | Index.cshtml file.

16. Add the following code within the MvcDashboardFactory.Dashboard helper method:

    C#

    @Html.DevExpress().Dashboard(settings => {
        settings.Name = "Dashboard";
        settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.ViewerOnly;
        settings.InitialDashboardId = "dashboard1";
    }).GetHtml()
    

    VB.NET

    @Html.DevExpress().Dashboard(Sub(settings)
            settings.Name = "Dashboard"
            settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.ViewerOnly
            settings.InitialDashboardId = "dashboard1"
        End Sub).GetHtml()
    

17. Run the application. The ASP.NET MVC Dashboard extension displays the dashboard from ~/App_Data/Dashboards.