CODEWITHSUNDEEP
javascriptc#ajaxasp.net-mvc
Yuri Morales
Yuri Morales

Reputation: 2518

ASP.NET MVC Update HTML component from Ajax request

Is there any way to update a HTML progress bar (or any component) in Ajax request by server side?

For example (simulated):

JavaScript:

$.ajax({
url: '/Sales/SaveStoreByType',
type: 'POST',
data: {
    locationId: id
},
success: function (result) {
         ...
},
 error: function (xhr, ajaxOptions, thrownError) {
         ...
},
update: function(percent){
   MyProgressBar('update',percent);
}
});

and server side:

public IActionResult SaveStoreByType(short locationId)
{
   foreach (var item in collection)
   {
     //here simule a heavy process and update progress bar
     i++;
     ajaxrequest.update(i);
   }
   return Json(new { error = 0 });
}

Thanks

Upvotes: 1

Views: 389

Answers (1)

aperezfals
aperezfals

Reputation: 1389

You can use SignalR to comunicate with the server, and get the Task status, so you can update de statusbar

But you can also make request in a loop with a recursive function and setTimeout() function, something like this:

function viewProgress() {
    $.get('@Url.Action("GetTaskStatus", "YourController")', function (data) {
        if(data.Success){
            //finished
        }
        else{
            //update your status bar from data.Percent
            setTimeout(viewProgress(), 1000);
        }
    });
}

You must have a Action: GetTaskStatus in YourController that return a JsonResult with an object that contains Success and Percent properties

Upvotes: 1

Related Questions