Getting Started with Essential JS 2 for ASP.NET Core Razor DropDownButton Component in Visual Studio 2019
03 Mar 2021 / 2 minutes to read
This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor DropDownButton Component web application using the Visual Studio 2019.
Choose File > New > Project… in the Visual Studio menu bar.
Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.
Choose the Razor Components template and change the application name, and then click OK.
Importing Essential JS 2 Razor components in the application
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.
Search the Syncfusion.EJ2.AspNet.Core.RazorComponents keyword in the Browse tab and install Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package in the application.
The Essential JS 2 package will be included in the project, after the installation process is completed.
Open ~/_ViewImports.cshtml file and import the Syncfusion.EJ2.RazorComponents.
Copied to clipboard
@addTagHelper *, Syncfusion.EJ2.RazorComponents
Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.
Now, add the Syncfusion Essential JS 2 DropDownButton component in any web page (cshtml) in the Pages folder. For example, the DropDownButton component is added in the ~/Pages/Index.cshtml page.
Copied to clipboard
<EjsDropDownButtonID="element"Content="Edit"Items="@items"></EjsDropDownButton>
@code {
public List<object> items { get; set; } = new List<object>
{
new { text = "Cut" },
new { text = "Copy" },
new { text = "Paste" }
};
}
Run the application. The Essential JS 2 DropDownButton component will render in the web browser.