如何避免返回Razor Page主页面时出现“Confirm Form Resubmission”弹窗？

为什么会出现确认弹窗 #

你遇到的弹窗是因为主页面的搜索通过POST请求提交，调用history.go(-1)时，浏览器会尝试重新发送之前的POST请求，为防止重复提交数据，浏览器会弹出确认提示。

方法1：改用GET方式提交搜索表单 #

将搜索表单的提交方式改为GET，搜索参数会附加在URL中，返回时浏览器仅发送GET请求，不会触发重复提交弹窗：

1. 修改主页面表单，设置method="get"并指定跳转的第二页：

<form method="get" asp-page="Results">
    <!-- 你的搜索字段示例 -->
    <input type="text" name="SearchKeyword" asp-for="SearchKeyword" />
    <input type="date" name="StartDate" asp-for="StartDate" />
    <button type="submit">搜索</button>
</form>

2. 第二页的返回链接可直接使用history.back()，或生成带搜索参数的主页面链接（更稳妥）：

<a onclick="history.back()">返回搜索页</a>
<!-- 或者直接指向带参数的主页面 -->
<a asp-page="Index" 
   asp-route-SearchKeyword="@Model.SearchKeyword" 
   asp-route-StartDate="@Model.StartDate">
    返回搜索页
</a>

方法2：实现PRG（Post/Redirect/Get）模式 #

这是避免POST重复提交的标准方案，步骤如下：

1. 主页面表单保持POST提交，指向当前页面的搜索处理方法：

<form method="post">
    <input type="text" name="SearchKeyword" asp-for="SearchKeyword" />
    <input type="date" name="StartDate" asp-for="StartDate" />
    <button type="submit" asp-page-handler="Search">搜索</button>
</form>

2. 在主页面后台代码（Index.cshtml.cs）中实现OnPostSearch方法，处理后重定向到第二页并传递搜索参数：

public class IndexModel : PageModel
{
    [BindProperty]
    public string SearchKeyword { get; set; }
    [BindProperty]
    public DateTime? StartDate { get; set; }

    public IActionResult OnPostSearch()
    {
        // 此处可添加参数验证、搜索预处理逻辑
        // 重定向到第二页，携带搜索参数
        return RedirectToPage("Results", new 
        { 
            searchKeyword = SearchKeyword, 
            startDate = StartDate?.ToString("yyyy-MM-dd") 
        });
    }
}

3. 第二页（Results.cshtml.cs）接收参数，并生成返回主页面的带参链接：

public class ResultsModel : PageModel
{
    [BindProperty(SupportsGet = true)]
    public string SearchKeyword { get; set; }
    [BindProperty(SupportsGet = true)]
    public DateTime? StartDate { get; set; }

    public void OnGet()
    {
        // 加载搜索结果逻辑
    }
}

<!-- 第二页的返回链接 -->
<a asp-page="Index" 
   asp-route-SearchKeyword="@Model.SearchKeyword" 
   asp-route-StartDate="@Model.StartDate?.ToString("yyyy-MM-dd")">
    返回搜索页
</a>

这种方式下，浏览器历史记录中均为GET请求，点击返回时不会触发确认弹窗，同时能保留之前的搜索参数。

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