How to use Classic and Non-classic controls in the ASP.NET MVC General?
Description
On adding both Classic MVC and EJMVC controls in same project, there can be some issues on rendering both the controls due to missing references and their scripts in the application.
Solution
To use both classic and non-classic control in same project, add reference DLLs, StyleManger and ScriptManager for both the platforms accordingly. Following steps illustrate the procedure for adding Captcha in MVC project:
1)Refer to the required DLLs in the project for both platforms. Add references to corresponding assemblies based on the .NET framework version and MVC used in the application.
Classic MVC assemblies to refer,
- Syncfusion.Core
- Syncfusion.Linq.Base
- Syncfusion.Tools.Mvc
- Syncfusion.Shared.Mvc
- Syncfusion.Theme.Base
Essential JavaScript powered ASP.NET MVC (EJMVC) assemblies to refer,
- Syncfusion.EJ
- Syncfusion.EJ.Mvc
2)Add the ScriptManager and StyleManger in Layout page for both the platforms as illustrated in the following code example.
CSHTML
<!DOCTYPE html> <html> <head> @*Style manager for Classic MVC controls*@ @(Html.Syncfusion().StyleManager().Combine(false).Minify(false) .Register(component => { component.Add(ComponentType.Captcha); })) @* Add Style and script references for EJMVC controls *@ </head> <body> @RenderSection("scripts", required: false) @*Script manager for classic MVC and EJMVC controls*@ @{Html.Syncfusion().ScriptManager().Combine(true).Minify(true).Render();} @Html.EJ().ScriptManager() </body> </html>
To add scripts and style references for rendering EJMVC controls refer the following link, https://help.syncfusion.com/ug/js/default.htm#!documents/createmanually.htm
3)Add the corresponding reference assemblies and namespaces for both the platforms in webconfig file. Refer to the following code example.
Webconfig
<configuration> <configSections> <system.web> <compilation debug="true" targetFramework="4.0"> <assemblies> <add assembly="Syncfusion.Core, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=632609B4D040F6B4" /> <add assembly="Syncfusion.Compression.Base, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <!--EJMVC assembly references--> <add assembly="Syncfusion.EJ, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.EJ.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <!--Classic MVC assembly references--> <add assembly="Syncfusion.Shared.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.Tools.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.Linq.Base, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.Theme.Base, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> </assemblies> </compilation> <pages> <namespaces> <add namespace="Syncfusion.JavaScript" /> <add namespace="Syncfusion.JavaScript.DataVisualization" /> <add namespace="Syncfusion.MVC.EJ" /> <add namespace="Syncfusion.Mvc.Shared"/> <add namespace="Syncfusion.Mvc.Tools"/> </namespaces> </pages> </configuration> Note: Here XX.XXXX.X.XX denotes the assembly version used in the application
4)Adding a Captcha to an application requires registering the image handlers under httphandler and handler tags. These image handlers are different from MvcResourcehandler and they work together with them.
Webconfig
<configuration> <system.web> <!--Classic MVC Image handlers --> <add verb="GET,HEAD" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false" /> <add verb="*" path="sfgenerate_tools.axd" type="Syncfusion.Mvc.Tools.ImageHandler, Syncfusion.Shared.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false" /> <add verb="GET,HEAD" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false" /> <!--EJMVC Image handlers --> <add verb="*" path="captimage.axd" type="Syncfusion.JavaScript.ImageHandler, Syncfusion.EJ, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false" /> </httpHandlers> </system.web> <system.webServer> <validation validateIntegratedModeConfiguration="false" /> <!--Classic MVC Image handlers--> <add verb="*" path="sfgenerate_tools.axd" name="syncfusion_generatetools" type="Syncfusion.Mvc.Tools.ImageHandler, Syncfusion.Shared.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add verb="GET,HEAD" name="MvcResourceHandler" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <!--EJMVC Image handlers --> <add verb="*" path="captimage.axd" name="syncfusion_generatetools" type="Syncfusion.JavaScript.ImageHandler, Syncfusion.EJ, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> </handlers> </system.webServer> </configuration> Note: Here XX.XXXX.X.XX denotes the assembly version used in the application
5)Create the Captcha control in the view page in both classic and non-classic MVC.
CSHTML
<table cellspacing="5" style="border-spacing: 10px; border-collapse: separate"> <tr> <td>Captcha Control</td> <td> @Html.Syncfusion().CaptchaControl("ClassicCaptcha") </td> </tr> <tr> <td>Captcha Non-classic </td> <td> @Html.EJ().Captcha("NonClassicCaptcha") </td> </tr> </table>
For reference, check the following online sample links.
EJMVC Samples demo, https://mvc.syncfusion.com/demos/web/Captcha/Default
Classic MVC Samples demo, https://mvc.syncfusion.com/demos/ui/tools/Captcha/ThroughView
For further reference on creating an application with EJMVC and Classic MVC check the following links.
Getting started with EJMVC, https://help.syncfusion.com/ug/js/documents/createmanually.htm
Getting started with Classic MVC,