How to use classic and non-classic in 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 ASP.NET MVC 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, https://help.syncfusion.com/ug/asp.net%20mvc/documents/creatingsyncfusionmvcapplication.htm
Conclusion
I hope you enjoyed learning about how to use Classic and Non-classic MVC controls in the same project.
You can refer to our ASP.NET MVC feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
