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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using Syncfusion + React in a pure ASP.Net MVC environment (without node.js)

Thread ID:

Created:

Updated:

Platform:

Replies:

148232 Oct 10,2019 04:21 PM UTC Oct 24,2019 11:48 AM UTC React - EJ 2 5
loading
Tags: General
Lamar
Asked On October 10, 2019 04:21 PM UTC

Hello,
I'm a Syncfusion newbie and also a react.js newbie. I've been using knockoutjs for years and have just recently decided to start using Syncfusion and because of the native support for React decided it's a good time to start learning React as well.
I'm confused about how to get started. All the documentation I can find tells me I need to install node.js and use NPM to install Syncfusion+React. Why is that? I don't understand where node even comes into the picture here unless it's solely used for package management.. And if that's the case, why would Syncfusion have done it that way instead of using Nuget like the rest of Syncfusion?
Thanks in Advance!
Lamar

Gurunathan A [Syncfusion]
Replied On October 11, 2019 09:49 AM UTC

Hi Lamar,  

Thanks for using Syncfusion product. 

We recommending you to use Node based environment to work on React JS application since it would be easy and good performance at run time than direct script referring way.  



Please let us know if any concerns.  

Regards, 
Gurunathan  


Lamar
Replied On October 11, 2019 10:05 PM UTC

Thanks GuruNathan,

I understand that node.js may be fast but I have an entire existing website built in ASP.Net MVC that I want to start using Syncfusion/React with.  I can't just start over on a whole new platform.

Lamar

Gurunathan A [Syncfusion]
Replied On October 14, 2019 12:39 PM UTC

Hi Lamar, 
Thanks for contacting us.  
We have created the React JS sample with System JS sample using CDN links as per request without using NPM packages. But here, module injection will not be work with our components.  
Please refer the below code snippet added in system.config.js 
(function (global) { 
  System.config({ 
    paths: { 
      // paths serve as alias 
    }, 
     
    // map tells the System loader where to look for things 
    map: { 
      'react': "https://unpkg.com/react@15.5.4/dist/react.min.js" 
      'react-dom': 'https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js', 
      "@syncfusion/ej2-base": "https://cdn.syncfusion.com/ej2/ej2-base/dist/ej2-base.umd.min.js", 
      "@syncfusion/ej2-buttons": "https://cdn.syncfusion.com/ej2/ej2-buttons/dist/ej2-buttons.umd.min.js", 
      "@syncfusion/ej2-react-base": "https://cdn.syncfusion.com/ej2/ej2-react-base/dist/ej2-react-base.umd.min.js", 
      "@syncfusion/ej2-react-buttons": "https://cdn.syncfusion.com/ej2/ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", 
    }, 
     
    bundles: { 
         
      }, 
       
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
       
    } 
  }); 
})(this); 
 
Please refer the system file in html pages 
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.2/system.min.js” script> 
        <script src="./systemjs.config.js"></script> 
BTW, we are also having EJ2 MVC components, you can check out the details from here.  
 
Please let us know if any concerns.  
Regards, 
Gurunathan  
 


Giorgio
Replied On October 23, 2019 06:09 PM UTC

Lamar,
we are using such setup incapsulating the react part in a ViewComponent. It works pretty well.
You define a viewcomponent in Razor and from that component you can instantiate a react one. For example

@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Localization
@using Microsoft.Extensions.Options
@using FrontEnd.Infrastructure
@using Newtonsoft.Json;
@model LineGridModel
@inject IViewLocalizer DefaultLocalizer
@inject IOptions LocOptions

@{
    var requestCulture = Context.Features.Get();
    var cultureName = requestCulture.RequestCulture.Culture.Name;
    var Localizer = DefaultLocalizer.WithCulture(requestCulture.RequestCulture.Culture);
    var items = JsonConvert.SerializeObject(Model.Items);
    var currentItems = JavaScriptConvert.BaseEncode64(items);
    var config = JavaScriptConvert.BaseEncode64(Model.ColumnConfigJson);
    var id = Model.Id;
    var appId = Model.Id + "_app";
    var currentUser = Model.CurrentUser ?? "CV";
}




The linegridcomponent is a bundle with webpack. In any case you need npm. You create you reacr app and inside viewcomponents you expose the react part.



Sabitha Rajamani [Syncfusion]
Replied On October 24, 2019 11:48 AM UTC

Hi Giorgio, 
 
Thank you for the suggestion. 
 
Regards, 
Sabitha 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

Live Chat Icon For mobile
Live Chat Icon