ASP.NET MVC Update HTML component from Ajax request

Question

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

No. Server-side code can't manipulate the web browser, it can only return a response. What you're trying to do sounds like a reasonable use case for something like SignalR, which facilitates a more "real time" experience between client-side and server-side code. — David
– David, Commented Apr 21, 2017 at 15:09

aperezfals · Accepted Answer · 2017-04-21 15:32:02Z

1

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

answered Apr 21, 2017 at 15:32

aperezfals

1,3891 gold badge11 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET MVC Update HTML component from Ajax request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related