How to add the EJMVC Schedule control in the MVC application?
The following steps help manually add the EJMVC Schedule control into the new MVC 5 application.
- Create the MVC 5 application in the Visual Studio.
- Add references of the necessary assemblies to your project as depicted in the following screenshot.
Figure 1:Necessary assembly reference
- Add the necessary assembly information in the root web.config file.
[Web.config]
<compilation debug="true" targetFramework="4.5.1" > <assemblies> <add assembly="Syncfusion.EJ, Version=13.2450.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.EJ.Mvc, Version=13.2500.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> </assemblies> </compilation> |
- Add the namespaces in the root Web.config page as follows.
[Web.config]
<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.MVC.EJ" /> </namespaces> </pages> |
- Also, add the following highlighted namespaces in the Web.config page available under the Views/Shared folder of your project.
[Web.config]
<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="ScheduleMVCSample" /> <add namespace="Syncfusion.JavaScript" /> <add namespace="Syncfusion.MVC.EJ" /> </namespaces> |
- Add the necessary scripts and theme files in the sample application as depicted.
Figure 2: Adding necessary themes
Figure 3: Adding necessary scripts
- Add references to the required scripts and stylesheets in the layout.cshtml page as follows.
[Layout.cshtml]
<link href="~/Content/ej/default-theme/ej.widgets.all.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/jsrender.min.js"></script> <script src="~/Scripts/jquery.easing-1.3.min.js"></script> <script src="~/Scripts/jquery.globalize.min.js"></script> <script src="~/Scripts/ej/ej.web.all.min.js"></script>
- Set the UnobtrusiveJavaScriptEnabled property to false in the web.config page as follows.
[Web.config]
<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> |
- Add the script manager render code at the end of the body tag in the layout.cshtml page as mentioned in the following code example. It is mandatory for rendering the EJMVC Schedule control.
[Layout.cshtml]
<body>
------------------------
------------------------
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Html.EJ().ScriptManager()
</body>
- To render the Schedule control, add the schedule code in the view page as follows.
[Index.cshtml]
@Html.EJ().Schedule("Schedule")
- After running the above code, the Schedule control is displayed as follows.
Figure 4: Schedule control
Sample Link
