MVC 5 Razor Variable Change on HTML Button click

Question

NET and MVC, I'm trying to work on a beginner project and I'm kinda of stuck.

I have data model that contains multiple picture paths in it and I'm wondering how could I change which the picture I want to display in my view on button click. Example: show picture 1, click a HTML button, and change to show picture 2.

This is what I got so far? How am I supposed to change the picID variable? Could someone explain please?

    <tr>
       <td><button type="button">Click this to change the picID variable</button></td>
       <td>@Html.DisplayFor(model => model.Picture.ElementAt(picID).picturePath)</td>
    </tr>

Alex · Accepted Answer · 2014-09-02 03:00:37Z

3

What you'll want to do is have the button invoke an action method that changes picID and returns your view. Something like /controller/changepic/1. Changepic will update picID to 2 and then return the same view and model.

The tricky part here is that button is generally used to submit forms. So you either have to add an event handler to manually set the action link or use an anchor element (@Html.ActionLink) styled like a button. You can use bootstrap to do that kind of styling.

I made a lot of assumptions, but hope this helps.

edited Sep 2, 2014 at 3:00

answered Sep 2, 2014 at 2:53

Alex

5464 silver badges10 bronze badges

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

Comments

Andre Calil · Accepted Answer · 2014-09-02 01:44:16Z

1

There are many ways. Check this out:

<img id="theImage" src="" />
<ul>
    @foreach (var i in Model.Picture)
    { 
        <li><a href="#" data-image="@i.picturePath" class="change-image">@i.picturePath</a></li>
    }
</ul>
<script type="text/javascript">
    $(function () {
        //Click event for the image links
        $('.change-image').click(function (e) {
            e.preventDefault();
            e.stopPropagation();

            $('#theImage').attr('src', $(this).data('image'));
        });

        //Display the first link
        $('#theImage').attr('src', $('ul li:first-child a.change-image').data('image'));
    });
</script>

Notice that I'm using jQuery.

Please let me know if this helps.

answered Sep 2, 2014 at 1:44

Andre Calil

7,69236 silver badges41 bronze badges

2 Comments

CatfishAlpha45 Over a year ago

I think we are think on different terms. The model.Picture is a list/array of multiple pictures. So saying model.Picture.ElementAt(0).picturePath will get me the first picture in the array. I'm just not sure how to change that picID value in raazor or javascript to where I can still pull back from my model. Int my example code above I am just keeping it simple and showing the plain text path for now.

Andre Calil Over a year ago

@CatfishAlpha45 In order to be able to change the current image on the view, you must either get all your images paths (your array) to a JS object or to the HTML structure. In my example, I'm creating a link for each path, and changing the presented image when the corresponding link is clicked. Have you give a try to my code?

ProtoCUS · Accepted Answer · 2014-09-02 01:44:17Z

1

I have a similar situation, I wanted to change an image depending on the combo value, so I use JQuery

in the cshtml I put a that contains the images I have:

<img class="imgf"> ...
<img class="imgp"> ...
<img class="imgb"> ...

The Jquery code on Combo Change:

var model = $("#ComboValue").val();
var pathgimgf = "/Images/" + model + "/imgf.png";
var pathimga = "/Images/" + model + "/imga.png";
var pathimgb = "/Images/" + model + "/imgb.png";


$(".imgf").attr("src", pathgimgf);
$(".imgp").attr("src", pathimga);
$(".imgb").attr("src", pathimgb);

I hope this can help you.

answered Sep 2, 2014 at 1:44

ProtoCUS

492 silver badges13 bronze badges

Collectives™ on Stack Overflow

MVC 5 Razor Variable Change on HTML Button click

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related