ASP.NET Razor Pages中点击按钮后如何仅重载单个PartialView而不刷新整个站点？

问题的核心在于你当前使用的是普通表单提交，这种方式会触发整页刷新。要实现仅更新PartialView，我们需要用AJAX异步请求来调用后台方法，并将返回的PartialView内容替换到页面指定位置。下面是具体的实现步骤：

步骤1：给PartialView容器添加唯一ID #

首先，给渲染PartialView的<div>添加一个ID，方便后续用JS定位并替换内容：

<div id="articlePositionsContainer">
    @{ await Html.RenderPartialAsync("_ArticlePositonsPartial", Model.ArticlePositions, ViewData); }
</div>

步骤2：修改触发按钮的交互逻辑 #

你原来的表单提交会触发整页刷新，我们需要阻止默认行为，改用AJAX提交。可以保留原表单（确保防伪造令牌自动生成），并添加如下JS代码：

首先，确保页面引入了jQuery（如果项目还没引入，可以在_Layout.cshtml里添加CDN或本地引用）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后添加自定义JS代码：

$(function() {
    // 监听添加按钮所在表单的提交事件
    $('form[asp-page-handler="AddPosition"]').submit(function(e) {
        e.preventDefault(); // 阻止默认的整页刷新提交行为

        // 发起AJAX异步请求
        $.ajax({
            type: "POST",
            // 构造请求URL：当前页面路径 + handler参数
            url: window.location.pathname + '?handler=AddPosition',
            // 带上Razor Pages必需的防伪造令牌，避免请求验证失败
            headers: {
                RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
            },
            // 请求成功后，用返回的PartialView内容替换容器
            success: function(response) {
                $('#articlePositionsContainer').html(response);
            },
            // 处理请求错误（可选，便于调试）
            error: function(xhr) {
                console.error("请求失败：", xhr.responseText);
            }
        });
    });
});

步骤3：简化后台方法（可选但推荐） #

你的后台方法已经可以返回PartialView，不过可以简化写法，直接传递模型即可，无需手动创建ViewDataDictionary：

public PartialViewResult OnPostAddPosition()
{
    ArticlePositions.Add(new Position { ArticleAmount = 1, ArticleId = 2 });
    // 直接传递模型给PartialView，框架会自动处理ViewData
    return PartialView("_ArticlePositonsPartial", ArticlePositions);
}

关键注意事项 #

• 防伪造令牌：Razor Pages会自动在表单中生成__RequestVerificationToken隐藏字段，AJAX请求必须带上这个令牌，否则会返回400错误（请求验证失败）。
• jQuery依赖：上面的示例用了jQuery简化AJAX操作，如果不想用jQuery，也可以用原生fetch API，原理一致但写法稍复杂。
• 模型匹配：确保后台返回的模型类型和PartialView的模型（IList<Rechnungen.Models.Position>）完全一致，否则会出现模型绑定错误。

这样修改后，点击"Hinzufügen"按钮时，就会异步调用后台方法，获取更新后的PartialView内容，并仅替换页面上的表格区域，不会触发整页刷新了。

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