How to replace image in ASP MVC 4 page - asp.net-mvc

Question

I have a Model class which knows to return current image, next image and previous image.
I have a Controller with an Action for switching slides.
That Action is triggered by Ajax.BeginForm which have a buttons for previous slide and next slide.
What can I do in the Action to make the view change slide without a page refresh?
Here is what I came up with so far:
Controller:
public class SlideshowController : Controller
{
static SlideshowModel slideshowModel = new SlideshowModel();
//
// GET: /Slideshow/
public ActionResult Index()
{
return View(slideshowModel);
}
public ActionResult GetCurrentSlideImage()
{
var image = slideshowModel.CurrentSlideImage;
return File(image, "image/jpg");
}
[HttpPost]
public ActionResult SlideshowAction(SlideshowModel model, string buttonType)
{
if (buttonType == ">")
{
slideshowModel.IncrementSlideNumber();
}
if (buttonType == "<")
{
slideshowModel.DecrementSlideNumber();
}
return JavaScript("alert('what to return to update the image?')");
}
}
View:
#model PresentationWebServer.Models.SlideshowModel
#using (Ajax.BeginForm("SlideshowAction", new AjaxOptions { UpdateTargetId = "result" }))
{
<img src="#Url.Action("GetCurrentSlideImage") " id="result"/>
<br />
<input class="float-left" type="submit" value="<" name="buttonType" id="btn-prev" />
<input class="float-left" type="submit" value=">" name="buttonType" id="btn-next" />
}

Answer 1

Very basic action
public class SlideshowController : Controller
{
...
public ActionResult GetCurrentSlideImage()
{
return Json("newImagePath.jpg");
}
...
}
On the client side add a jQuery ajax call :
<script>
function changeImage() {
$.ajax({
url: 'Slideshow/GetCurrentSlideImage',
type: post,
contentType: 'application/json',
success: function(data) {
$("#imageIDToReplace").attr("src", data);
},
complete: complete
}
});
}
</script>
Code not tested, but should give you the right idea
Edit:
You can return the image as data using image id in a new Action like this:
public ActionResult Image(string id)
{
var dir = Server.MapPath("/Images");
var path = Path.Combine(dir, id + ".jpg");
return base.File(path, "image/jpeg");
}
taken from Can an ASP.NET MVC controller return an Image?
then you can replace the src in the image attribute with the Action address
like -
http://localhost/MyController/Image/MyImage