Как отследить форму бритвы ajax с pace.js

Question

Я пытаюсь научиться использовать 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. Что мне нужно сделать, чтобы отслеживать форму Ajax Razor?
2. Если мне нужно будет отслеживать форму вручную, как мне это сделать? Согласно документации, я могу отслеживать, как это, Pace.track(function(){ $.ajax(...)});, но я не уверен, как это сделать с помощью бритвы.

Answer 1

Хотя я не мог использовать темп (что было бы замечательно, так как конфигурация была минимальной), я смог решить проблему с помощью плагина NProgress. По сути, это выполняет то же поведение, но не выполняет автоматическое отслеживание DOM, как это делает Pace. Поэтому я должен запустить и запустить функцию вручную. JavaScript ниже делает это со следующим:

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

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

Из-за характера работы NProgress планка будет увеличиваться, но никогда не будет завершена, пока я не позвоню NProgress.done();

Answer 2

Удалите pace.restart из вашей функции ajax begin. Добавьте это на свою страницу.

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

Answer 3

У меня была та же проблема, и следующая ссылка работала для меня

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