How To Add Essential Tools to an MVC 5 application

[PV]

Hi,

 

the question is self-explanatory, I think. We have existing MVC5 project and we want to use number of Essential Tools components, starting from Schedule. How do we go about doing that? Is there a migration tool or do we need to do everything manually?

 

Thanks,

 

PV

[Velmurugan S]

 Hi,

Thanks for using Syncfusion products.

We would like to inform you that, We can add the schedule control in the MVC5 application by manually. Please follow the below steps to add the schedule control in MVC5 application.

1.       Create the MVC5 application in the Visual studio.

2.       And add the necessary assemblies in the reference folder. Refer the below screenshot.

 

3.       Refer the assembly details in web.config. To refer the assemblies add the following code snippet within the “system.web” blog

 

<compilation debug="true" targetFramework="4.5.1" >

      <assemblies>

        <add assembly="Syncfusion.Core, Version=12.2450.0.36, Culture=neutral, PublicKeyToken=632609B4D040F6B4" />

        <add assembly="Syncfusion.Compression.Base, Version=12.2450.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

        <add assembly="Syncfusion.EJ, Version=12.2450.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

        <add assembly="Syncfusion.EJ.Mvc, Version=12.2500.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

        <add assembly="Syncfusion.Linq.Base, Version=12.2450.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

        <add assembly="Syncfusion.XlsIO.Base, Version=12.2450.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

      </assemblies>

    </compilation>

 

4.       Add the namespaces in the web.config page. To add the namespaces include the following code snippet within the system.web blog under pages.

 

<pages>

      <namespaces>

        <add namespace="System.Web.Helpers" />

        <add namespace="System.Web.Mvc" />

        <add namespace="System.Web.Mvc.Ajax" />

        <add namespace="System.Web.Mvc.Html" />

        <add namespace="System.Web.Optimization" />

        <add namespace="System.Web.Routing" />

        <add namespace="System.Web.WebPages" />

        <add namespace="Syncfusion.JavaScript" />

        <add namespace="Syncfusion.JavaScript.DataVisualization" />

        <add namespace="Syncfusion.MVC.EJ" />

      </namespaces>

    </pages>

 

5.       And then within the appSetting in the web.config page add the following code snippet to block the browser link.

 

<appSettings>

    <add key="webpages:Version" value="3.0.0.0" />

    <add key="webpages:Enabled" value="false" />

    <add key="ClientValidationEnabled" value="true" />

    <add key="UnobtrusiveJavaScriptEnabled" value="false" />

    <add key="vs:EnableBrowserLink" value="false" />

</appSettings>

 

6.       And add the following highlighted code snippet within the “web.config” page under the “Views” folder.

 

 

<namespaces>

        <add namespace="System.Web.Mvc" />

        <add namespace="System.Web.Mvc.Ajax" />

        <add namespace="System.Web.Mvc.Html" />

        <add namespace="System.Web.Optimization"/>

        <add namespace="System.Web.Routing" />

        <add namespace="WebApplication8" />

        <add namespace="Syncfusion.JavaScript" />

        <add namespace="Syncfusion.JavaScript.DataVisualization" />

        <add namespace="Syncfusion.MVC.EJ" />

      </namespaces>

 

7.       Add the necessary scripts and themes in the sample application. Refer the following screenshot.

 

 

 

 

8.       Refer the scripts  in the layout.cshtml page. Refer the following code.

 

 

<link rel='nofollow' href="@Url.Content("~/ejThemes/Default-theme/ej.widgets.all.min.css")" rel="stylesheet" />

    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>

    <script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>

    <script src="@Url.Content("~/Scripts/jquery.easing-1.3.min.js")"></script>

    <script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>

    <script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script>

    <script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>

 

9.       Add the script manager render code in the layout.cshtml page.

 

 

    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)

   

      @Html.EJ().ScriptManager()

 

10.Then write the code to render the schedule control in the view page like the below.

 

 

 

@Html.EJ().Schedule("Schedule")

 

11.And while running the sample the schedule control will render look like the following.

 

 

 

Please let us know if it helps and any further assistance.

Regards,

Velmurugan

 

[PV]

Velmurugan, what happened here?

[Velmurugan S]

Hi Peter,

We regret for the inconvenience caused, due to the internal server problem the updated content doesn’t display properly and we are checking this now, once the problem get solved we will update further details on this.

We appreciate your patience until then.

Regards,

Velmurugan

[Janet]

I am following step by step this post but the calendar doesnt show in my app.

I have problems with the reference Syncfusion.Core

Any idea?

[Karthigeyan Krishnamurthi]

Hi Janet,   

   

Thank you for contacting Syncfusion support.   

   

To render Schedule control, it is not necessary to include Syncfusion.Core reference. Please refer to the below KB link, it will guide you to add the Schedule control in to MVC application.   

KB link: https://syncfusion.com/kb/3606/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application   

   

Regards,   

Karthigeyan