ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for ASP.NET Core Razor TreeView Component in Visual Studio 2019

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor TreeView Component web application using the Visual Studio 2019.

Prerequisites

The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the .NET Core Razor components documentation website.

Create a Razor Component application from VS 2019

  1. Choose File > New > Project… in the Visual Studio menu bar.

    new project in aspnetcore razor

  2. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

    select framework

  3. Choose the Razor Components template and change the application name, and then click OK.

Importing Essential JS 2 Razor components in the application

  1. Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.

    nuget explorer

  2. Search the Syncfusion.EJ2.AspNet.Core.RazorComponents keyword in the Browse tab and install Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package in the application.

    select nuget

  3. The Essential JS 2 package will be included in the project, after the installation process is completed.

  4. Open ~/_ViewImports.cshtml file and import the Syncfusion.EJ2.RazorComponents.

    @addTagHelper *, Syncfusion.EJ2.RazorComponents
  5. Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

    import cdn

  6. Now, add the Syncfusion Essential JS 2 TreeView component in any web page (cshtml) in the Pages folder. For example, the TreeView component is added in the ~/Pages/Index.cshtml page.

    <EjsTreeView id="treedata" fields="@fields">
    </EjsTreeView>
    
    @functions{
          object fields;
    List<Parentitem> parentitem = new List<Parentitem>();
    List<Childitem> childitem1 = new List<Childitem>();
    List<Childitem> childitem2 = new List<Childitem>();
    List<Childitem> childitem3 = new List<Childitem>();
    List<SubChilditem> subchilditem1 = new List<SubChilditem>();
    List<SubChilditem> subchilditem2 = new List<SubChilditem>();
    List<SubChilditem> subchilditem3 = new List<SubChilditem>();
    List<SubChilditem> subchilditem4 = new List<SubChilditem>();
    List<SubChilditem> subchilditem5 = new List<SubChilditem>();
    List<SubChilditem> subchilditem6 = new List<SubChilditem>();
    List<SubChilditem> subchilditem7 = new List<SubChilditem>();
    List<SubChilditem> subchilditem8 = new List<SubChilditem>();
    List<SubChilditem> subchilditem9 = new List<SubChilditem>();
    
    protected override void OnInit()
    {
        base.OnInit();
        this.parentitem.Add(new Parentitem
        {
            nodeId = "01",
            nodeText = "Local Disk (C:)",
            expanded = true,
            child = childitem1,
        });
        this.childitem1.Add(new Childitem { nodeId = "01-01", nodeText = "Program Files", child = subchilditem1 });
        this.subchilditem1.Add(new SubChilditem { nodeId = "01-01-01", nodeText = "Windows NT" });
        this.subchilditem1.Add(new SubChilditem { nodeId = "01-01-02", nodeText = "Windows Mail" });
        this.subchilditem1.Add(new SubChilditem { nodeId = "01-01-03", nodeText = "Windows Photo Viewer" });
        this.childitem1.Add(new Childitem { nodeId = "01-02", nodeText = "Users", expanded = true, child = subchilditem2 });
        this.subchilditem2.Add(new SubChilditem { nodeId = "01-02-01", nodeText = "Smith" });
        this.subchilditem2.Add(new SubChilditem { nodeId = "01-02-02", nodeText = "Public" });
        this.subchilditem2.Add(new SubChilditem { nodeId = "01-02-03", nodeText = "Admin" });
        this.childitem1.Add(new Childitem { nodeId = "01-03", nodeText = "Windows", child = subchilditem3 });
        this.subchilditem3.Add(new SubChilditem { nodeId = "01-03-01", nodeText = "Boot" });
        this.subchilditem3.Add(new SubChilditem { nodeId = "01-03-02", nodeText = "FileManager" });
        this.subchilditem3.Add(new SubChilditem { nodeId = "01-03-03", nodeText = "System32" });
    
        this.parentitem.Add(new Parentitem
        {
            nodeId = "02",
            nodeText = "Local Disk (D:)",
            child = childitem2,
        });
        this.childitem2.Add(new Childitem { nodeId = "02-01", nodeText = "Personals", child = subchilditem4 });
        this.subchilditem4.Add(new SubChilditem { nodeId = "02-01-01", nodeText = "My photo.png" });
        this.subchilditem4.Add(new SubChilditem { nodeId = "02-01-02", nodeText = "Rental document.docx" });
        this.subchilditem4.Add(new SubChilditem { nodeId = "02-01-03", nodeText = "Pay slip.pdf" });
        this.childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Projects", child = subchilditem5 });
        this.subchilditem5.Add(new SubChilditem { nodeId = "02-02-01", nodeText = "ASP Application " });
        this.subchilditem5.Add(new SubChilditem { nodeId = "02-02-02", nodeText = "TypeScript Application" });
        this.subchilditem5.Add(new SubChilditem { nodeId = "02-02-03", nodeText = "React Application" });
        this.childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Office", child = subchilditem6 });
        this.subchilditem6.Add(new SubChilditem { nodeId = "02-03-01", nodeText = "Work details.docx " });
        this.subchilditem6.Add(new SubChilditem { nodeId = "02-03-02", nodeText = "Weekly report.docx" });
        this.subchilditem6.Add(new SubChilditem { nodeId = "02-03-03", nodeText = "Wish list.csv" });
    
        this.parentitem.Add(new Parentitem
        {
            nodeId = "03",
            nodeText = "Local Disk (E:)",
            child = childitem3,
        });
        this.childitem3.Add(new Childitem { nodeId = "03-01", nodeText = "Pictures", child = subchilditem7 });
        this.subchilditem7.Add(new SubChilditem { nodeId = "03-01-01", nodeText = "Wind.jpg " });
        this.subchilditem7.Add(new SubChilditem { nodeId = "03-01-02", nodeText = "Stone.jpg" });
        this.subchilditem7.Add(new SubChilditem { nodeId = "03-01-03", nodeText = "Home.jpg" });
        this.childitem3.Add(new Childitem { nodeId = "03-02", nodeText = "Documents", icon = "docx", child = subchilditem8 });
        this.subchilditem8.Add(new SubChilditem { nodeId = "03-02-01", nodeText = "Environment Pollution.docx " });
        this.subchilditem8.Add(new SubChilditem { nodeId = "03-02-02", nodeText = "Global Warming.ppt" });
        this.subchilditem8.Add(new SubChilditem { nodeId = "03-02-03", nodeText = "Social Network.pdf" });
        this.childitem3.Add(new Childitem { nodeId = "03-03", nodeText = "Study Materials", child = subchilditem9 });
        this.subchilditem9.Add(new SubChilditem { nodeId = "03-03-01", nodeText = "UI-Guide.pdf" });
        this.subchilditem9.Add(new SubChilditem { nodeId = "03-03-02", nodeText = "Tutorials.zip" });
        this.subchilditem9.Add(new SubChilditem { nodeId = "03-03-03", nodeText = "TypeScript.7z" });
        this.fields = new
        {
            child = "child",
            dataSource = parentitem,
            id = "nodeId",
            parentId = "pid",
            text = "nodeText",
            hasChildren = "hasChild",
            expanded = "expanded"
        };
    }
    public class Parentitem
    {
        public string nodeId { get; set; }
        public string nodeText { get; set; }
        public string icon { get; set; }
        public bool expanded { get; set; }
        public bool selected { get; set; }
        public List<Childitem> child;
    
    }
    public class Childitem
    {
        public string nodeId { get; set; }
        public string nodeText { get; set; }
        public string icon { get; set; }
        public bool expanded { get; set; }
        public bool selected { get; set; }
        public List<SubChilditem> child;
    
    }
    public class SubChilditem
    {
        public string nodeId { get; set; }
        public string nodeText { get; set; }
        public string icon { get; set; }
        public bool expanded { get; set; }
        public bool selected { get; set; }
    
    }
    }
  7. Run the application. The Essential JS 2 TreeView component will render in the web browser.

    TreeView Sample