usr4896260 usr4896260 - 5 months ago 38
Ajax Question

How to track razor ajax form with pace.js

I'm trying to learn how to use pace.js with my Razor ajax form. The form returns a Partial View. According to their documentation, there is no need for configuration as it monitors all ajax requests (longer than 500ms). I have the following ajax form:

@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" }))
{
//...
}


On
myBeginFunction()
I added
Pace.restart()


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


Unfortnately, load bar is not in sync with the form as the load bar completes long before the form finishes submitting. I have 2 questions


  1. Is there anything special I need to do to make it track an Razor ajax form?

  2. If if I need to track the form manually, how would I do so? According to the documentation, I can track like this,
    Pace.track(function(){ $.ajax(...)});
    , but I'm not sure how to do this with razor.


Answer

While I wasn't able to use pace (which would have been great since there's minimal configuration) I was able to resolve the issue using a plugin called NProgress. This essentially performs the same behavior but doesn't automatically perform DOM tracking as Pace does. Therefore, I have to start and start the function manually. The JavaScript below does so with the following:

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

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

Because of the nature of how NProgress works, the bar will increment but never complete until I call NProgress.done();