We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use Classic and Non-classic MVC controls in the same project?

Platform: ASP.NET MVC (Classic) |
Control: General |
Published Date: December 4, 2014 |
Last Revised Date: May 8, 2019 |
Product Version: 12.3.0.36
Tags: general, captcha

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,

  1. Syncfusion.Core
  2. Syncfusion.Linq.Base
  3. Syncfusion.Tools.Mvc
  4. Syncfusion.Shared.Mvc 
  5. Syncfusion.Theme.Base

Essential JavaScript powered ASP.NET MVC (EJMVC) assemblies to refer,

  1. Syncfusion.EJ
  2. 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, http://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, http://mvc.syncfusion.com/demos/web/Captcha/Default 

Classic MVC Samples demo, http://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, http://help.syncfusion.com/ug/js/documents/createmanually.htm

Getting started with Classic MVC, http://help.syncfusion.com/ug/asp.net%20mvc/documents/creatingsyncfusionmvcapplication.htm

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon