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 Viewer and Using It to Display a Dashboard

This document describes how to use the ASP.NET MVC Dashboard extension to display the dashboard created in the Creating an ASP.NET MVC Dashboard Designer Application tutorial. 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.

    Click Create Project.

  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. Provide a Connection String

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

Expanded Steps 10-11. Provide a Dashboard

  1. Add the dashboard XML file that you created in this lesson (dashboard1.xml). To do this, right-click the App_Data folder, select Add | Existing Item from the context menu, and locate the dashboard file in the invoked dialog.

  2. 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 Steps 12-13. Specify a Working Mode and Run the Application

  1. In the Views | Home | Index.cshtm file, add the following code within the MvcDashboardFactory.Dashboard helper method:

  2. In this code snippet, the DashboardExtensionSettings.WorkingMode property is set to WorkingMode.ViewerOnly. The dashboard1 value assigned to the DashboardExtensionSettings.InitialDashboardId property allows you to load the added dashboard at the application startup.

  3. Run the application to see the results.

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