I am doing an ASP.NET MVC 5 website with AngularJS.
I want to have a web site (SEO) and a web application site (AngularJS).
I want to switch to the SPA via "Go to SPA" link.
I want to switch back to the website via click on the home/house icon on the SPA.
When I do this switching I want to exchange the whole layout.
How would I do this with asp.net mvc?
Write your website as you would a standard MVC app. Then write an MVC controller that returns the .cshtml file of your angular app and set Layout = null; at the top. With this approach you can access everything through the .NET MVC routing and controllers and your angular app doesn't have any of your MVC layout in it.
Just create two main .cshtml files. One cshtml for the regular app, and the second for the angular app with ng-view.
Now about swithcing from one file to another use window.location.href = 'your-cshtml-file'.
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 am building an app built using ASP.Net MVC and AngularJS. I use MVCSiteMapProvider for building the site map and building Breadcrumb. I use Hybrid-SPA approach where part of the routing is handled by MVC and part by AngularJS. Switching between each module is handled by MVC and navigating with in the Module is handled by AngularJS (Similar to but with some modifications http://www.codemag.com/article/1605081).
My problem is with the Breadcrumb.
1) When I reload the page when in a route that is handled by Angular, the Breadcrumb is not built since the URL is not handled by MVC.
2) Is it possible to update the breadcrumb with the inner pages links when navigating through SPA handled by AngularJS.
I got rid of MVCSiteMapProvider and I use ng-breadcrumb (https://github.com/ncuillery/angular-breadcrumb)
Since you should always have a route defined at the angular level but the info at the MVC level is incomplete this is the only way to handle a complete breadcrumb.
I have 3 Asp.Net MVC controllers and all have one Index view. I am trying to do angularjs routing for the actions. Assuming the urls are like
http://localhost/Budget/Index (default controller)
http://localhost/Vacations/Index
http://localhost/CompanyTests/Index
In all three of my Index.cshtml files I've [ng-view] and have setup corresponding html files with angular controllers. In my app.js main module, I have a default route that opens budgetindex.html when the url is /#/. I have configured all angular routes.
Assuming I'm on this URL:
http://localhost/CompanyTests/Index/#/tests
My angular route opens up companytestindex.html, I have a form that submits a POST request on one of the action on CompanyTests MVC controller and I'm returning RedirectToAction Index after processing the file upload which takes me to the url below
http://localhost/CompanyTests/Index
And after angular route takes control it rightly considers it as /#/ and executes the default route which is not what i want. I want the user to be direct to same screen where he uploaded the file.
The summary of the question is, for multiple asp.net mvc controllers i have angular routes and my html templates post data to asp.net mvc actions. After executing the action it returns back to Controller/Index and angular considers it as the default endpoint and opens up the incorrect html.
I have already spent days trying to look for articles explaining angularjs routing with multiple asp.net mvc controllers but haven't found any help. I just need a little direction here.
Thanks
I have an ASP.NET MVC project that will have an Angular SPA inside it. At first, I decided to create a new Area for the SPA but then I realized that I'm not going to use any Models or Controllers inside the area but just JavaScript files. So, now my idea is to place all the scripts for the SPA in the main ~\Scripts\ folder of the ASP.NET MVC project but inside another folder ~\Scripts\MySPAName\ and load the SPA just trough a ASP.NET MVC View.
What's the best way to structure a project in this scenario?
Well, if you want to create such kind of project I suggest you use MVC + WebAPI + Angularjs. You really need only 2 MVC controllers: Account for all login/logout logic and Home with only one simple method Index This Index method returns view which contains only one line of code - div or section or whatever you want ng-view attribute. This will be your main application page. Why its better to use WebAPI? Because these controllers works faster than MVC ones and WebAPI provide you with great REST possibility. What bout project structure. I can suggest you my personal structure of MVC + Angularjs project:
So you have API folder for WebAPI controllers, standard Controllers folder for MVC controllers. In Scripts folder you have separate folders for your angular controllers services ang general libraries and one .js file - its your angular module and application file. Moreover, its better and cleaner if you have additional subfolders in Scripts/Controllers folder so you can split all you *.js file by category (e.g Home, Mangers, Prices etc). Also you can see that I have folder Templates in root of my project. Here you can place all your html files which you will use as angular views/templates. And I also suggest you to create additional subfolders here as in Scripts/Controllers subfolder for better and cleaner structure
Hope that will help you
ASP.NET MVC is better suited to traditional web sites. For a single page app, use ASP.NET Web API instead. Here's a tutorial:
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs
In this, There are two web projects, one is or web api and another one is for client web page (SPA).
You just need a empty web project to start an angular project.
Index.html - It is the main html page for your application. All other pages (partial pages) for your project can be placed Inside the directory Pages.
Scripts - All your js files can be placed inside this directory. You can differentiate all your js files into it's sub-directories.
Is one application can use the Singel Page Application method of ASP.NET-MVC4 on server side and SPA of AngularJs on client side?
The ASP.NET MVC4 Single Page Application template in Visual Studio comes with Knockout and not Angular. You could of course rip out Knockout and use Angular instead, but then there's not much value in using the Single Page Application template.
If you want to use Angular, I would use the AngularStart template instead: http://visualstudiogallery.msdn.microsoft.com/cc6c9c5f-2846-4822-899f-a6c295cd4f2b