如何防止在浏览器后退按钮上重新提交表单？

Question

我有一个 GET ActionResult 和一个 POST ActionResult。在 POST 之后，会出现一个自定义链接，供用户单击以重定向到另一个页面。

此后，当用户在浏览器中按下后退按钮时，表单会重新提交，并且会再次出现一个新的自定义链接。 这是不受欢迎的。我宁愿表格完全清除并为空，而不是发生这种情况。或者，只返回到重定向之前的相同状态（显示相同的链接并且不会重新提交）

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult ShortenURL(ShortURLModel model)
    {
        if (ModelState.IsValid)
        {
            ViewBag.currentdomain = GetCurrentAbsoluteURL();
            Tuple<bool, string> response = _shortUrlProcessor.CreateShortURL(model.originalURL, model.shortURL);
            if (response.Item1)
            {
                ViewBag.ShortenURLSuccess = true;           
                ViewBag.shortlink = ViewBag.currentdomain + response.Item2;
            }
            else
            {
                ViewBag.ShortenURLSuccess = false;
            }
        }
        return View();
    }

    [HttpGet]
    [Route("{*id}")]
    public IActionResult ShortenURL(string id)
    {
        ViewBag.currentdomain = GetCurrentAbsoluteURL();
        if (id == null)
        {
            return View();
        }

        var originalURL = _shortUrlProcessor.GetOriginalURL(id);
        if (originalURL == null)
        {
            return Redirect("~/");
        }
        return Redirect(originalURL);
    }

Answer 1

您可以使用Window: pageshow event 清除表单元素的值。请参考以下示例：

@model WebApplication6.Data.Person

<div class="row">
    <div class="col-md-4">
        <form asp-action="CreatePerson">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Age" class="control-label"></label>
                <input asp-for="Age" class="form-control" />
                <span asp-validation-for="Age" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">
    //window.addEventListener("pageshow", () => {
    //    // find the relate form element and clear the value.
    //    $("#Name").val("");
    //    $("#Email").val("");
    //    $("#Age").val("");
    //});

    //use the above code or the following code
    $(window).bind("pageshow", function () {
       $("#Name").val("");
        $("#Email").val("");
        $("#Age").val("");
    });
</script>
}

在上面的CreatePerson视图页面中，当我们点击浏览器返回按钮时，会触发pageshow事件，然后我们可以找到表单元素并清除其值。

结果如下：