如何使用 pace.js 跟踪剃刀 ajax 表格

Question

我正在尝试学习如何将 pace.js 与我的 Razor ajax 表单一起使用。形式 returns 局部视图。根据他们的文档，不需要配置，因为它 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(...)});，但我不确定如何使用剃须刀进行追踪。

Answer 1

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

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

Answer 2

虽然我无法使用 pace（这本来很棒，因为配置最少），但我能够使用名为 NProgress. This essentially performs the same behavior but doesn't automatically perform DOM tracking as Pace 的插件解决问题。因此，我必须手动启动和启动该功能。下面的 JavaScript 使用以下内容执行此操作：

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

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

由于 NProgress 工作方式的性质，在我调用 NProgress.done();

之前，进度条会递增但永远不会完成

Answer 3

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

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

如何使用 pace.js 跟踪剃刀 ajax 表格

How to track razor ajax form with pace.js

javascript

ajax

asp.net-mvc

razor

pace