ASP.NET MVC Razor视图中_Layout界面位置异常问题咨询

问题描述 #

在ASP.NET MVC项目中添加Razor视图并创建Cate控制器后，出现两个异常：

• Categories的Index视图顶部自动加载了_Layout界面内容
• 将_Layout.cshtml中的RenderBody()放到顶部时，_Layout的内容反而显示在页面末尾

核心原因 #

你的Index视图代码存在严重错误：在Razor视图文件（Index.cshtml）中混入了控制器的C#代码（那些public IActionResult方法块）。Razor引擎会把这些不属于视图的代码当作普通文本直接输出到页面，打乱了页面的渲染顺序，导致Layout和视图内容的显示位置完全错乱。

正确的Index视图代码 #

将Index.cshtml中的控制器代码全部删除，保留正确的视图代码：

@model IEnumerable<WebApplication1.Models.Category>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Categories</h1>

额外说明 #

RenderBody()的作用是在布局页中预留位置，用来渲染当前子视图的内容。正常情况下：

• 若RenderBody()放在_Layout顶部，子视图内容会先显示，之后才是Layout的其他内容
• 若放在底部，则Layout内容先显示，再渲染子视图内容

之前的异常完全是因为视图中混入了错误代码导致的渲染顺序混乱，修正视图代码后即可恢复正常。

内容的提问来源于stack exchange，提问作者Minh Hải