ASP.net MVC 5从Home控制器调用布局中的部分视图

Question

嘿所有我想找到一种方法(或者如果可能的话)来调用这段代码:

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

当它启动页面时,selectedAMT的值为false,因此导航不会在_Layout.cshtml页面上加载.

但是,一旦用户从下拉列表中选择一个值,我需要启用该部分视图,以便它现在可以向用户显示导航.

当用户从下拉列表中选择一个值时,我将POST调用到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);
  }
});

这是HomeController.cs中的showNav代码:

[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);
}

我几乎停留在那里,如何回调_Layout.cshtml页面,以便现在显示导航...

任何帮助都会很棒!谢谢!

UPDATE

得到它了!

_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

您需要动态重新加载菜单的这一部分.首先,创建一个返回菜单标记的操作方法.

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

您还可以if在局部视图中移动条件语句以有条件地呈现某些标记.所以你Menu.cshtml会这样

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

现在在外部容器元素中调用此action方法.

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

现在您要做的就是在ajax调用的成功事件中重新加载此菜单容器div的内容.您可以使用jQuery load方法

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