I want to create a Asp.NET MVC SPA application using .net , jquery, javascript. These technology stack is fine to create a SPA application or i must use knockout or ember or angular in my SPA Application?
For SPA, you should choose a JavaScript framework such as Angular, Aurelia or any other. If you use jQuery, you can still create a SPA but it requires a lot of plumbing. Also, its harder to maintain application state using jQuery.
Yes. it is possible to make single page application in asp.net core without using any third party javascript framework.
Check this nuget Package : https://www.nuget.org/packages/AjaxSpaMvcCore/
Github Repository : https://github.com/KishorNaik/Sol_Ajax_Spa_MVC_Core
Related
I have an ASP.NET MVC Framework project. It's time to move the client part to modern React. The project is very big. How to organize all this correctly or can you share the project on the GitHub?
Foundation task. Do it together with ASP.NET MVC. What would both fronts work together on the same site. What would create the React routing and not break the current ASP.NET MVC routing?
If you want to use React or any SPA framework it means that you need to use SPA(Single Page Application) approach of building WEB application.
Please see more about this here:
https://developer.mozilla.org/en-US/docs/Glossary/SPA
Here are general advices:
Backend: Since you use ASP.NET MVC it would be flexible and easy to migrate your backend part to ASP .NET WEB API ( build REST endpoints). As contrary to MVC Razor pages approach, WEB API Controllers will return data, not a view.
Of course you need to revise you logic at backend side and transfer from Razor pages required pieces of code that related to handling data etc.
Frontend: Create a simple React application(here you can see the guide):
https://reactjs.org/docs/getting-started.html
You React application will send requests to the new WEB API Controllers not to MVC Controllers. Once you receive data from the backend side, store it and handle it at your Client-side.
For storing your data I highly recommend you to use Redux Store:
https://redux.js.org/api/store
Routing: React has router https://v5.reactrouter.com/web/guides/quick-start using this router you will render and manipulate you pages on client side without page-refreshing according to the SPA conception, hence, no need to worry about your MVC routing.
Example of application you can find at official page here:
https://reactjs.org/community/examples.html . But I think once you complete the guide, this question is going to be skipped.
I want to learn React.js, but most of the tutorials show how to integrate ASP.NET Core Web APIs with React.js, while I did not find any tutorial for using React.js with ASP.NET Core MVC. Any advice? Can I assume that React.js works only with ASP.NET Core Web APIs, where React.js is used to consume the JSON returned from the API?
I want to learn React.js, but most of the tutorials show how to
integrate ASP.NET Core Web APIs with React.js, while I did not find
any tutorial for using React.js with ASP.NET Core MVC. Any advice? Can
I assume that React.js works only with ASP.NET Core Web APIs, where
React.js is used to consume the JSON returned from the API?
No, the react.js could work with Asp.net core web API and the Asp.net core MVC. In this scenario, the react.js act as the Front-End, and the API and MVC controller will act as the backend.
To answer the question more clearly, we need to understand the concept of front-end and back-end separation. As we all know, in the MVC pattern, it can be divided into data layer, logic layer and view layer. This view layer is what we call the front-end, which is mapped to the code level, namely, HTML, JS, CSS and other code files. The data layer and logic layer are more back-end parts. These files will be in a project and will not be developed, tested and deployed separately.
For the Front-End separation application, front-end and back-end are separated in different projects. The front-end has special front-end developers to develop and test, while the back-end has back-end developers to develop and test. They interact with each other through API.
So, to create the Front-End separation application, most developers will choose to create a React.js(Angular.js or Vue.js) application as the front-end application (because the React is a JavaScript library for building user interfaces) and use Asp.net core project as a back-end.
To use the React.js with Asp.net Core MVC application, you could use the React project template create a Asp.net core application (choose the react template when create Asp.net Core application via visual studio), then, in the React page, you could call the MVC controller to get data (it is similar with the API), after that render the data. Like this:
We use Web Api with angular framework or react so that we can bind data coming from the database with the angular or react controls in easy way by just calling HTTP services.
If you are planning to use normal mvc web application, you can do that, but real question is how will you transfer data coming from database in your mvc controller to angular or react components
We have a complex webapp built in Play Framework (1.*) and we want to move towards a SPA behaviour for it. What JS framework would you recommend for this? Most of the business logic is on the server side (Play controllers).
What would be the pros or cons of using AngularJS or ReactJS, or maybe other framework. How easy would be the integration?
Take a look at the act framework at http://actframework.org/, an ex play one that decided to take action, his video for a Rest Service is very impressive: https://www.youtube.com/watch?v=B2RRSzYeo8c
From my experience , I can recommend the following :
Indeed, You will have two applications :
SPA application : Based on reactjs framework with redux .
API application : You can any of the famous framework grails , express, laravel , ruby-on-rails ...etc.
I don't recommend to use Angular, ReactJS is more powerful for many reasons : namely virtual-dom
You can use still Play 1.x as back-end, by converting controllers methods into web-socket events or more simple REST (checkout jersey module, also for inspiration).
After you can make interacting UI HTML SPA based use ReactJS or VueJS (I prefer the second, better separation concerns and better performances).
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
I have used AngularJs on top of my ASP.NET mvc projects. Even though both AngularJs and ASP.NET are based on mvc architecture I can see some advantages when using AngularJs on top of my ASP.NET mvc projects. The main advantage that I see in this approach is better rendering of views. If so why not use ReactJs with ASP.NET mvc since it is purely focusing on views. Why do we have to mess up with two mvc frameworks. Won't it be better to use Reactjs on top of ASP.NET mvc than using AngularJs and ASP.NET mvc combination (Note that I will always use ASP.NET mvc and I don't want to use a pure JavaScript framework). Please correct me if I am wrong. Thanks in advance.
I've used both angular and react in projects in the past. With angular you dirty your html markup with angular code. With react it's all encapsulated in a component. As I was never an expert with angular I may not have used it to the best of it's ability but to me Reactjs seems like the better framework and seems like a better fit with ASP.NET MVC.
I don't believe there is one correct tool to do the job though. It's really whatever suits your needs and what your comfortable with. I would suggest giving Reactjs a shot though.