从下拉列表中选择时显示 Microsoft Edge“离开站点”消息

Question

我有一个使用 Razor 的继承 MVC5 Web 应用程序，当页面加载时，显示两个下拉菜单、一些数据和五个按钮，其中一个被禁用（保存）。当我从第一个下拉菜单中选择不同的选项时，应该会显示带有日期选择器的输入字段以及“确定”按钮，并且应该启用“保存”按钮。这在 IE 11 中运行良好，但在 Microsoft Edge 中，会出现一条消息，询问“离开站点？您所做的更改可能无法保存。”如果我单击“离开”按钮，则会出现微调器并留在页面上。

在 IE 11 中，当从第一个下拉列表中选择任何其他选项时，会出现微调器，页面会重新加载带有日期选择器的输入字段，但会出现 OK 按钮，并且启用 Save 按钮。唯一一次显示类似消息的是单击后退按钮时。

我浏览了代码，发现如下：

第一个下拉的代码：

@Html.DropDownListFor(m => m.StatusId, new SelectList(Model.StatusList, "Value", "Text", Model.StatusId), new { @class = "form-control", @id = "StatusList"})

我还发现了一个被隐藏的提交按钮：

@Html.HiddenFor(m => m.CurrentTypeName, htmlAttributes: new { id = "CurrentTypeName" })
<input id="FinalizeValidationButton" type="submit" name="action:FinalizeValidation" style="visibility:hidden" />

在一个 javascript 文件中，我发现了以下内容：

//This is the first dropdown mentioned above
 $('#StatusList').change(
function () {
    triggerFinalizeValidation();
    setVisibility();
});

var triggerFinalizeValidation = function () {
var selectedStatus = $('#StatusList').val();
$("#CurrentSignificantActivityTypeName").val($("div.active").prop("id"));
if (selectedStatus != 1) {
    navParams.userAction = true;
    $('#finalizeButton').prop('disabled', true);
    navParams.isDirty = false;
    $('#FinalizeValidationButton').trigger('click');
}};

所以发生的情况是，用户从第一个下拉列表 (StatusList) 中选择了一个不同的选项，这会触发 $('#StatusList').change，然后调用 triggerFinalizeValidation()，这又会添加一个点击事件到隐藏的提交按钮（“FinalizeValidationButton”）。无论出于何种原因，它都会触发类似回发的响应，这会导致 Microsoft Edge 认为用户正在尝试离开当前页面，而实际上他们并没有。

单击隐藏按钮时，将执行 RiskController.ca 中的以下代码。除了已经提到的字段/按钮之外，屏幕上还有许多下拉菜单、字段等。因此，这部分代码验证用户选择的内容并根据选择的内容执行计算。当我在 JavaScript 中注释掉 click 事件时，浏览器消息不会显示，但 FinalizeValidation 方法也不会执行。

    [AcceptVerbs(HttpVerbs.Post)]
    [MultiButtonAction(Name = "action", Argument = "FinalizeValidation")]
    public ActionResult FinalizeValidation(RiskViewModel viewModel)
    {
        string currentActivityTypeName = viewModel.CurrentActivityTypeName;
        var risk = _riskRepository.FindFull(viewModel.Id);

我想知道是否有一种方法可以在下拉列表中使用@onchange 以某种方式调用控制器中的 FinalizeValidation 方法，以查看是否可以解决浏览器消息的出现...想法？

Answer 1

我最终使用了

$(window).off('beforeunload');

之后

$('#FinalizeValidationButton').trigger('click');

解决了问题。