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
– Royi Mindel, Commented Aug 22, 2013 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
– kroiz, Commented Aug 22, 2013 at 19:42
stackoverflow.com/questions/4240619/… This shows the ajax part, you use your action as the url there, and return the path of the image — Royi Mindel
– Royi Mindel, Commented Aug 22, 2013 at 20:01

Community · Accepted Answer · 2017-05-23 11:49:51Z

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, 2017 at 11:49

CommunityBot

11 silver badge

answered Aug 22, 2013 at 20:09

Royi Mindel

1,24812 silver badges35 bronze badges

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

8 Comments

kroiz Over a year ago

That looks great, how does this compared to using partial view? is partial view even an option here?

Royi Mindel Over a year ago

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.

kroiz Over a year ago

What if my images are not files but Streams in the model?

kroiz Over a year ago

I know I can return instead of Json a FileStreamResult. but can jquery ajax function handle it?

Royi Mindel Over a year ago

added a piece of code for server handled images, let me know if it helps

|

Collectives™ on Stack Overflow

How to replace image in ASP MVC 4 page

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related