1

我正在尝试学习如何将 pace.js 与我的 Razor ajax 表单一起使用。表单返回一个局部视图。根据他们的文档，不需要配置，因为它监视所有 ajax 请求（超过 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 个问题

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

3 回答 3

1

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

<script>
    paceOptions = {
        restartOnPushState: true,
        ajax: true,
        document: true,
        restartOnRequestAfter: true
    }
</script>
于 2016-06-06T20:15:05.317 回答
0

我有同样的问题，以下链接对我有用

$(document).ajaxStart(function() { Pace.restart(); });
于 2017-11-03T23:36:51.470 回答
0

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

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

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

由于 NProgress 工作方式的性质，条形图会增加，但在我调用之前永远不会完成NProgress.done();

于 2016-06-15T12:17:29.600 回答