ASP.NET Core 1.0.1 Application

Overview

The Syncfusion Dashboard Platform SDK includes a Dashboard Viewer HTML 5 widget that can be embedded within your ASP.NET Core Web application.

System Requirements:

To work with ASP.NET Core 1.0.1, you need to make sure whether you have installed the following software on your machine

Configuring Syncfusion Dashboard Viewer Component in ASP.NET Core Application:

The following steps helps you to create an ASP.NET Core web application to configure your Dashboard Viewer component.

  • Open Visual Studio 2015 or higher to create ASP.NET Core web application.
    from File | New | Project and save it with a meaningful name as shown below (Select the .NET Core option, which is available by default in the listed Templates on the left side pane in the new project

New project template

New project template

Refer here for more details.

  • After project creation, open your project.json file to add our Syncfusion assembly packages (highlighted below).

Syncfusion assembly packages

Adding Scripts and Style References

Create a new folder say, dashboard under wwwroot folder.

NOTE

Default project template consists of the wwwroot folder.

Copy the required scripts, themes and fonts into wwwroot\dashboard folder in your new ASP.NET Core Web application for rendering the ejDashboardViewer.

These can be availed from the Dashboard Platform SDK build installed location mentioned below:

%localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\Common\Html

Now open _ViewImports.cshtml file from the Views folder and add the following namespace for components references and Tag Helper support.

Adding namespace

Tag helper

Refer the necessary scripts and CSS files (highlighted below) in your layout.cshtml page from wwwroot -> dashboard folder.

Dashboard folder location

Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager is used to place our control initialization script in the page.

  • CSHTML
  • <ej-script-manager></ej-script-manager>
    • Now open your view page to render our Syncfusion Dashboard Viewer component in Tag Helper syntax.
  • CSHTML
  • @{
        ViewData["Title"] = "DashboardViewer ASP.NET CORE Support";
        }
       <style>
    
        body,  html,#dashboard {
                overflow: hidden !important;
                height:100%;
                width:100%;
            }
    
       </style>
       <ej-dashboardviewer id="dashboard" service-url="https://dashboardsdk.syncfusion.com/DashboardService/DashboardService.svc" dashboard-path="https://dashboardsdk.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx" ></ej-dashboardviewer>

    NOTE

    Provided online Dashboard Service URL and Dashboard Path are for demo purpose.
    Make sure the given dashboard path should be accessible with the given Dashboard Service URL.

    Binding Dashboard Service

    To initiate the dashboard service instance you can follow anyone of the below methods

    1. Hosting Dashboard Service in IIS

    2. Hosting Dashboard Service in IIS Express

    3. Hosting Dashboard Service as Windows Service Background Process

    IMPORTANT

    Hosting dashboard service at IIS is recommended for the production environment for object management and other memory management features.

    • Finally compile your project. After successful compilation, press F5 key to deploy your project.

      Deployment image

    Configuring and Installing Syncfusion NuGet Packages in Visual Studio

    NuGet Configuration

    The steps to install the Syncfusion Dashboard ASP.NET Core NuGet Packages in Visual Studio are as follows,

    1. In Visual Studio, navigate to Tools | NuGet Package Manager | Package Manager Settings, the options dialog will appear on the screen as shows below,

      Nuget Package manager option

    2. Select NuGet Package Manager | Package Sources and click Add button to add the Package Name and Package Source of Syncfusion Dashboard NuGet Packages.

    Name: Name of the package that listed in Available package sources
    Source: Syncfusion Dashboard ASP.NET Core NuGet Package feed URL
    [http://nuget.syncfusion.com/nuget_dashboard_aspnetcore/nuget/getsyncfusionpackages/dashboard/aspnetcore/]

    Adding nuget package

    NuGet Installation

    Syncfusion ASP.NET Core NuGet can install once configured the package source. The NuGet installation steps as below,

    1. Once configured the Package source with Syncfusion NuGet Packages, right click on project and choose Manage NuGet Packages Browse .

      Nuget installation

    2. The NuGet Packages are listed which are available in package source location. Install the required packages to your application by clicking Install button.

    3. Now you can find the installed NuGet package under the Installed tab list as shown below.

      Installed nuget packages