Create an ASP.NET MVC Dashboard Application

• Mar 07, 2023
• 4 minutes to read

This tutorial describes how to integrate the ASP.NET MVC Dashboard extension into an ASP.NET MVC web application.

View Example

Create an ASP.NET MVC Application

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

1. In Visual Studio, create a new project and select DevExpress v24.1 Web App Template Gallery on the start page as the project template.

   

2. In the invoked gallery, go to the ASP.NET MVC category and select Web Application. Enter MvcDashboardApp as a project name and click Run Wizard.

   

3. In the opened ASP.NET MVC Project Wizard, select Empty on the Layout tab.

   

4. Then, go to the Suites tab and enable only the Dashboard checkbox to attach the Web Dashboard’s stylesheets, scripts, and resources. Click Create Project.

   

Add a Dashboard Extension to the MVC Application

1. Build the solution.

2. Open the Views | Home | Index.cshtml (or Index.vbhtml) view, right-click the desired location in the Code Editor to display a context menu and click Insert DevExpress MVC Extension… to invoke the Insert DevExpress Extension wizard.

   

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

   

   The wizard generates the extra code the Web Dashboard requires and inserts the Dashboard extension on the Index.cshtml page:

   C#

   @{
       ViewBag.Title = "Home Page";
   }   
   @Html.DevExpress().Dashboard(settings => {
       settings.Name = "Dashboard";
       settings.ControllerName = "DefaultDashboard";
   }).GetHtml()
   

   VB.NET

   @Code
       ViewData("Title") = "Home Page"
   End Code
   @Html.DevExpress().Dashboard(Sub(settings)
       settings.Name = "Dashboard"
       settings.ControllerName = "DefaultDashboard"
   End Sub).GetHtml()
   

Create Dashboard Storage

1. Right-click the App_Data folder and add the Dashboards folder.

2. 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", "DefaultDashboard");
   
           // 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", "DefaultDashboard")
   
           ' Uncomment this line to save dashboards to the App_Data folder.
           DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/Dashboards"))
   
           ' ...
       End Sub
   End Class
   

Supply Web Dashboard with Data

1. Add the nwind.mdb file from the following path to the project’s App_Data folder:

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

2. Specify a connection string to this database within the project’s Web.config file:

   XML

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

   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.

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

   C#

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

   VB.NET

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

Create a Dashboard

1. The designer application is now ready. Run the project to see the result.

1. Your application should look as follows:

You can now create your first dashboard in the Web Dashboard.

Switch to Viewer Mode

In Designer mode, the control loads the extensions required to design dashboards. Users can access the Data Source Wizard, preview underlying data, and modify dashboards from storage. Requests from the dashboard backend server can be sent to third-party resources. A user can also switch the control to Viewer mode.

After you created and saved a dashboard, switch your Dashboard Designer application to ViewerOnly mode to prevent users from modifying the dashboard and its data.

1. In a project, open the Views | Home | Index.cshtml (or Index.vbhtml) view. Add the following code within the MvcDashboardFactory.Dashboard helper method:

   C#

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

   VB.NET

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

   Warning

   Working mode does not influence server settings. Initially, the server works at the ClientTrustLevel.Full trust level. Verify trust level and specify the actions a client can initiate on the server. See the following topic for details: Working Mode Access Rights.

2. Run the application. The ASP.NET MVC Dashboard extension displays the dashboard from ~/App_Data/Dashboards in Viewer mode:

   

Next Steps

Create Dashboards on the Web

Describes how to create and configure dashboards in the Web Dashboard control.

ASP.NET MVC Dashboard Extension

Contains instructions on how to integrate the DashboardExtension extension into an ASP.NET MVC application.