Question

我在C＃/ MVC4中开发了一个应用程序。

它有一个顶级菜单和底部菜单。

当我使用ajax点击链接（香蕉或苹果）时，在主视图中加载了局部视图：

@Ajax.ActionLink("Connection", "Details", "SourceConfiguration", new { id = "4505F2DE-91A2-496B-9BCB-BD1D3C2C3FB1" }, new AjaxOptions { UpdateTargetId = "result" })

单击链接时，还应修改布局以显示不同的顶部和底部菜单:(类似于Windows Azure底部菜单，根据您的位置显示上下文操作）。

我如何才能实现这一目标？（见下文所测试的内容）。

Architecture

到目前为止已尝试过的内容：默认的_layout.cshtml包含

@RenderBody()
@RenderSection("Bottom", false)

home / index.cshtml包含以下代码：

@section Bottom 
{
the code to create the bottom menu 
  [...]
}

=＆GT;这是正确呈现的。

问题出现了：视图中的每个页面都包含Bottom部分。底部不显示在部分视图调用的页面中（例如：views / apple / index.cshtml）。

当我点击Apple显示局部视图并显示特定的顶部和底部栏时，最好的方法是什么？

Answer 1

知道了：

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

在_Layout.cshtml中

<div class="navcontainer">
</div>   

<div class="">
    @RenderBody()
</div>

<div class="navcontainerbottom">
</div>

和javascript代码：

<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>

最后_MenuLayout.cshtml和MenuBottomLayout.cshtml包含创建顶部和底部菜单的代码。

Ajax加载的局部视图不会在@RenderBody之后呈现代码

1 个答案: