Question

我有一个页面，其中包含可变数量的textareas。当触发卸载事件时，我检查哪些textareas已被更改，然后执行AJAX帖子到MVC控制器，MVC控制器添加/更新数据库中的实体。

除非刷新页面，否则一切似乎都有效。数据库操作所需的时间比服务页面所需的时间长，要求您在看到更改之前刷新两次。

JavaScript的：

$textarea.one("change", function () {
    // Changed textareas get stored in 'unsaved' here...
});

$(window).on("unload", function () {

    if (unsaved.length > 0) {

        var assignmentDetails = [];
        // POST data formationg goes here...

        $.ajax({
            type: 'POST',
            url: '/Home/Upload',
            data: JSON.stringify(assignmentDetails),
            contentType: 'application/json; charset=utf-8',
        });
    }
});

控制器：

public class HomeController : Controller
{
   public ActionResult Index()
    {
        using (var context = new SandboxContext())
        {
            ViewBag.Assignments = context.Assignments.Include(a => a.Details).ToList();
        }

        return View();
    }

    [HttpPost]
    public EmptyResult Upload(List<AssignmentDetailViewModel> models)
    {
        if (models.Count > 0)
        {
            using (var context = new SandboxContext())
            {
                foreach (var model in models)
                {
                    // Database insertion logic goes here...
                }
                context.SaveChanges();
            }
        }

        return new EmptyResult();
    }
}

我想避免使用$ .ajax选项 async：false ，因为它已被弃用。

Answer 1

请记住，在卸载事件期间运行任何同步代码时，这将阻止UI。您可以在触发异步请求后添加同步循环，检查在异步请求的回调中设置的某个值。示例：Call An Asynchronous Javascript Function Synchronously

另一个选项是跟踪表单上有未保存的更改，并使用onbeforeunload事件提示用户在离开页面之前保存更改，有效取消页面卸载并允许用户单击“保存”。 AJAX call on onbeforeunload to save data

Answer 2

将两个方法的主体放在一个锁定语句中，这样当你点击刷新时，在执行数据库更新之前不会收到任何数据。

这是一个坏主意，但它可能会奏效。

在页面刷新之前自动保存页面卸载时未完成的表单数据

2 个答案: