Dynamic images ASP.NET MVC

Question

I must add X images to the view. Each image on click should show own input below on click.

I am getting list of images into my model. In the foreach loop I can add them dynamicly but how is it possible to make onclick function original for each one, so each input will separated for each image.

@foreach (var image in Model.Image)
{
    <div class="col-md-2" style="cursor: pointer">
        <img src="@Url.Content(image)" alt="image" />
        <input type="text" class="form-control" style="visibility: collapse"/>
    </div>
}

You need javascript/jquery to handle the .click() event - e.g. $('img').click(function() { $(this).next('input').show() }); - but would be better to give the elements class names and use them for the selectors. — user3559349
– user3559349, Commented Jun 1, 2016 at 6:26
What do you mean add original names - why do you want to add names? — user3559349
– user3559349, Commented Jun 1, 2016 at 6:31
I mean original image id so function knows which one was clicked — miechooy
– miechooy, Commented Jun 1, 2016 at 6:32
You don't need to - $(this).next('input') gets the next textbox associated with the image you clicked (and if you want to refer to the images, its just $(this) — user3559349
– user3559349, Commented Jun 1, 2016 at 6:33

CoolBots · Accepted Answer · 2016-06-01 06:50:53Z

1

You can write a JavaScript function that takes a parameter, such as the clicked image element, to indicate which image was clicked and take appropriate action:

<img src="@Url.Content(image)" alt="image" onclick="processImage(this)" />

The keyword this is a reference to the element causing the event to trigger - in this case, an image element that's been clicked.

edited Jun 1, 2016 at 6:50

answered Jun 1, 2016 at 6:35

CoolBots

4,8982 gold badges19 silver badges32 bronze badges

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

1 Comment

Muhammad Ashikuzzaman Over a year ago

And to show the input is? See @ Stephen Muecke first comment.

Collectives™ on Stack Overflow

Dynamic images ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related