I want to develop website with React front-end features and Asp.net for backend and some asp.net views for front-end. I don`t want to use React for the whole application. When I started new project, I used prepared ASP.NET React Redux Template by Visual Studio 2019. Everythink would be fine, but I cant find _Layout.cshtml.
Why do I need this file?
When I choose classic Asp.net mvc template, I can find in this file imports of css, js and also packages like bootstrap.
f.e:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
If I didn`t need classic asp.net views, the template would be helpful. How can I fix it, or where to import files/packages usable also for views?
In the ASP.NET Core + React templates by Microsoft, the Layout is not handled in the back-end with ASP but in the front-end with React. In the ClientApp/src/components folder, you will find a Layout.js file for this usage.
However, nothing stops you to create a partial view _Layout.cs and use Razor Pages / MVC as a React overlay. This way, every page should be handled with an ASP controller. Inside them you would add an empty HTML tag to place your React App if you need it.
In the ClientApp/src/index.js file, you will find the following line:
const rootElement = document.getElementById('root');
You need to replace the element ID by the one where you want to render your React application in the DOM.
But typically, when using ASP with React, the front-end is left entierly to React. ASP is only useful for API controllers handling AJAX requests coming from React, and interacting with a database using Entity Framework.
Related
i am having a problem which i want to combine my old ASP.net website into a new web project but i want to remain my current ASP.net backend. And its mean i just want to change the front end only for this thing.
The front end that i want to try is using the Angular JS, but soon i found out that wasnt easy to setup for this project.
Because when have angular project it need to build only can work, so how do i have the project to star this new front end. I not clear what should i start as a correct way.
Or it must separate to a new project and redo the front end and backend?
Angular usually uses REST calls to communicate with the back-end. With ASP.NET the back-end renders the page and sends the complete HTML page to your browser. In Angular your browser renders the incomplete HTML page and then fill it with the result from your REST call.
In your case you will have to add a REST layer to your back-end. Then you can create an Angular project which calls this REST layer. So these are 2 seperate projects.
These are some usefull links that might help you:
https://learn.microsoft.com/en-us/aspnet/web-api/overview/older-versions/build-restful-apis-with-aspnet-web-api
https://spring.io/guides/gs/consuming-rest-angularjs/
I wanted to load angular application which generates dynamic DOM. Experience editor is loading only pre-render element and does not able to load dynamic HTML.
Is there any work around on it to load dynamic dom?
Sitecore 8 and 9 by default using the SPEAK framework for rendering the sitecore backend and Sitecore experience editor.
If you really want to use React or Angular you may want to look at Sitecore JSS.
What is the best way to use multiple modules of Angular 4 within Asp.Net Core MVC context ?
I have an app that has couple of sections, each represented by a controller and a view. On those sections, I'd like to use Angular to implement sub-sections (so let's say - for ShopController/View, I would like to have subpages - Shop/Items Shop/Cart Shop/Details etc.).
It's a no brainer with one section, as for example - for Shop I can put <app-root> in shop's Index view, where app-root is an AppComponent with <router-outlet>, residing in main AppModule (along with it's routing), but what if I have multiple such cases - so Shop section (ShopController), then Setting section (SettingsController) etc. where each section should have their own sub-routing controlled by Angular ?
You should not create separate views on the server to correspond to sub-components of your Angular ShopComponent. One of the main purposes of using Angular is to be able to create a "single page application", where you would only return to the server for data required by the application.
You could use Angular "Child Routes" to define the the Shop/Cart and Shop/Details routes. See: https://angular-2-training-book.rangle.io/handout/routing/child_routes.html
In Angular js 4 and Asp.Net application difficult to handle routing, either you need to choose asp.net routing or angular js routing. Because it two routing handling in separate section Asp.net in Register router routing table in Angular angular routing outlet.
if you using both you definitely get routing error in page refresh
So as of now no connected routing system not implemented and not available in Asp.net Core and Angular 4 routing.
I have a WP site working. It has everything rendered by using PHP files.
Now, I would like to change one page of my site to be based on React. Meaning one page-template that will execute react JS code instead of PHP. Can this be done?
I found that I can user WP-API, and that is great but can It be done in somekind of a hybrid mode?
If so, what do I do with webpack and node_modules? Will I have to navigate to the react template and run webpack run manually? Should I execute npm start on my production site?
I found tutorial showing how to use WP-API as backend server, but the React app is served on its own. I need the react app to be served by wordpress.
Help please
Regards, Ido
This is somewhat complex, but I think it's a two step process
Setup a develop environment for React, this can be done inside a wordpress project, but it would be much simpler to develop it in a side project.
Once you finished developing, you build a production version of your code(I.E, index.min.js) - this is a self contained file that should be a "plug and play". simply including this regular script tag in your page should start working.
The complex part is setting up an ES6 / Babel / React environment inside a wordpress project, but other than that, React will bundle into a browser-ready file that can be used directly inside a browser.
We are looking at integrating a full-blown GWT (Google Web Toolkit 2.0) application with an existing ASP.NET 3.5 application. My first gut reaction is that this is a horrible frankenstein idea. However, the customer has insisted that we use this application developed by a third-party.
I have almost NO CONTROL over the development of the GWT app.
My first thought is to actually attempt to embed this in an iFrame. Because GWT is running under Tomcat/Jakarta, it is hosted on a different server from the .NET app so the iFrame src will be to a URL on the other machine.
I need to utilize our own ASP.NET authorization scheme to restrict access to the embedded GWT application. The GWT app also uses embedded java applets, which don't seem to be working right now inside the iframe. The GWT app makes calls to a backend server (using GWT-RPC?).
Any major problems with this approach that anyone can see? Will GWT work on an iframe while hosted on a different machine?
NOTE: SIMPLY ADDING A DIV WITH THE SAME NAME DOES NOT WORK FOR THIS!
To expound on what Tony said, GWT can live on any page. At its lowest level, GWT hooks into a div by its ID or the body element, as its RootPanel, and adds widgets to it from there.
Simply add a div to your ASP page like <div id="gwt-root" /> and in your GWT code, start with RootPanel root = RootPanel.get("gwt-root"). Then you can start adding widgets to that panel to build the GWT portion of your page.
You'll also need to bring in your GWT generated code with a script tag, like so:
<script type="text/javascript" src="gwt-app-name/gwt-app-name.nocache.js">
Also, if you want, GWT can interact with the rest of the page using regular JavaScript using JSNI.
you do not need an IFRAME. Writeyour application so that the main panel is hosted inside a div with a specific id. If your ASP.net can provide a div with the same id, then all you have to do is include the generated JavaScript files (+ some style sheets) and your application will display inside the div.