Nir*_*man 3 .net asp.net-mvc razor asp.net-mvc-5 razorengine
以下是我的 ASP.NET MVC 应用程序中的具体场景：
有两个布局页面彼此完全相同。但一种是在“”标签中具有与角度相关的属性，而另一种是非角度布局。为了避免两个 razor 布局文件中出现重复标记，我想创建一个部分视图并在布局页面之间共享它。
以下是部分视图（razor），我将其命名为“_LayoutPartial”：
_LayoutPartial.cshtml
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
上面的部分视图在“_Layout.cshtml”和“_AngularLayout.cshtml”中共享，如下所示：
_布局.cshtml
<body>
@Html.Partial("_LayoutPartial")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
_AngularLayout.cshtml
<body ng-app="myAngularLab">
@Html.Partial("_LayoutPartial")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
当我尝试运行 MVC 应用程序时，出现以下错误：
文件“~/Views/Shared/_LayoutPartial.cshtml”无法直接请求，因为它调用了“RenderBody”方法。
错误信息非常明显，看来我们只能在母版页中使用RenderBody方法，而不能在其他地方使用。但我很想知道如何通过编写通用代码而不是在两个布局页面中保留重复的代码来拥有两个相同的布局页面（如示例所示有一些差异）？
我认为您需要使用“嵌套布局”，将一个布局页面作为其他布局的“母版页”，类似于网络表单的对应部分：
_BaseLayout.cshtml
<html>
<head>
<!-- other header tags (link, meta, title etc.) -->
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<!-- JS & CSS includes if available -->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- other elements -->
</div>
<div class="container body-content">
@RenderBody()
<!-- other elements -->
</div>
@RenderSection("scripts", required: false)
</body>
</html>
_布局.cshtml
@{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; } // put reference to base layout here
<div>
<!-- Non-Angular layout -->
@RenderBody()
</div>
_AngularLayout.cshtml
@{ Layout = "~/Views/Shared/_BaseLayout.cshtml"; } // put reference to base layout here
<div ng-app="myAngularLab">
<!-- Angular layout -->
@RenderBody()
</div>
使用“嵌套布局”的优点：
无需重复@Styles.Render& @Scripts.Render，也用于@RenderSection（它们会自动插入到引用基本布局的每个页面）。
无需使用多个body标签，只需替换为div标签即可查看页面内容。
文件“X”无法直接请求，因为它调用的“RenderBody”方法肯定源自Html.Partial该方法，该方法是直接从子布局调用的，而带有该方法的布局页面RenderBody不能直接作为模板请求。
如果要为嵌套布局设置默认布局，请将子布局引用之一放入_ViewStart.cshtml：
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
另请注意：部分视图旨在在视图页面中使用，而不是在布局页面中使用。布局页面专门用作视图页面的占位符 - 不用于通过操作方法直接访问。
| 归档时间： |
|
| 查看次数： |
8874 次 |
| 最近记录： |