ASP.NET Core MVC：主视图加载时如何加载PartialView？

嘿，作为ASP.NET Core MVC新手，这种局部视图加载/重载的需求其实挺常见的，我来给你一步步捋清楚怎么实现，保证你能看懂！

1. 先给控制器添加返回PartialView的Action #

首先得让你的控制器能生成并返回HistoryTable.cshtml这个局部视图。假设你的控制器是LocationsController，可以添加这样一个Action：

public IActionResult LoadHistoryTable()
{
    // 实例化你的视图模型，这里要根据实际需求填充数据
    var viewModel = new LocationsHistoryViewModel();
    // 比如从数据库获取历史数据：viewModel.HistoryList = _locationService.GetHistoryRecords();
    
    return PartialView("HistoryTable", viewModel);
}

注意：如果你的局部视图不在当前控制器的视图文件夹下，要写完整路径，比如"~/Views/Shared/HistoryTable.cshtml"。

2. 主视图Locate.cshtml的两种加载方案 #

根据你提到的“加载/重载”，分两种场景来实现：

场景一：页面初始加载时直接渲染局部视图 #

如果只是页面第一次打开就把局部视图放到divLocationsHistoryTable里，直接用ASP.NET Core的内置方法就行，代码如下：

@model Project.Models.CustomModels.LocationsHistoryViewModel
<div class="container">
    <!-- 你的其他页面内容 -->
    <div id="divLocationsHistoryTable">
        @await Html.PartialAsync("HistoryTable", Model)
    </div>
    <!-- 其他页面内容 -->
</div>

这样页面一加载，局部视图就会自动渲染到指定的div中，非常简单。

场景二：页面已加载后，动态重载局部视图 #

如果需要在页面运行过程中（比如点击按钮、定时刷新）重新加载局部视图，就得用AJAX来实现了，步骤如下：

首先确保你的项目引入了jQuery（ASP.NET Core MVC的默认模板一般已经包含，要是没有的话可以手动添加），然后在主视图里写AJAX代码：

@model Project.Models.CustomModels.LocationsHistoryViewModel
<div class="container">
    <!-- 其他页面内容 -->
    <div id="divLocationsHistoryTable">
        <!-- 初始加载可以先用场景一的代码，或者留空等AJAX加载 -->
        @await Html.PartialAsync("HistoryTable", Model)
    </div>
    <!-- 举个例子：加个按钮触发重载，你也可以改成页面加载完成自动触发 -->
    <button id="btnRefreshHistory" class="btn btn-primary">刷新历史记录</button>
    <!-- 其他页面内容 -->
</div>

@section Scripts {
    <script>
        // 页面加载完成后自动执行一次，实现重载效果
        $(document).ready(function() {
            loadHistoryTable();
            
            // 绑定按钮点击事件，点击就刷新局部视图
            $("#btnRefreshHistory").click(function() {
                loadHistoryTable();
            });
        });
        
        // 封装重载逻辑的函数
        function loadHistoryTable() {
            $.ajax({
                url: '@Url.Action("LoadHistoryTable", "Locations")', // 替换成你的控制器名称
                type: 'GET',
                success: function(result) {
                    // 把返回的局部视图内容替换到目标div里
                    $("#divLocationsHistoryTable").html(result);
                },
                error: function(xhr, status, error) {
                    console.error("加载历史记录失败：" + error);
                    $("#divLocationsHistoryTable").html("<p>加载失败，请稍后重试</p>");
                }
            });
        }
    </script>
}

小提示：

• @Url.Action会自动生成正确的路由地址，避免硬编码URL出错
• 如果需要根据参数加载不同的历史数据，可以在AJAX的data里传参数，比如data: { locationId: 123 }，然后在Action里接收：public IActionResult LoadHistoryTable(int locationId)

3. 局部视图HistoryTable.cshtml的注意事项 #

局部视图的模型要和你传递的一致，比如：

@model Project.Models.CustomModels.LocationsHistoryViewModel
<!-- 这里写你的表格代码，示例如下 -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>位置名称</th>
            <th>历史时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var record in Model.HistoryList)
        {
            <tr>
                <td>@record.LocationName</td>
                <td>@record.HistoryTime.ToString("yyyy-MM-dd HH:mm:ss")</td>
                <td><button class="btn btn-sm btn-info">查看详情</button></td>
            </tr>
        }
    </tbody>
</table>

一定要保证局部视图的模型类型和控制器Action返回的模型一致，不然会出现模型不匹配的错误。

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