Getting Started

This section briefly explains how to create a simple Tooltip component and configure its available functionalities in ASP.NET Core environment.

System requirements

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

• Visual Studio 2017

• DotNetCore 2.0

Configure Syncfusion UI Components in ASP.NET Core Application

The following steps helps to create a ASP.NET Core web application to configure our components.

• Open Visual Studio 2017 to create ASP.NET Core web application.

• After project creation, install the Syncfusion Packages in your application.

• Select the Tools --> Nuget Package Manager -->Package Manager Settings, the dialog window will open.

• Navigate to the Nuget Package Manager --> Package Sources from the options dialog.

• Click the Add button to create the new package sources.

• Select the newly created Package Source and rename the source name using the Name input box.

  Name: Name of the package that listed in Available package sources

  Source: Syncfusion ASP.NET Core NuGet Package feed URL

  https://api.nuget.org/v3/index.json

Adding Tag Helpers

• Now open _viewImports.cshtml file from the views folder and add the following namespace for component references and Tag Helper support.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2

Adding ScriptManager

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

<ej-scripts> </ej-scripts>

Adding themes

Refer the required theme file in your layout.cshtml page from wwwroot/styles folder.

    <link href="~/styles/material.css" rel="stylesheet"/>

Above referred CSS is material theme. Likewise you can refer the theme specific CSS which is present inside the styles folder in order to render Slider component with required themes.

Initialize the ListView

• ListView component can be rendered with the help of ej-listview tag helper. Add the below code to your index.cshtml page which is present under Views/Home folder, where the ListView is initialized.

{% aspCodeBlock razorTemplate=“layout/listview/getting-started/basicSyntax” %}

<ej-listview id="list"></ej-listview>

{% endaspCodeBlock %}

Bind dataSource

Populate the data in ListView by using the dataSource property. Here, the JSON values are passed to the ListView component are generated in HomeController.cs and assigned to ViewBag variable.

{% aspCodeBlock razorTemplate=“layout/listview/getting-started/controller” %}

public IActionResult Index()
        {
            //define the array of JSON
            List<object> data = new List<object>();
            data.Add(new { text: "Artwork", id: "01" });
            data.Add(new { text: "Abstract", id: "02" });
            data.Add(new { text: "Modern Painting", id: "03" });
            data.Add(new { text: "Ceramics", id: "04" });
            data.Add(new { text: "Animation Art", id: "05" });
            data.Add(new { text: "Oil Painting", id: "06" });
            ViewBag.dataSource = data;
            return View();
        }

{% endaspCodeBlock %}

ViewBag.dataSource variable is used for bounding the dataSource property in view page.

{% aspCodeBlock razorTemplate=“layout/listview/getting-started/listdata” %}

    <ej-listview id="list" dataSource="@ViewBag.dataSource"></ej-listview>

{% endaspCodeBlock %}

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a basic ListView.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists
@Html.EJ().ListView("listview").DataSource((IEnumerable<object>)ViewBag.dataSource).Render()

public IActionResult Index()
    {
            //define the array of JSON
            List<object> data = new List<object>();
            data.Add(new { text: "Artwork", id: "01" });
            data.Add(new { text: "Abstract", id: "02" });
            data.Add(new { text: "Modern Painting", id: "03" });
            data.Add(new { text: "Ceramics", id: "04" });
            data.Add(new { text: "Animation Art", id: "05" });
            data.Add(new { text: "Oil Painting", id: "06" });
            ViewBag.dataSource = data;
            return View();
    }