MVC4 Single Page App - Multiple screens

Question

Looking through the tutorials from Microsoft it seems that they have used SPA in quite simple scenarios i.e To Filter or update a single list.

Say I have a slightly more complex interface where I might have multiple lists, multiple add screens and some wizards etc that guide the user though certain processes.

Would the preferred approach for a single page application to have multiple controllers and views for each area of the system i.e. If I have a user management area - this could be one Controller/View, maintaining a users profile could be another Controller/View.

Therefore the the users experience would be navigation between pages but on a page where they want to perform certain operations its all AJAX?

If such an app was truly SPA I think I would end up with tons of divs in one page reflecting a user interface per area in my system - The footprint of this page could potentially be huge?

I guess I could compare what I'm trying to achieve by comparing it to FaceBook? I assume however they are downloading the views via AJAX on the fly so the foot print is relatively small.

Answer 1

A true SPA would generate/destroy the UI in "real-time", usually in response to some sort of JSON call. This is where a frameword like knockout.js really helps [eliminate a lot of two-way binding code].

Of course, in the code "behind the scenes", you can structure it in any way you prefer. The new ASP.NET Web API lends itself very well to this. Setup your initial UI, code the actions (usually RESTful endpoints) as a JSON API; then let the javascript make the JSON calls and build additional UI on-the-fly.

You likely don't need to many full views, but a few partial views as templates for the javascript creating UI elements may be helpful.