How to do this using @Renderbody from Asp.net MVC?

Question

All screens in my system are Views and are rendered in @Renderbody in _Main layout

I would like to change my layout and make it look like this:

So, basically it’s like I explained in the image, Click on the Menu will render there, and after clicking on the side submenu render again there, without removing the menu

What I thought, to create a partial with the menu, but then I would have to add it in all my Views...

Partialmenucadastro -> Menu items...

Then put them on the client list, in the creation, in the editing, etc, etc on the Dashboard...

I don’t know if it’s right, and it doesn’t look very elegant...

I thought also, to render using Ajax, but then I would have to change all my views to partial and I do not know if it would be correct this too...

Someone has some idea to give me?

Answer 1

A solution to use Ajax, without having to change all their Views for PartialViews, would be making a requisition Ajax in his Action and then just take the RenderBody generated from that View.

An example to be clearer:

_Layout

(...)
<div id="Conteudo">
    @RenderBody()
</div>
(...)

So in your View:

<a onclick="Open('Modulo/Index')">Clique aqui</a>
<div id="Conteudo2">
</div>

<script>
    function Open(url) {
        url = '@Url.Content("~/")' + url;
        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#Conteudo2').html($(response).find('#Conteudo'));
            },
            error: function () {
                alert('Ocorreu um erro!');
            }
        });
    }
</script>

Answer 2

I find AJAX not interesting for this solution.

It seems to me that this the contents of this your side menu is directly related to the link access in the top menu. You can pass this list of side menu links dynamically (by Viewbag or something like that) and render normally in _Layout.

In _Layout:

<div class="conteudo">
    <div class="menulateral">
        @foreach(var item in ViewBag.LinksFromMenuSuperior) {
            <a href="@item.Link">@item.Titulo</a>
        }
    </div>
    <div>
        @RenderBody()
    </div>
</div>

You can also use @Section {} and @Rendersection(), which you may not know because you didn’t comment as an option, but it is worth a query, unfortunately it (in this solution) would behave much like @Partialview(), as you will also have to change the pages.