How to use the ASP.NET MVC DashboardViewer extension to display a dashboard

• Aug 01, 2019
• 4 minutes to read

Note

Starting with v17.1, we recommend using the ASPxDashboard control or a corresponding ASP.NET MVC extension to display dashboards within web applications.

This tutorial shows how to add an ASP.NET MVC dashboard viewer to a new Web application if you have v16.2 or earlier components installed.

For a current version, you need to integrate the ASP.NET MVC Viewer into a project manually.

In this lesson, you will learn how to add an ASP.NET MVC dashboard viewer to a new Web application and display the existing dashboard in this viewer. To learn how to integrate the ASP.NET MVC Viewer into an existing project, see Integration of the DashboardViewer Extension into the Project.

• Steps 1-5. Create an ASP.NET MVC Application
• Steps 6-8. Add a Dashboard Viewer to the MVC Application
• Steps 9-11. Provide a Dashboard

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 that is fully configured to use DevExpress MVC extensions. To add dashboard viewer functionality to an existing MVC application, you need to properly register the extensions. To learn how to do this, see Manual Integration into an Existing Project.

To create a new MVC application by using the DevExpress Template Gallery, do the following.

1. Run Visual Studio.

2. Create a new project by selecting File | New | Project… (or by pressing CTRL+SHIFT+N). In the invoked New Project dialog, select the Web section, and choose DevExpress v16.2 Template Gallery.

   

3. In the DevExpress Template Gallery that is invoked, go to the ASP.NET platform and select Web Application from the ASP.NET MVC category.

   

   Leave the default project name and click Create Project.

4. In the invoked DevExpress ASP.NET MVC Project Wizard, go to the Choose Layout page and select Standard.

   

5. Then, go to the Suites page and enable the checkbox next to DashboardViewer to attach the stylesheet and script required for the Web Viewer.

   

   Click Create Project.

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

6. Build the solution.

7. Open the Views | Home | Index.cshtml file, right-click the next line after the closing curly brace in the Code Editor and select Insert DevExpress MVC Extension…

   

8. This invokes the Insert DevExpress Extension wizard. Go to the Visualization tab, select DashboardViewer and click Insert.

   

   The wizard automatically generates the code for the DashboardViewer extension.

Steps 9-11. Provide a Dashboard

9. Add the dashboard XML file that you created in this lesson. To do this, right-click the project, select Add | Existing Item from the context menu, and locate the dashboard XML file in the invoked dialog.

10. Open the Controllers\HomeController.cs file and modify the DashboardViewerSettings class in the following way.

    C#

    using DevExpress.DashboardWeb.Mvc;
    //...
    
        class DashboardViewerSettings {
            public static DashboardSourceModel Model {
                get {
                    return DashboardSourceModel();
                }
            }
    
            private static DashboardSourceModel DashboardSourceModel() {
                DashboardSourceModel model = new DashboardSourceModel();
                model.DashboardSource = System.Web.Hosting.HostingEnvironment.MapPath(@"~\MyDashboard.xml");
                return model;
            }
        }
    

    VB.NET

    Imports DevExpress.DashboardWeb.Mvc
    '...
    
        Friend Class DashboardViewerSettings
            Public Shared ReadOnly Property Model() As DashboardSourceModel
                Get
                    Return DashboardSourceModel()
                End Get
            End Property
    
            Private Shared Function DashboardSourceModel() As DashboardSourceModel
                Dim model As New DashboardSourceModel()
                model.DashboardSource = System.Web.Hosting.HostingEnvironment.MapPath("~\MyDashboard.xml")
                Return model
            End Function
        End Class
    

    Note

    Use your dashboard’s XML file name instead of MyDashboard.xml when assigning the file path to the DashboardSource property.

    As an alternative, you can provide a dashboard created at design time. To do this, assign the type of the created dashboard to the DashboardSource property.

    C#

    using DevExpress.DashboardWeb.Mvc;
    //...
    
        class DashboardViewerSettings {
            public static DashboardSourceModel Model {
                get {
                    return DashboardSourceModel();
                }
            }
    
            private static DashboardSourceModel DashboardSourceModel() {
                DashboardSourceModel model = new DashboardSourceModel();
                model.DashboardSource = typeof(Dashboard1);
                return model;
            }
        }
    

    VB.NET

    Imports DevExpress.DashboardWeb.Mvc
    '...
    
        Friend Class DashboardViewerSettings
            Public Shared ReadOnly Property Model() As DashboardSourceModel
                Get
                    Return DashboardSourceModel()
                End Get
            End Property
    
            Private Shared Function DashboardSourceModel() As DashboardSourceModel
                Dim model As New DashboardSourceModel()
                model.DashboardSource = GetType(Dashboard1)
                Return model
            End Function
        End Class
    

11. Run the application to see the results.