Log In
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
 [Collapse]Getting Started
   Build End-User Dashboard Applications using the Template Gallery
  [Collapse]Build End-User Dashboard Designer Applications
    Create a WinForms Designer
    Create an ASP.NET Designer
    Create an ASP.NET MVC Designer
    Create an HTML5 JavaScript Designer
    Create an ASP.NET Core Designer (CTP)
  [Expand]Build End-User Dashboard Viewer Applications
  [Expand]Create a Dashboard in the Designer Application
   Create a Dashboard in Visual Studio
   Included Components
 [Expand]Basic Concepts and Terminology
 [Expand]Main Features
 [Expand]Building the Designer and Viewer Applications
 [Expand]Creating Dashboards
 [Expand]Design-Time Features
  Video Tutorials
  End-User Documentation
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Create an ASP.NET MVC Designer

This tutorial shows how to create the Dashboard Designer web application using the ASP.NET MVC Dashboard extension. For instructions on how to integrate this extension into an existing project, see Integrating the Dashboard Extension into a Project.

Expanded 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.
  2. Create a new project by selecting File | New | Project… Select the Web section in the invoked dialog and choose the DevExpress v17.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.

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

  1. Build the solution.

  2. Switch to 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.

  3. 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.

Expanded Step 9. Create a Dashboard Storage

  1. 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.

Expanded Steps 10-11. Provide Data

  1. 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 17.2\Components\Data\nwind.mdb

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


    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.

Expanded Step 12. Create a Dashboard

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

    Your application should look as follows:

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

Is this topic helpful?​​​​​​​