ASP.NET MVC Core：如何在加载视图时自动渲染内嵌局部视图？

嘿，这个需求其实很好实现，ASP.NET Core MVC里有两种常用方式能让你的Index页面一加载完成，divPageLoad容器里就直接显示Details局部视图的内容，下面给你详细说下：

方案一：服务器端直接渲染（推荐） #

这种方式是最直接的，页面在服务器生成时就把局部视图的内容嵌入到指定容器里，用户打开页面就能立刻看到，不需要额外的异步请求。

你只需要修改Index.cshtml里的divPageLoad代码，直接在内部调用局部视图的渲染方法：

<div class="card">
    <div id="divPageLoad">
        <!-- 直接渲染Details局部视图 -->
        @await Html.PartialAsync("Details")
        <!-- 如果局部视图不在当前Views文件夹下，要写完整路径，比如： -->
        <!-- @await Html.PartialAsync("~/Views/Shared/Details.cshtml") -->
    </div>
</div>

如果你的.NET版本较低，也可以用同步版本：

@Html.Partial("Details")

注意点 #

• 确保局部视图的名称和路径正确，如果局部视图放在Shared文件夹里，直接写名称就能识别；如果和Index视图在同一个控制器的Views文件夹下，也可以直接写名称。
• 如果局部视图需要传递模型参数，你可以在渲染时传入，比如：

  @await Html.PartialAsync("Details", Model.DetailsModel)
  

方案二：客户端异步加载（适合需要动态触发的场景） #

如果你的场景需要页面加载后再异步加载局部视图（比如依赖某些客户端数据），可以用jQuery的$(document).ready()来发起AJAX请求：

首先在Index.cshtml里添加脚本：

<div class="card">
    <div id="divPageLoad"></div>
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // 发起GET请求获取局部视图内容
        $.get('/Home/Details', function(htmlContent) {
            $('#divPageLoad').html(htmlContent);
        });
    });
</script>

然后在对应的控制器里添加返回局部视图的Action：

public IActionResult Details()
{
    // 这里可以处理业务逻辑，获取模型数据
    var model = GetDetailsModel();
    return PartialView(model);
}

不过要注意，这种方式会多一次HTTP请求，用户打开页面后会有短暂的空白，直到请求完成才显示内容，所以如果只是要页面加载时就显示，方案一更合适。

内容的提问来源于stack exchange，提问作者user9335731