MVC4 Ajax wait before executing the next process - ajax

Question

In my MVC project I generate an array of images and store the array as a session variable, I animate the images using slidebar and by detecting mouse movement while mouse button is down by calculating the distance between the first click and x position while the mouse is moving on a canvas.
In the controller I use:
public ActionResult Animate(int slice = 0, int udm = 0)
{
FileContentResult data;
Image objImage = null;
Bitmap im = null;
try
{
im = MySession.Current.imageArray[slice];
....
MySession.Current.image = im;
}
else
{
return RedirectToAction("Index",new {.... });
}
}
catch { }
return null;
}
and
public ActionResult ImageOut(int udm = 0)
{
FileContentResult data;
Image objImage = null;
Bitmap im = null;
im = MySession.Current.image;
...
objImage = im.Bitmap(outputSize, PixelFormat.Format24bppRgb, m);
MemoryStream ms1 = new MemoryStream();
using (var memStream = new MemoryStream())
{
objImage.Save(memStream, ImageFormat.Png);
data = this.File(memStream.GetBuffer(), "image/png");
}
objImage.Dispose();
return data;
}
From the view I use Ajax:
$.ajax({
url: '/Home/Animate',
type: 'POST',
async: false,
data: {
slice: ((lastX - firstX) + nSlice),
udm: ++udm
},
success: function(data) {
if (data.udm) {
nSlice = (data.slice);
image.src = '/Home/ImageOut?' + $.param({
udm: data.udm
});
}
},
error: function() {
}
});
I have two problems, first it takes time to update the view and skips a number of images, the second is it open many threads and if a number of users accessing the same page it slows down. I thought of using async but I am still using c# 4 and this may requires lots of changes to my code. I was reading about SignalR, my question is can this be done (providing I just update the user screen not all users) or is there a better solution.
The sequence of events I would like to achieve is:
Ajax send to the first action a request or generate the first image and wait
When the image is generated, Ajax receive success, then display the image on the screen using the second action
Then the first action generate the second image
The challenge I see is the first image keep generating the images without waiting, so my question is how I make the first action wait, and how to send to it a message to generate the following image.
I just installed VS2012 c#5, is there any example that can help me!! Would appreciate your suggestions, thanks in advance.

Answer 1

Using TPL, you could try this (taking your code above), the same can be applied for the animate method:
public ActionResult ImageOut(int udm = 0)
{
FileContentResult data = null;
Image objImage = null;
Task.Run(() =>
{
Bitmap im = MySession.Current.dicomImage;
objImage = im.Bitmap(outputSize, PixelFormat.Format24bppRgb, m);
using (var memStream = new MemoryStream())
{
objImage.Save(memStream, ImageFormat.Png);
data = this.File(memStream.GetBuffer(), "image/png");
}
});
objImage.Dispose();
return data;
}
Task.Run is just shorthand for Task.Factory.StartNew

Answer 2

Rather than changing my program to use TPL because of the learning curve; I just added async: false to my ajax; this helped to delay the refresh of the screen. Not the best approach but helped a bit.