diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/POST.md b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/POST.md index 2485b922d6..fde6c11d5e 100644 --- a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/POST.md +++ b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/POST.md @@ -4,6 +4,9 @@ Hi, in this step by step article we will see how we can integrate the Syncfusion MVC Components to our ABP MVC UI. +## Source Code + +You can find the source code of the application at https://github.com/EngincanV/ABP-Syncfusion-Components-Demo. ## Prerequisites @@ -28,7 +31,7 @@ dotnet tool install Volo.Abp.Cli -g --version 5.0.0-rc.2 In this article, I will create a new startup template with EF Core as a database provider and MVC for UI framework. But if you already have a project with MVC UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. -> If you already have a project, you can skip this section and starts to follow from TODO: step x. +> If you already have a project, you can skip this section. We can create a new startup template by using the [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): @@ -40,3 +43,224 @@ Our project boilerplate will be ready after the download is finished. Then, we c ## Starting the Development +### Pre-requisite + +> If you've already had a license from Syncfusion, you can skip this section and starts with Step 1. + +* First thing we need to do is creating an account to be able to get license from Syncfusion. Let's navigate to https://www.syncfusion.com/aspnet-core-ui-controls and click the "Download Free Trial" button. + +* Then fill the form and starts your 30-day free trial. + +* After that, navigates to https://www.syncfusion.com/account/manage-trials/downloads to get our license key that will be used in our application. + +![](./manage-trial-1.png) + +click the "Get License Key" link for "ASP.NET Core (Essential JS 2)". + +![](./manage-trial-2.png) + +Then a modal will be open like above, select the version and click the "Get License Key" button. + +![](./copy-license-key.png) + +* Lastly, copy the generated license key value. This license key will be used in our application, to let Syncfusion check do our license is not expired and valid. + + +### Step 1 (Configurations) + +After providing a license key from Syncfusion, we can start with configuration thats need to be done in our application. + +* We need to install the `Syncfusion.EJ2.AspNet.Core` Nuget package to our Web project (*.Web). + +![](./syncfusion-package.png) + +* After installing the package, we need to register our license key to be able to use the Syncfusion Components. + +* To register the license key, open your web module class and update the `ConfigureServices` methods as follows: + +```csharp +public override void ConfigureServices(ServiceConfigurationContext context) +{ + var hostingEnvironment = context.Services.GetHostingEnvironment(); + var configuration = context.Services.GetConfiguration(); + + //Register Syncfusion license + Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(licenseKey: configuration["Syncfusion:LicenseKey"]); + + ConfigureUrls(configuration); + ConfigureBundles(); + ConfigureAuthentication(context, configuration); + ConfigureAutoMapper(); + ConfigureVirtualFileSystem(hostingEnvironment); + ConfigureLocalizationServices(); + ConfigureNavigationServices(); + ConfigureAutoApiControllers(); + ConfigureSwaggerServices(context.Services); +} +``` + +Instead of writing the license key in here we can define it in **appsettings.json** file and use it in here by using the Configuration system of .NET. + +* Open your **appsettings.json** file and add a new section named "Syncfusion": + +```json +{ + //... + + "Syncfusion": { + "LicenseKey": "" + } +} +``` + +> Replace the ` part with your license key that we've obtained in the previous section.` + +* To be able to use the Syncfusion Components we need to define it as tag helper in our **_ViewImports.cshtml** file. By doing that we can use the Syncfusion components everywhere in our application. + +* So open your **/Pages/_ViewImports.cshtml** file and add a new tag helper: + +```cshtml +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI +@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap +@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling +@addTagHelper *, Syncfusion.EJ2 //use Syncfusion components +``` + +### Step 2 - (Add styles and script to our application) + +* Last thing we need to do is, add some style and script files that provided by Syncfusion, between to our head-body tags. + +* We can do this by creating two view component (one for Styles and other for Scripts). Let's do that. + +First, create folder structure like below under the **Components** folder. + +![](./component-folder-structure.png) + +Then open the related files and add the following codes to each of these files. + +* **Default.cshtml** (/Components/Syncfusion/Script/Default.cshtml) + +```cshtml +@addTagHelper *, Syncfusion.EJ2 //add this line + + + + + + +``` + +* **SyncfusionScriptComponent.cs** + +```csharp +using Microsoft.AspNetCore.Mvc; +using Volo.Abp.AspNetCore.Mvc; + +namespace SyncfusionComponentsDemo.Web.Components.Syncfusion.Script +{ + public class SyncfusionScriptComponent : AbpViewComponent + { + public IViewComponentResult Invoke() + { + return View("~/Components/Syncfusion/Script/Default.cshtml"); + } + } +} +``` + +* **Default.cshtml** (/Components/Syncfusion/Style/Default.cshtml) + +```cshtml + + +``` + +* SyncfusionStyleComponent.cs + +```csharp +using Microsoft.AspNetCore.Mvc; +using Volo.Abp.AspNetCore.Mvc; + +namespace SyncfusionComponentsDemo.Web.Components.Syncfusion.Style +{ + public class SyncfusionStyleComponent : AbpViewComponent + { + public IViewComponentResult Invoke() + { + return View("~/Components/Syncfusion/Style/Default.cshtml"); + } + } +} +``` + +After creating these two components, we can use the [**Layout Hooks**](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Layout-Hooks) system of ABP to inject this two components between head and script tags. + +To do this, open your web module class and update the `ConfigureServices` method as below: + + +```csharp +public override void ConfigureServices(ServiceConfigurationContext context) +{ + var hostingEnvironment = context.Services.GetHostingEnvironment(); + var configuration = context.Services.GetConfiguration(); + + //Register Syncfusion license + var licenseKey = configuration["Syncfusion:LicenseKey"].ToString(); + Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(licenseKey: licenseKey); + + Configure(options => + { + //Now, the SyncfusionStyleComponent code will be inserted in the head of the page as the last item. + options.Add(LayoutHooks.Head.Last, typeof(SyncfusionStyleComponent)); + + //the SyncfusionScriptComponent will be inserted in the body of the page as the last item. + options.Add(LayoutHooks.Body.Last, typeof(SyncfusionScriptComponent)); + }); + + ConfigureUrls(configuration); + ConfigureBundles(); + ConfigureAuthentication(context, configuration); + ConfigureAutoMapper(); + ConfigureVirtualFileSystem(hostingEnvironment); + ConfigureLocalizationServices(); + ConfigureNavigationServices(); + ConfigureAutoApiControllers(); + ConfigureSwaggerServices(context.Services); +} +``` + +After injecting the Syncfusion style and script into our application our configurations have been completed. We can try with a simple component to see if it works as we expected. + +Let's try with the [Calendar](https://www.syncfusion.com/aspnet-core-ui-controls/calendar) component. Open your **Index.cshtml** file and update with the below content: + +```cshtml +@page +@using Microsoft.AspNetCore.Mvc.Localization +@using SyncfusionComponentsDemo.Localization +@using Volo.Abp.Users +@model SyncfusionComponentsDemo.Web.Pages.IndexModel + +@section styles { + +} + +@section scripts { + +} + +
+

Syncfusion - Calendar Component

+ +
+``` + +* Then when we run the application, we need to see the relevant calendar component as below. + +![](./calendar-component.png) + +--- + +## See the Syncfusion Components in Action + +//TODO: create a todo application and show some components. \ No newline at end of file diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/calendar-component.png b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/calendar-component.png new file mode 100644 index 0000000000..8e7f36367a Binary files /dev/null and b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/calendar-component.png differ diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/component-folder-structure.png b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/component-folder-structure.png new file mode 100644 index 0000000000..0dabbe0a06 Binary files /dev/null and b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/component-folder-structure.png differ diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/copy-license-key.png b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/copy-license-key.png new file mode 100644 index 0000000000..847be0363d Binary files /dev/null and b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/copy-license-key.png differ diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/manage-trial-1.png b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/manage-trial-1.png new file mode 100644 index 0000000000..8e84229549 Binary files /dev/null and b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/manage-trial-1.png differ diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/manage-trial-2.png b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/manage-trial-2.png new file mode 100644 index 0000000000..57ef370bdb Binary files /dev/null and b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/manage-trial-2.png differ diff --git a/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/syncfusion-package.png b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/syncfusion-package.png new file mode 100644 index 0000000000..6792ea0c32 Binary files /dev/null and b/docs/en/Community-Articles/2021-12-13-How-to-Integrate-the-Syncfusion-MVC-Component/syncfusion-package.png differ