Log In
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
 [Collapse]Getting Started
   Creating a WinForms Designer and Using It to Create a Dashboard
   Creating a Dashboard at Design Time
   Creating an ASP.NET Designer and Using It to Create a Dashboard
   Creating an ASP.NET MVC Dashboard Designer Application
   Creating a WinForms Viewer and Using It to Display a Dashboard
   Creating an ASP.NET Viewer and Using It to Display a Dashboard
   Creating an ASP.NET MVC Viewer and Using It to Display a Dashboard
   Included Components
 [Expand]Basic Concepts and Terminology
 [Expand]Main Features
 [Expand]Preparing the Designer and Viewer Applications
 [Expand]Creating Dashboards
  Video Tutorials
  End-User Capabilities
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Creating an ASP.NET MVC Dashboard Designer Application

This tutorial describes how to create a dashboard in a 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 use the DevExpress Template Gallery to create a new MVC application.

  1. Run Visual Studio.
  2. Create a new project by selecting File | New | Project… In the invoked New Project dialog, select the Web section, and choose the DevExpress v17.1 Template Gallery.

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

  4. In the DevExpress ASP.NET MVC Project Wizard, 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 stylesheet and script required for the Web Dashboard.

    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... which invokes 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 code for the Dashboard extension.

Expanded Step 9. Create a Dashboard Storage

  1. In the DashboardConfig.cs file (located in the App_Start folder), uncomment the line providing access to the App_Data folder that contains the dashboard XML files.

Expanded Step 10. Provide Data

  1. To supply a dashboard with data, add a string specifying the database's connection to the project's Web.config file as shown below.

    This connection string is used to establish a connection to the Northwind database.


    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 11. Create a Dashboard

  1. For instructions on how to create your first dashboard in the Web Designer, go to step 8 of Creating an ASP.NET Designer and Using It to Create a Dashboard.

Expanded See Also

How would you rate this topic?​​​​​​​