ASP.Net Mvc Ajax Request in Progress

Question

I am currently using @Ajax.ActionLink to call some controller action in ajax fashion .Is there any way to detect if there is already a ajax request running/pending on page?The functionality i want is pretty basic i.e. once user clicks the link he should wait for either request to succeed or fail.He should be allowed to click it again( generate a new request to server).

I could have disabled the link but would not like to do that(i guess a href cant be disabled)

code @Ajax.ActionLink("Click Me", "ajaxactions", new AjaxOptions { UpdateTargetId = "content", HttpMethod = "Post", Confirm = "Are you Sure ?", InsertionMode = InsertionMode.InsertAfter, LoadingElementId = "im", OnComplete = "end()", OnBegin = "start()" }, new { @id = "btn", @class = "btn btn-default" }) code — knowledgeseeker
– knowledgeseeker, Commented Nov 27, 2014 at 10:22
You have both OnBegin and OnComplete functions, so you could add a javascrip variable (say) var IsExecuting = false;, then in OnBegin if its true, cancel the ajax call, otherwise set it to true. Then in OnComplete, set it to false. The user will still be able to click it but it wont do anything. The other option would be jquery (which is better anyway) — user3559349
– user3559349, Commented Nov 27, 2014 at 10:28
@StephenMuecke So would OnBegin would be invoked first and then the Controller code fired or vice versa ? — knowledgeseeker
– knowledgeseeker, Commented Nov 27, 2014 at 10:34
OnBegin is called before the ajax call to the server, and it can return false to cancel the ajax — user3559349
– user3559349, Commented Nov 27, 2014 at 10:36

Vaibhav J · Accepted Answer · 2014-11-27 11:27:12Z

2

Try this,

This Code will check for any executing ajax request before making a new ajax request. You can subscribe OnSuccess, OnFailure callbacks also :

@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions { 
    OnBegin = "return onBegin();",
    OnComplete = "onComplete",
    UpdateTargetId = "article_site"
})

and then:

var request_executing = false;
function onBegin() {
    if (request_executing == true) {return false ;}
    request_executing = true;
    return true;
}

function onComplete() {
    request_executing = false;
}

Or a jquery alternative (so you don't need that bloated jquery.unobtrusive-ajax.js file)

@Html.ActionLink("Click Me", "ajaxactions", null, new { id = "btn", @class = "btn btn-default" })

var isExecuting = false;
$('#btn').click(function(e) {
  if(isExecuting) {
    e.preventDefault();
    return;
  }
  isExecuting = true;
  $(this).addClass('someClass'); // optional - to give some visual effect to the link while loading
  $.get('@Url.Action("ajaxactions")', function(data) {
    $('#content').append(data);
    $(this).removeClass('someClass');
    isExecuting = false;
  });
});

edited Nov 27, 2014 at 11:27

user3559349

answered Nov 27, 2014 at 10:07

Vaibhav J

1,3328 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

knowledgeseeker Over a year ago

So would OnBegin would be invoked first and then the Controller code fired or vice versa ?

Vaibhav J Over a year ago

yes onBegin function will check if it can make request, if onBegin function returns false then your action will be cancelled otherwise it will call action. i have update the above function little bit.

user3559349 Over a year ago

@VaibhavJain, You need to change OnBegin = "onBegin", to OnBegin = "return onBegin()", otherwise the ajax call will not be cancelled.

user3559349 Over a year ago

That why you got the upvote :). And if you don't mind will edit it to include a jquery alternative.

Alexey Shumeyko · Accepted Answer · 2014-11-27 09:54:15Z

0

Try jQuery ajax. It can do async and sync requests to server. It's quite simple to use. http://api.jquery.com/jquery.ajax/ async=true by default.

answered Nov 27, 2014 at 9:54

Alexey Shumeyko

1172 bronze badges

2 Comments

knowledgeseeker Over a year ago

in that case i would miss the simplicity @Ajax.Actionlink offers.I would then need to bind a function with on click and move towards a more jquery sort of code.right ?

Alexey Shumeyko Over a year ago

sure, but try msdn.microsoft.com/en-us/library/…

Collectives™ on Stack Overflow

ASP.Net Mvc Ajax Request in Progress

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related