如何使用 pace.js 跟踪 razor ajax 表单答案

【问题标题】：How to track razor ajax form with pace.js如何使用 pace.js 跟踪 razor ajax 表单
【发布时间】：2016-06-06 18:21:58
【问题描述】：

我正在尝试学习如何在我的 Razor ajax 表单中使用 pace.js。表单返回一个局部视图。根据他们的文档，不需要配置，因为它monitors all ajax requests（超过 500 毫秒）。我有以下 ajax 形式：

@using (Ajax.BeginForm("MyAction", null,
new AjaxOptions
{
    HttpMethod = "POST", // HttpPost
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "myDiv", 
    OnBegin = "myBeginFunction()",
    OnSuccess = "mySuccessFunction(data.msgType, data.msg)",
    OnFailure = "myFailFunction('Error', error)",
    OnComplete = "myCompleteFunction()"
}, new { @class = "form-inline" }))
{
   //...
}

在myBeginFunction() 我添加了Pace.restart()

function myBeginFunction()
{
   //...
   Pace.restart();
   //...
}

不幸的是，加载栏与表单不同步，因为加载栏在表单完成提交之前很久就完成了。我有 2 个问题

我需要做些什么特别的事情来让它跟踪 Razor ajax 表单吗？
如果我需要手动跟踪表单，我该怎么做？根据documentation，我可以像这样跟踪Pace.track(function(){ $.ajax(...)});，但我不知道如何用剃须刀做到这一点。

【问题讨论】：

标签： javascript ajax asp.net-mvc razor pace

【解决方案1】：

从您的 ajax 开始函数中删除 pace.restart。将此添加到您的主页。

<script>
    paceOptions = {
        restartOnPushState: true,
        ajax: true,
        document: true,
        restartOnRequestAfter: true
    }
</script>

【讨论】：

它不起作用。 Ajax 表单返回一个局部视图。我不确定这是否会影响它？
它们会影响每个 DOM 活动。 ajax 或文档加载无关紧要。
好的，谢谢。虽然我仍然无法让它工作，但我找到了一个替代解决方案，上面发布了答案。

【解决方案2】：

虽然我无法使用速度（因为配置最少，所以这很好）我能够使用名为 NProgress 的插件解决问题。这基本上执行相同的行为，但不会像Pace 那样自动执行 DOM 跟踪。因此，我必须手动启动和启动该功能。下面的 JavaScript 使用以下内容：

function myBeginFunction()
{
   //...
   NProgress.start();
   //...
}

function myCompleteFunction()
{
   //...
   NProgress.done();
   //...
}

由于 NProgress 工作方式的性质，该栏会增加但永远不会完成，直到我调用 NProgress.done();

【讨论】：

【解决方案3】：

我遇到了同样的问题，following link did work for me

$(document).ajaxStart(function() { Pace.restart(); });

【讨论】：