How to replace image in ASP MVC 4 page

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" />

}

I would use a jQuery.ajax call to the action, the action would return json (do the action return the path of the image? or the actual image?) and switch the src of the image using jQuery with the data returned — Royi Mindel, Aug 22 '13 at 19:25
@Royi Mindel, the action return the actual image. But I guess I can save the image... What does json part in your scenario? I am a little confused as of what do I return from the controller's action and how do I use it. — kroiz, Aug 22 '13 at 19:42
http://stackoverflow.com/questions/4240619/how-can-i-replace-image-inside-a-td-with-loading-image-during-ajax-call This shows the ajax part, you use your action as the url there, and return the path of the image — Royi Mindel, Aug 22 '13 at 20:01

score 4 · Accepted Answer · edited May 23 '17 at 11:49

4

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

edited May 23 '17 at 11:49

Community

1
1

answered Aug 22 '13 at 20:09

Royi Mindel

1,258
12
35

That looks great, how does this compared to using partial view? is partial view even an option here? – kroiz Aug 22 '13 at 20:50
A partial view is a tool to reusing the same cshtml code in many views, but it's only (in my knowledge) used when the server creates the page, and what you wanted is doing an action without recreating the page. – Royi Mindel Aug 22 '13 at 21:35
What if my images are not files but Streams in the model? – kroiz Aug 25 '13 at 04:39
I know I can return instead of Json a FileStreamResult. but can jquery ajax function handle it? – kroiz Aug 25 '13 at 04:47
added a piece of code for server handled images, let me know if it helps – Royi Mindel Aug 25 '13 at 06:37
The code you added still assumes the image is a file on the server. I think maybe I need the SRC point to an action instead of a file path... – kroiz Aug 25 '13 at 12:59
If you can return the stream on the server, you can create the action on the server to return a path instead – Royi Mindel Aug 25 '13 at 13:23
To make a stream into a path - One need to save the stream to a file; That I would like to avoid because then I would also need to realize when to delete the file. – kroiz Aug 25 '13 at 19:37

How to replace image in ASP MVC 4 page

1 Answers1