Use DevExtreme MVC Controls and DevExpress ASP.NET MVC Extensions in the Same Project

• Jan 11, 2022
• 3 minutes to read

Some DevExpress ASP.NET MVC Extensions require external client-side libraries, including the DevExtreme package. If you add DevExtreme MVC Controls (that also require DevExtreme libraries) to the ASP.NET MVC project, register the necessary resources. This topic describes two registration techniques to avoid possible client-side resource conflicts.

Use the DevExpress “resources” Section in the Web.config File

In the “resources” section, specify the types of external libraries to allow an application to automatically load resources required for a specific extension. Note that the application loads DevExtreme libraries with the same minor version as DevExpress ASP.NET MVC Extensions.

The technique includes the following ways to register resources:

The “resources” section references DevExtreme and third-party libraries

<configSections>
    <sectionGroup name="devExpress">
    ...
    <section name="resources" type="DevExpress.Web.ResourcesConfigurationSection, DevExpress.Web.v21.2, Version=21.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" />
    </sectionGroup>
</configSections>
...
<devExpress>  
    <resources>
        <!-- Adds references to external libraries required for a specific extension. -->  
        <add type="ThirdParty" />
        <!-- Adds a reference to the DevExtreme package. -->  
        <add type="DevExtreme" />  
    </resources>  
</devExpress>

In the root view, specify the dx.aspnet.mvc.js and dx.aspnet.data.js DevExtreme MVC scripts after DevExpress scripts.

@Html.DevExpress().GetStyleSheets(  
    new StyleSheet { ExtensionSuite = ExtensionSuite.Report },  
    ... 
)  
<script type="text/javascript" src="~/Scripts/jszip.js"></script>
@Html.DevExpress().GetScripts(  
    new Script { ExtensionSuite = ExtensionSuite.Report },  
    ...  
)  
<script type="text/javascript" src="~/Scripts/aspnet/dx.aspnet.mvc.js"></script>  
<script type="text/javascript" src="~/Scripts/aspnet/dx.aspnet.data.js"></script>  

The “resources” section references the DevExtreme package only

 <configSections>
    <sectionGroup name="devExpress">
       ...
      <section name="resources" type="DevExpress.Web.ResourcesConfigurationSection, DevExpress.Web.v21.2, Version=21.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" />
    </sectionGroup>
  </configSections>
  ...
<devExpress> 
    <resources>  
        <add type="DevExtreme" />  
    </resources>  
</devExpress>  

In the root view, specify scripts in the following order:

1. External third-party scripts.

2. The dx.aspnet.mvc.js and dx.aspnet.data.js DevExtreme MVC scripts.

@Html.DevExpress().GetStyleSheets(  
    new StyleSheet { ExtensionSuite = ExtensionSuite.Report },  
    ...  
)  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>  
<script type="text/javascript" src="~/Scripts/jszip.js"></script>

@Html.DevExpress().GetScripts(  
    new Script { ExtensionSuite = ExtensionSuite.Report },  
    ...  
)  
<script type="text/javascript"  src="~/Scripts/aspnet/dx.aspnet.mvc.js"></script>  
<script type="text/javascript" src="~/Scripts/aspnet/dx.aspnet.data.js"></script> 

Note that the web page loads DevExtreme scripts only if you specify extension suites that use DevExtreme libraries (for instance, the Dashboard and Report extensions).

Register the Required Resources Manually

This technique allows you to specify script versions to use in your application.

Follow the steps below to register the necessary resources:

1. In the Web.config file, clear the “resources” section to prevent automatic resource load.

   • XML

   <configSections>
       <sectionGroup name="devExpress">
           ...
           <section name="resources" type="DevExpress.Web.ResourcesConfigurationSection, DevExpress.Web.v21.2, Version=21.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" />
       </sectionGroup>
   </configSections>
   
   <devExpress>    
       <resources>  
       </resources>  
   </devExpress>  
   

   Note that if you delete the entire section, the application keeps its default behavior and automatically loads DevExtreme resources.

2. In the root view, register third-party and DevExtreme resources in the following order:

   • jQuery scripts.

   • jQuery.validate.unobtrusive: the jQuery.unobtrusive-ajax library.

   • jQueryUI, Bootstrap, and other libraries (such as the Globalize, Knockout, Ace libraries, and so on).

   • DevExtreme scripts (including the dx.aspnet.mvc.js and dx.aspnet.data.js scripts).

   • DevExpress scripts.