miechooy miechooy - 6 months ago 23
jQuery Question

Dynamic images ASP.NET MVC

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>
}

Answer

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.