How to accomplish this MVC layout

Question

Being relatively new to MVC I have been struggling for the past several weeks getting my layout to work.

I have managed to get myself really twisted into knots. So instead of trying to explain and unravel my mess perhaps instead someone could explain how I would accomplish the following at a high level.

1. _Layout this would have all the css js etc. It would also have basic structure.

Of course HTML tags not allowed in code block....each render is in a div.

@RenderPartial(Header)</div>
@RenderBody()</div>
@RenderPartial(Footer)</div>

2. RenderBody is Index.cshtml and it would be broken into three pieces

@

@Html.Partial(NavMenu, model)</div>
@Html.Partial(SubNavMenu, model)</div>
@Html.Partial(MainContent, model)</div>

I have this basic layout and it looks fine until you click one of the menu items.

The menu items render as:

<a class="k-link" href="/stuffroute">Stuff</a>

That route goes to a controller that returns a view and that navigates away from the above arrangement in Index.cshtml. So I end up with the header, footer, and subdash nav....

So the question is...

How do I route / orchestrate my layout to not lose the differing pieces?

Answer 1

Partials don't do anything for you here. You're essentially asking about how to create SPA (single page application), although in this case your application will have other pages, it's just that the index view will act like a SPA.

That requires JavaScript, specifically AJAX, to make requests to endpoints that will return HTML fragments you can use to replace portions of the DOM with. For example, clicking "Stuff 1" causes an AJAX request to be made to the URL that routes to FooController.GetSubNav([stuff identifier]). That action then would use what was passed to it to retrieve the correct sub-nav and return a partial view that renders that sub-nav. Your AJAX callback will then take this response, select a portion of the DOM (specifically the parent of the sub-nav) and insert the new HTML as its innerHTML.

If you're going to be doing a lot of this, you'll want to make use of some client-side MVC-style JavaScript library, like Angular for example. These make it trivial to wire everything up.