由Ajax加載的部分視圖在@RenderBody之後不呈現代碼

我有一個在C＃/ MVC4中開發的應用程序。由Ajax加載的部分視圖在@RenderBody之後不呈現代碼

它有一個頂部菜單和底部菜單。

的局部視圖在主視圖中加載時我的鏈路（香蕉或蘋果）上點擊使用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)

家庭/ index.cshtml包含此代碼：

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

=>此被正確呈現。

問題出在這裏：視圖中的每個頁面都包含底部部分。底部不顯示在部分視圖調用的頁面中（例如：views/apple/index.cshtml）。

當我點擊Apple顯示局部視圖並顯示特定的頂部和底部欄時，什麼是最佳方式？

來源

2014-01-22 CloudAnywhere

如果你只是在底部和頂部的按鈕或鏈接我只會隱藏或使用jQuery顯示這些按鈕。如果你有更多的內容，你可以爲該部分加載一個單獨的局部視圖 –

你可以考慮創建一個與你的主佈局類似的佈局，但需要額外的選項卡。並且您可以在需要時調用此佈局 –

我的鏈接如何更新3部分視圖或佈局？因爲如果我關注您，我應該創建3個部分視圖，一個用於頂部，底部欄和一個用於當前局部視圖。今天，它是一個Ajax快捷方式：@Ajax.ActionLink（「Connection」，「Details」，「SourceConfiguration」，new {id =「4505F2DE-91A2-496B-9BCB-BD1D3C2C3FB1」}，new AjaxOptions {UpdateTargetId =「result」} ） – CloudAnywhere

明白了：

中的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和MenuBottom Layout.cshtml包含創建頂部和底部菜單的代碼。

來源

2014-01-23 23:13:58 CloudAnywhere

由Ajax加載的部分視圖在@RenderBody之後不呈現代碼

回答

相關問題