Question

我正在使用ASP.NET MVC 4.我有一个稍微重一点的“导航菜单”和“标题”，这对所有页面都很常见。

我在布局中创建了所有菜单和标题内容，但在每个导航中，浏览器重新加载菜单。有没有可能的方法来防止重新加载布局页面？

我正在使用_ViewStart.cshtml将视图与布局绑定。

Answer 1

假设这将是您呈现的HTML菜单

   <ul class="menu">
      <li><a href="/about/index">About</a></li>
      <li><a href="/contact/index">Contact</a></li>
   </ul>
   <div id="page-content">
   </div>

您的视图页面将在以下结构中创建为部分视图

About/index.cshtml
Contact/index.cshtml

注意： MVC部分视图不会有<html> or <head> or <body>，它只会有内容，类似于ASP.Net中的用户控件。你cannot use @section in partial views

现在您只需要使用ajax加载此部分内容，并使用javascript将其放置在页面内容的主占位符div中

$(document).ready(function(){
$("ul.menu a").click(function(e){
  e.preventDefault(); // prevent default link button redirect behaviour     
  var url=$(this).attr("href");
  $('#page-content').load(url);
 });
});

希望这会对你有帮助！

Answer 2

如果它们对所有页面都是通用的，您应该尝试缓存导航菜单和标题。

如果您的结果视图由

组成

标题
导航
菜单内容

你可以使用布局

@Html.RenderAction("header")
@Html.RenderAction("navigation")
@Render.Body()

“标题”和“导航”操作被大量缓存。

@Haacked在这里提到了这篇精彩的博文http://haacked.com/archive/2009/05/11/donut-hole-caching.aspx

这种方法可以清楚地区分您对标题和导航的关注。您可以专注于当前调用的动作显示的实际内容。

希望这有帮助

注意：此答案超级简化，如果您的导航基于访问页面的用户的角色/权限，则必须在执行缓存时考虑动态参数和内容。

Answer 3

最好的方法是从控制器返回一个局部视图：

return PartialView();

您还可以通过添加到顶部来覆盖正在加载的局部视图布局中的 _layout：

@{
    Layout = null;
}

如何加载视图而不重新加载MVC 4中的布局？

3 个答案: