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

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

Reply | Reply with quote

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.

https://www.logisticinfotech.com/blog/why-prefer-reactjs-and-nodejs/

https://medium.com/@etherealm/node-and-react-a-brief-introduction-99b672262fed

Please let us know if any concerns.

Regards,

Gurunathan

Reply | Reply with quote

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

Reply | Reply with quote

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

BTW, we are also having EJ2 MVC components, you can check out the details from here.

https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/visual-studio-2017/

https://ej2.syncfusion.com/aspnetmvc/Grid/GridOverview#/material

Please let us know if any concerns.

Regards,

Gurunathan

Reply | Reply with quote

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.

Reply | Reply with quote

Sabitha Rajamani [Syncfusion]

Replied On October 24, 2019 11:48 AM UTC

Hi Giorgio,

Thank you for the suggestion.

Regards,

Sabitha

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US