ASP.net MVC 5 calling partial view thats in layout from Home controller

Question

Hey all I am trying to find a way (or if its possible) to call this code:

<nav>
    <ul class="nav navbar-nav">
        @if (Session["chosenAMT"] is bool == true)
        {
           @Html.Partial("_Menu")
        }
    </ul>
</nav>

When it starts the page the value for chosenAMT is false so the navigation does not load up on the _Layout.cshtml page.

However, once the user selects a value from the dropdown I need to enable that partial view to be called so that it can show to the user the navigation now.

When the user selects a value from the dropdown list I call a POST to the HomeController.cs :

$.ajax({
  type: 'POST',
  url: 'Home/showNav',
  cache: false,
  dataType: 'json',
  data: {},
  success: function (response) {
     console.log('worked');
  },
  error: function (response) {
     console.log(response);
  }
});

And this is the showNav code in the HomeController.cs :

[HttpPost]
public string showNav()
{
   Dictionary<string, string> resultsBack = new Dictionary<string, string>();

   Session["chosenAMT"] = true;

   resultsBack.Add("dback", "GOOD");
   resultsBack.Add("dhead", "worked");
   resultsBack.Add("dinfo", "called nav");

   return JsonConvert.SerializeObject(allData, Formatting.Indented);
}

I'm pretty much stuck there as to how to go about making the call back to the _Layout.cshtml page in order to show the navigation now...

Any help would be great! Thanks!

UPDATE

Got it!

_Layout.cshtml:

 <nav id="menuContainer" data-url="@Url.Action("Menu","Home")">                    
    @Html.Action("Menu")
 </nav>

_Menu.cshtml:

 @if (Session["chosenAMT"].ToString() == "True")
 {
    <ul class="nav navbar-nav">
    etc...etc....
    </ul>
 }

index.js:

 success: function (response) {
    var url = $("#menuContainer").data("url");

    $("#menuContainer").load(url);
 },

HomeController:

 public ActionResult Menu()
 {
    return PartialView("_Menu");
 }

Answer 1

You need to dynamically reload that part of the menu. To start, create an action method which returns the markup for the menu.

public ActionResult Menu()
{
   return PartialView("Menu");
}

You may also move your if condition statement inside the partial view to conditionally render some markup. So your Menu.cshtml will be like

    <ul class="nav navbar-nav">
        @if (Session["chosenAMT"] is bool == true)
        {
           @Html.Partial("_Menu")
        }
    </ul>

Now call this action method inside the outer container element.

<nav id="menuContainer" data-url="@Url.Action("Menu","YourControllerName")">
   @Html.Action("Menu")
</nav>

Now all you have to do is, reloading the content of this menu container div on the success event of your ajax call. You can use the jQuery load method

success: function (response) {
     var url = $("#menuContainer").data("url");
     $("#menuContainer").load(url);
},