partial view loaded by Ajax do not render code after #RenderBody - ajax

Question

I have an application developped in C# / MVC4.
It has a top menu and bottom menu.
A partial view is loaded in the main view when I click on a link (banana or apple) using ajax:
#Ajax.ActionLink("Connection", "Details", "SourceConfiguration", new { id = "4505F2DE-91A2-496B-9BCB-BD1D3C2C3FB1" }, new AjaxOptions { UpdateTargetId = "result" })
When the link is clicked, it should also modify the layout in order to display different top and bottom menus: (similar to Windows Azure bottom menu which display contextual action depending on where you are).
How I can I achieve that? (see below for what has been tested).
What has been tried so far:
The default _layout.cshtml contains
#RenderBody()
#RenderSection("Bottom", false)
the home/index.cshtml contains this code:
#section Bottom
{
the code to create the bottom menu
[...]
}
=> This is correctly rendered.
Here comes the problem:
each page in the views contain the Bottom section.
The bottom section is not displayed in pages called by partial view (ex: views/apple/index.cshtml).
What's the best way when I click on Apple to display the partial view and to display a specific top and bottom bar?

Answer 1

Got it:
in HomeController:
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult MenuLayout(string name)
{
return PartialView("_MenuLayout", null);
}
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult MenuBottomLayout(string name)
{
return PartialView("_MenuBottomLayout", null);
}
In _Layout.cshtml
<div class="navcontainer">
</div>
<div class="">
#RenderBody()
</div>
<div class="navcontainerbottom">
</div>
And javascript code:
<script type="text/javascript">
var menuLoaded = false;
$(document).ready(function () {
if($('.navcontainer')[0].innerHTML.trim() == "")
{
$.ajax({
url: "#Url.Content("~/Home/MenuLayout")",
type: "GET",
success: function (response, status, xhr)
{
var nvContainer = $('.navcontainer');
nvContainer.html(response);
menuLoaded = true;
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
var nvContainer = $('.navcontainer');
nvContainer.html(errorThrown);
}
});
}
if($('.navcontainerbottom')[0].innerHTML.trim() == "")
{
$.ajax({
url: "#Url.Content("~/Home/MenuBottomLayout")",
type: "GET",
success: function (response, status, xhr)
{
var nvContainer = $('.navcontainerbottom');
nvContainer.html(response);
menuLoaded = true;
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
var nvContainer = $('.navcontainerbottom');
nvContainer.html(errorThrown);
}
});
}
});
</script>
And finally _MenuLayout.cshtml and MenuBottomLayout.cshtml contain the code that create the top and bottom menu.